Hello, hope everyone had a good week. This week I’ve been hard at work on menu and UX design, so let’s take a look at what that involves. To be honest, I kind of hate it. It’s just very tedious and slow. I’ve actually written some pretty bad code while doing it, but since it’s something I just want to be over, I can’t be bothered to actually figure out the “best” way to do something and so I just make it work and deal with it later. Not the best practice long-term, but for now it’s fine.
Menu Navigation
With a game like ours that heavily recommends a controller, menus need to be navigable with both a controller and keyboard. The thing is, no matter how hard we recommend controller, a large portion of people will still play on keyboard/mouse. Unity tries to make this easy for you, with automatic menu navigation between interactable UI elements. The issues arise when you want to do anything cool with the menu.
So in our menu, a small flame particle effect is used as a selection cursor. To achieve this, we just set the position of the flame effect based on the currently selected button. We also disable the normal state effects on the buttons. Unity, however, makes a distinction between “selected” game objects and “highlighted” game objects. When navigating with the mouse, the button the cursor is over is “highlighted.” When navigating with the keyboard or a controller, the button currently active is “selected.” Getting around this is a big headache because the two states are mutually exclusive. This is to say that when the player highlights a button with the mouse, the keyboard and controller navigation get overridden.
To avoid all this headache, we have chosen to simply disable all mouse control in menus, and thus in the game as a whole. It makes sense, because there would never be a reason to use the mouse otherwise, so keeping the player’s hands on the keyboard/controller makes for a smoother UX (User eXperience). It does mean the menu elements are more difficult to design, though. Simple elements like buttons are easy, but things like sliders and text boxes just make way more sense with a mouse. The header image on this post is our (WIP) options menu. You can’t have a slider with normal navigation because it would be impossible to navigate left or right from it without changing its value. This is why in any game with controller-navigable menus that have sliders, you first “activate” the slider by selecting it like a button. Then you “confirm” its value and re-enable navigation.
Menu Aesthetics
We have a pretty easy to follow aesthetic. Fire. That’s it, pretty much. We’ve tried to communicate this through the visual design of our menus (and the game as a whole). The main menu is more important than many people may think, since it’s the first thing any player will see. It needs to immediately communicate the vibes that the developer wants the player to feel. Hence our fiery aesthetic and thumping menu theme.
The flame selection cursor felt like a fun and unique way to handle menu navigation, but it does get a little tricky with stuff other than buttons.
The layout of the menu is also worth a good deal of consideration. We want to keep all the important details without making it too overwhelming to look at. We need to consider where the eye is drawn and how we can use space efficiently. All of this without compromising the aesthetics and visual appeal.
The End
Well that’s all I got today. I should be getting my new mic by Saturday, so expect a stream then or possibly Monday.
See you next week
-S