Multiple Choice Panel System (with overcomplicated math explanation)


It's been a few days since I've posted an update, so here's some major updates to I guess what I'd call a pretty minor aspect of the game.

In Visual Novels, panels such as these are an easy way of performing a lot of different functions. You can use them to change locations, present dialogue options, unique responses, etc. It is deceptively simple, its a very barebones mechanic, that is meant to be used over and over again.The first part was figuring out how to tell the panels to position themselves relative to each other. The final expression I put together was

"(1080-((1080/a)b)+42)+((1080/b)/3)"

Admittedly its a mess. Its broken up into two sections, I'll try my best to explain it here with an image of my thought process below.

The left side of the equation starts by dividing the reference resolution by "a" a is the length of the array of items that will be displayed to the player. 1080p divided by 5 locations comes to 216. If for example you only had 2 locations, then that result gets bigger. This is used to space each of the panels evenly from each other.

Then all we have to is space those panels away from each other by doing this

"(216)b"

That result we get can be multiplied by "b" the index of the panel. The first panel is 216*1, so it stays at 216, 216*2=432 and so on. This is perfect because now the panels will be spaced away from each other evenly, and they will position themselves mostly correct without us having to touch it.

There is just one issue, the direction the panels appear in is backwards. If 0 is the bottom of the screen, then 1080 is the top. All we have to do to flip it is subtract from the top instead of adding from the bottom. "(1080-216)" And you do this for all of the panels.So whats the + 42 for? This last bit of math in this first equation shifts the panels vertically so they're actually inside the screen. If the math does 1080-216*5, you would get 0. And at 0, the center of the last panel will align itself with the very last pixel on the bottom of the screen, so all you have to do is shift everything up by some value, and after some testing I did originally have a larger value, but I lowered it to 42. 

That is where the second part of the equation comes in.

"(1080/b)/3"

It's a bit tricky to explain. The alignment is good, but when all 5 panels display, the tops and bottoms actually poke outside of the screen. So this second equation takes each panel's divided result and divides it further by a constant. This gives us a squish value. Or I guess you could call it a scaler. Like if the screen was your mouth, and the ui panels were a really big burger. You'd squish it with your hands so it could fit in your mouth.

Then viola, you have perfectly spaced multiple choice panels that adapt based on how many choices the player will see.

Leave a comment

Log in with itch.io to leave a comment.