Menu Progress

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:

ManifoldGarden_UI

New game select menu:

August new game menu

Settings menu:

August settings menu
Level select menu (for debugging):August level select menu

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:

early design 2

early design 3

early design

Here are some early mockups in photoshop:

screen_optionA_Opaque

screen_optionD_gradient

screen_optionB_Translucent screen_optionC_centerOpaque

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:

Menu_Settings-Gameplay-BackAndResetReversed

Menu_Settings-Gameplay Menu_Settings-Controls-Keyboard

Menu_Settings-Controls-Controller

Thought about other ways of showing button highlight:

highlight 1

hightlight 2

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.

dropdown problem

Ended up switching to cycle buttons:

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:

button remapping

Also got the menus to adapt to different input.

Mouse:

mg_mouse

Keyboard:

mg_keyboardonly

Dualshock 4 controller:

mg_ps4

Xbox 360 controller:

mg_xbox360

Opening Menu UI

Been super busy with development and travel these last few months.

Soon I will write an update catching up on the past few months, but for now, here’s a quick update.

Been working on the UI for the opening menu. This is what it looks like so far:

ManifoldGarden_UI_001

I spent this weekend trying to get button remapping working. Using the control mapper that comes with Rewired.

It’s been like pulling teeth this entire time, but I’ve got the basics integrated into the Manifold Garden menu layout now:

UI_ManifoldGarden

Had to adapt it to use TextMeshPro and also to not auto-generate the layout that I don’t want.