Posting some progress images of the menu over the course of last few months.
Here’s what the menus in Manifold Garden looked like back in August:
Start menu:
New game select menu:
Settings menu:
Level select menu (for debugging):
As you can see, they looked pretty awful. They were all using the default Unity button design, which just didn’t fit with the rest of the rest of the art style. Also, it was very confusing when there were only 2 buttons shown, because one would be grey and one would be white, and it wasn’t very clear which button was highlighted.
In mid-September, I decided it was time to redesign this. Playtesters kept requesting features like button remapping, and being able to adjust mouse and joystick sensitivity. All of this had to be interfaced with via the UI, so I figured, might as well take the time to overhaul the system.
Here are some early drafts on paper:
Here are some early mockups in photoshop:
The opaque background one was my first design. The others were added based on people’s feedback as many thought the first one looked too empty.
However, I decided to still go with it in the end. It felt bold and striking. All the others felt like compromises. Also, while they might have seemed like good ideas in theory, they didn’t work that well in practice. For example, having a translucent background meant the menu looked very busy, and if paused during game, it wasn’t always a guarantee that you’d get a good background. The design with the small box in the middle had to change in size to adapt to different menu screens.
Some more tweaks for other menu screens:
Thought about other ways of showing button highlight:
Lots of people liked the dashes on the side, but to me, they didn’t feel as consistent with the rest of the art style. Ended up sticking with the box outline.
Around this time, I was also starting to face a lot of problems with dropdowns. They caused a lot of problems visually with spacing that I just didn’t like, and the control for them when using controller or keyboard wasn’t very intuitive. You had to first select the dropdown, then go down, then select, etc.
Ended up switching to cycle buttons:
Added some more details to the cycle buttons. Notice the brief flash when you change the value.
Here’s pretty close to the final layout. Also got button remapping working:
Also got the menus to adapt to different input.
Mouse:
Keyboard:
Dualshock 4 controller:
Xbox 360 controller:
