From the very beginning, I wanted to focus the Main Menu in a 3D Space, where each option would give you a different glimpse of the narrative, with the protagonist, her girlfriend and the alien showing option-dependant.
Design Process
The menu went through a few iterations. First of all, I used sketches to determine both the basic layout and camera angles of the Menu.
In Adobe XD, I created my first iteration of the design came with me following up on the concept of the cartoony-sci fi design. I struggled at first to make the text stand out from the buttons, due to both the text and buttons being blue.
This was solved by settling with a darker blue, which with the drop shadow helped to stand out against the box.
However, I recieved feedback that the cartoony style of the UI wasn't fitting of that of a 80s-inspired game, and that I should look towards a UI more inspired by VHS-inspired media.
I then started from scratch and instead focused on old CRT TV's options menus, which showed that they focused a lot on blocks and pixel icons, as well as a strict palette of blue and white. In my first iteration, I felt that the select option being in the corner caused the player to look in too many directions.
From here, I instead moved it above the text, and found a menu I was satisfied with.
Programming Process
To program the menu took a bit of work. It was the first thing I worked on even before our narrative was fully decided.
The first task came with getting the 3D Menu to work. I made this through creating a custom event from an actor that took the form of a camera. This was an event that transitioned to a new view target everytime it was called.
To set it up with the actual menu, I had a Boolean call from the widget everytime a certain option was hovered, and for the Boolean to be turned off when it was unhovered.
From here, I then had a sequence in the Level Blueprint check which Boolean was active, and then use that Boolean to call the event from the player, using the cameras put in the level as references.
For the Press Any Key widget, it was just as simple as checking if the player had already pressed the key, and if they hadn't, it would bring them to the new menu.
From here, we had a functioning menu camera and beginning screen.
Next, came designing the actual environment for the Menu.
I had to move away from my original idea of showcasing the three characters upon finding out the protagonist's girlfriend would not have a model, and instead took this opportunity to show the options menu when the player hovers upon it, so the player has a quicker, easier access to it.
Following the VHS palette of the widget, I created unlit blue and white materials for the objects in the room, blue being for surfaces and white being for objects. This was easily achieved through having the material's shading material be unlit.
Additionally, the background of the stage was done through a panner of blue inside of a white box, which constantly moves. I chose this as a background to avoid objects blending into the background while still sticking to the strict blue/white VHS palette. This was done through a Panner multiplying two textures together.
From here, I had a basic layout of the menu. However, an animation student gave me feedback that we should be able to see both of the Alien's heads, as well as a lecturer stating it didn't have enough context.
I then messed around with the protagonist's camera angle, as well as changing their animation to give more context to show that they were hiding from the alien.
To add to the CRT effect, I added a Overlay over the widget that gave it scanlines. While it showed as black at first and blocked all buttons, I then added a source for it into the level, as well as changed it's visibility to Not-Hit Testable. Finally, to help it blend in, I had it's opacity set through R, so it did not appear as a solid video.
I also decided to add animations to the widget to make it seem smoother. This includes a short logo-fade in, as well as a fade-in white widget when the camera zooms into the white models, which was done through adding the new fade-in to viewport.
I received feedback from Industry that the camera transitions of the menu were too slow and it was easy for transitions to choppily intersect with each other because of this. As a result, I changed the blend space duration from 2 to 0.7 seconds to help remedy this.
This is the final result of the menu.
Comments