Design Process
The Pause Menu came with a few iterations in designing it within Adobe XD.
First of all, I intended it to be a hologram bound by metallic anchors in reference to our Sci-Fi theme.
I made two designs, of which I struggled to find satisfaction with either, but both served as reference for my final design.
My first design was as seen below. Being closer to the image above, I found it was rather uninteresting to navigate, having no unique iconography with thin buttons.
I also received feedback that the metallic anchors on the side weren't recognizable as such, and had no depth. I attempted to amend this through adding one behind the holographic box.
My second menu design was an attempt to try and make this design more interesting in giving more comfort and context to the player through the wider buttons, icons and hover text.
However, I found giving icons to holographic buttons was difficult without conflicting against the style, and couldn't find myself satisfied with the overall colour palette.
I then created the base for a new menu that aimed to remedy this, instead having a tablet-like appearance in place of the metallic anchors. However, feedback with lecturers indicated this stood against the 80s style, and I was recommended to instead attempt a style closer to a pixel-VHS style.
I then created this proof-of-concept. I decided to use character iconography for the buttons to bring more focus to these characters and the narrative that surrounds them.
Normal State:
Hover State:
In-Game Implementation
The pause menu was relatively easy to implement. I created bindings for each option to change the text at the top to reflect the option that was hovered.
I then created an options sub-menu, which were programmed through console commands for Screen Size, changing game settings for Frame Rate, and changing the sound through a sound class override.
I then added the new assets, and changed the font to be a VCR font of VHS days. However, I changed the "Last Checkpoint" to "Level Name" in this new iteration to save level designers time, instead printing the level name as the binding.
In terms of putting the Options Menu and Exit to Menu screens into the game, I adapted the placeholder screens through changing the font and buttons to match the palette.
However, the strict palette meant that the hover state would have to be a different colour from the font else it loses it's visibility. I worked around this by having the button's hover states resulting in a change of the colour of the font through scripting, changing it back to normal when unhovered.
This helped keep the 80s VHS style intact without muddying the palette.
Finally, to make the menu function smoothly, I had a transition inspired by an old TV starting up, where it starts out thinned from the middle before appearing.
Point of reference.
I also reused the death animation for exiting the game, as a playful jab at the player for "giving up" in showing narratively that the alien had won.
From here, the menu was finished, and everything worked as intended.
Comments