You know what they say: a game is only as good as its menus. Well, maybe a lot of people don't say it, but I sure do! OK fine, that's that first time I've ever said that... But the point still stands! As the UI Designer for Reboot, I wanted to make sure that the game had the best possible menus that it could have. While I did not go into the project thinking I would be spending this much time on all of these menus, I can say now that I had a blast and I am proud of all the work that I did! So let's see the timeline of all the menus I have made for Reboot up until this point.
The first menu of the bunch that I needed to make was the controls screen. It's important for players to know how to play the game, and they can't know that if they don't know what any of the buttons do! Before I got to actually creating the assets I needed, I wanted to find a style that I could follow in order to streamline the process.
This image became the core of how I began to style not only the controls screen, but most of the UI and menus as a whole. The simplicity and old-school style of this screenshot not only lends itself super well to the ideal aesthetic of Reboot but also makes it extremely easy to have nice-looking menus that I can make all on my own without needing the assistance of an artist. This way, the artists can focus a lot more on making assets for the level and making the game itself come to life! Anyways, I took this style and created the first official menu of Reboot: the controls screen!
This screen shows up right before the player actually gets into the level while loading all of the different scenes. This way, the player can familiarize themselves with the controls of the game before actually dropping into the level! On top of this, I made every single control have its own color to make the screen easier to digest for the player. I also set up the assets so that each button on the controller can be changed from an active image to an inactive image, allowing for me to easily change the menu if new controls are added or old controls get changed!
Now, all of us at Unknown Space had decided that we wanted to go to the Champlain Games Festival, and so we did! But before we went, I thought it would be pretty important to have a title screen for our game. Presentation is important, and we want to present as best as we can! The thing is, while the style of controls screen definitely worked with our game, the old tv monitor aesthetic is not super visually welcoming, so I knew I had to take a different angle for the title screen. During one of our meetings, I doodled up this "beautiful" mockup to get the general vibe of what I wanted across to my team.
With the OK from everyone, I began to implement it! Using art of our roller-skating TV made by one of our artists, Leanna Russell, I tried to capture the idea of speed while also gaining inspiration from colorful 80's visuals to make the title screen come to life. Once I had done all of that, there was only one thing left on my mind: isn't the transition from this aesthetic to that of the controls screen too much of a leap? Because of this, I really needed to nail down a transition between the two, and so I made animations for the buttons that you can see below!
And so our game had a title screen! The colors I used to outline the character and to underline the title are the same colors as our speed channels, and are in the same order as in-game.
Another menu that we wanted to add in before we went to the Champlain Games Festival was a pause menu with the ability to look at the controls again, invert the camera controls, or even go back to the main menu to end their playthrough whenever they wanted to. Sadly, this menu did not get fully finished in time for CGF, but immediately after the festival all of the loose ends got tied together.
And here is the pause menu in all its glory! Once again, this menu is styled off of old TV monitors and their limitations in terms of graphics. The fun thing about this menu is that when it is open, it actually freezes time in-game. While this might sound cool, it was a part of the reason why the menu was unable to be fully functional for CGF; when time is frozen, you lose a lot of access to the convenient functionality that Unity's EventSystem provides. What this means is that you can't easily do things like animations or have buttons that can detect automatically when they are near other buttons and things of the sort. This lead to Ben Strong, one of our programmers, coming through and creating his own script for buttons that works regardless of whether or no time is frozen. Even though him and I had to tackle with this for a sizable amount of time, without that we wouldn't have a pause menu!
Another cool feature of the pause menu is being able to check the controls while playing. This way, players don't feel info-trapped when they start playing. But even despite having the controls be accessible in two different places, we often ended up needing to explain a whole block of the game to testers during QA and CGF. If only there was a solution to this...
How To Play Screen
Of course! A How-To-Play screen! After observing people play our game, we realized that we never really told the player what to do in our game. What does boost mean? What is my goal? How do I even play this game? All of these were questions unanswered back then, but with the addition of a How To Play screen, those answers could all be answered without us needing to be next to the player! Now, before I got into actually making the screen, I wanted to find a solid picture for inspiration to make sure I could nail this thing down.
Going with the same aesthetic as most of the menus, I looked for some old TV menus, and this one really caught my eye. With so much empty space on the right, I could reuse that area to be where all the information is displayed to the player, with the left part of the screen being a series of options that the player can cycle through. With this idea solidified in my head, I went to work on making it become a reality!
Slight disclaimer: please excuse the sometimes shoddy quality of the GIF above, I promise you it looks like it should in the actual game. But anyways, here it is! Everything about the game that the player needs to know is on the left of the screen, and the player can cycle through it all using the controller. When they hover over something, the right part of the screen changes to have information about the selected item, a video to help visualize it, and a diagram of which button on the controller is used if applicable. Oh, and that white noise effect? Not only does it fit the style of the game and the menu, but it also helps hide the loading time of the videos when moving between different options! With all of that, the player finally has a way to learn all about how to play Reboot on their own.
And there we have it: all of the menus I designed for Reboot. Hopefully detailing the process of making each individual menu and how they stemmed off one another gives you a bit of insight into my thought process, and if it didn't well hey, I'm just glad you read through it all!