Close Mark all as read
Notifications Announcements
192 views 2 followers
Astara asked about my drop-down menu, so I figured I'd make a tutorial. 


At least I hope this is the menu they meant...

I realize that this is probably more information than most people are going to want, but I also wanted to be detailed, as you can really waste a lot of time trying to get things aligned if you don't know what math to do/how to design your assets so they don't make you miserable later. Hopefully you can glean the basic concepts from the screencaps and bolded text, but if you need more info, I apparently wrote a whole novel about this.

For this I will be using options buttons which I have added to my game's resource library -- note that I am adding them as buttons rather than uploading them under "interfaces" as you may be used to doing for your game options.


When you add a button to your resource library, you have the option of adding a version which shows when hovered over. This is optional, but in this case I am using this feature to provide explanatory text for each option, because for this game I used cloud and weather themed symbols as buttons. If your buttons are more obvious representations of what they're supposed to do, you can skip the steps regarding hover and click area placement. 

If you are using a version with hover text, there are some design tips that will make your life easier. 

First option: make the buttons and hover versions the same size 

Full disclosure: I used the above options for a different game, in which I added them to my library under "interfaces" instead of "buttons". In that context, the size of the buttons didn't seem to be an issue. I'm not honestly sure if that's because they were inside of my textbox or what -- this might not work quite as well with the following tutorial as it does with options contained by the textbox... You might need to fiddle with the "hit area" coordinates (more on this later) to get these working properly as a dropdown menu. On the other hand, making the hover and the non-hover image the same size does spare you from dealing with placing the hover version. 

Second option: make the hover version larger than the main image

Don't ask me why my computer randomly previews invisible png backgrounds as black sometimes, it just does.

Because some of my hover text is very long (and because my options menu will be appearing in the space above the textbox, where players are more likely to be clicking/tapping) I didn't want to have my hover text show up anytime somebody hovers within two inches of my options menu -- for this reason I made all of the basic icons the same size, but then expanded the width for the hover text versions. Once we go through a slightly tedious process involving ONLY THE MOST BASIC math (trust me, you want to do the very basic math or else this could take all day -- it's just subtraction, and you can use a calculator) the hover text will only appear when the icon itself is hovered over, so it doesn't get in the way of the game. 

Design tip for option 2: if you note the red arrows in the above image, you want to be careful when you design your hover version that you don't change how this edge is cropped.

Your hover text might be on a different side of the icon depending on where you put your menu and what direction it opens in, but wherever it is, make sure the opposite side doesn't get altered. You need to have the same amount of space on that side as in the non-hover version, or else it's going to be annoying later. 

Okay, if you chose to skip the hover versions or make your hovers the same size as the non-hover versions, this is where you want to tune in again. 
Let's say you got all your options made and uploaded as buttons (and their hover versions uploaded, if you're using them). The next step is to go to your game's screens map. 

You will need to make two new screens: one for the button which opens the drop-down menu (which will be visible for most of your game) and one that contains the "drop down" part. It will save you a couple steps later on to make both of them now.

Once those are made, we'll start by setting up the options button screen. 
Open the screen and add the options or menu button, which will serve to open the drop-down menu. 

Use the "show button" animation on the options button, and place the button where you want your menu to open from. Make a note of those coordinates, too, as you'll need them for the next screen. 

At this point if you are using a hover version that is a different size from the default button, you will notice that when you hover over the button, the icon jumps off to the side.




That's because it's time for that really easy math that's going to save you a major headache - skip this if you're not using hovers, or if they're the same size. 

You need to know the width of both the default and hover versions of your button (if you put the text above or below the icon instead of next to it, then you'll need the height instead). 

All you need to do is subtract the smaller number from the larger one. That's it. Do not panic because math!
In this case my hover is 168 pixels wide, and the default version is 64. 
168 - 64 = 104

104 is how many pixels the hover version "jumps to the side". To compensate, we just put -104 as the X axis for the hover. 
However, this will make the engine think it should only show the hover when you hover 104 pixels off to the left of the icon. You may be going, "LENORE, WTF?" but all you need to do is put 104 (or whatever number you got when you did the math for your own buttons) as the X axis for the hit area. 



You may need to save and refresh the screen before you can see this working properly. 

Okay, if you're skipping all the hover stuff, start reading again here!

Last thing on this screen: add the "action" animation. You need this to open the options screen, but also to close this screen, so use the little red plus sign to the right of the open screen action to add another one, and set it to close. 

Now save and close this screen.

Next we set up the actual "drop down" part of the menu. 
Open the options screen you made, and add all of the buttons, including the options button that you already had on the first screen. 
Remember how I told you to take note of the coordinates of the button on the first screen? Use the same coordinates to place the options button again. If you had to set the hover and hit area before, that information will have been saved to the button, so you don't have to add it again. 
Add an "action" animation, and this time, make it do exactly the opposite of what it did last time: Close the "options" screen, and open the "options button" screen. This is how players will open and close the drop down. 

Now you can place your next button. Since I made my menu vertically stacked, I use the same X axis on all of them, so they're aligned. Then you just have to decide how far apart you want them vertically. 

Once it's place, do the same easy math you did for the first button -- figure out how wide the two versions are, then subtract the smaller number from the larger one to set the hover and hit coordinates. 

Now you just need to add an action -- you can find the special functions for the options buttons at the bottom of the actions animation editor. 

Note that the story log option isn't available here as it is in the default options bar. Something else a little different is that instead of the "mute/unmute" option in the default bar, which automatically toggles between the two words, with this setup you're more likely to have one button that toggles the sound on and off without the hover text changing (changing it could be done, but would involve another screen and tutorial), which is why I went with "toggle sound" as my hover text, rather than "mute". 

Now you just need to repeat the process until you have all the icons for your drop-down menu in place and assigned actions. 

Don't forget to save!

Now that your screens are made, you just need to go to your first scene (or wherever you want the drop-down available) and open the advanced options for the page you want it on. Set it to open the "options button" screen, then save. 

And you're done! You don't actually need to open the options screen itself -- the players will use the button screen to do that. Screens stay open from scene to scene unless you set another page (or button) to close them, so unless you close it, it will remain visible through the rest of the game.