The Rabbit Hole Menu

In my free time, I often enjoy playing video games. At the time, I was on an indie game kick. I had just played through Ori and the Blind Forest, Ori and the Will of the Wisps and Hollow knight. One thing that stood out to me about these games was how simple, yet effective the main menus were in each game. They each used very minimalistic designs, emphasizing the atmosphere they wanted the player to be immersed in. The music, sound effects, and responsiveness of the menu navigation felt smooth and relaxing. All of these pieces made it so that I wanted to click that “Start Game” button. The feelings I had with these menus were amazing for something so trivial.

My experiences with each game’s menus got me wondering about the processes that took place to make these menus look and feel the way they do. What programming is needed to make it all function? How do I make simple but effective artwork for a menu to look beautiful with little art experience? Where do I start with a Menu? How long does something like a simple menu take to develop from scratch? Where will I get sound effects and music for a menu?

I had all these questions and wasn’t satisfied with the answers I found online. With that, I decided that the only way I could find the answers I was looking for was to create a menu from the ground up myself.

Before I could dive deeper into the development of a menu, I first needed to understand the fundamentals of a main menu. I needed to do research on what buttons to include or how to handle navigation to sub menus. I knew that this part was vital to making my main menu feel immersive and interesting to navigate. Without this piece, I likely would’ve started my menu blind with no direction. This would have led to an end product I wouldn't be satisfied with.

To gain some insight, I started researching other successful game developers to see if they had any knowledge that they could share. My focus was on how to make a menu from scratch and what elements are important for the menu. I ended up coming across a few different creators but this creator stood out the most. Thomas Brush has a video that goes in depth into his menu creation process and how he likes to make his menus. I really liked the way he broke down each component and left the video open-ended for developers like myself. Feel free to check out the video below.

A video by Thomas Brush that goes into how to make a main menu.

With the expertise shared in this video, I wanted to begin brainstorming how I wanted the menu navigation to be mapped. I started by drawing some simple window sketches to get a sense of direction. Take a look!

Window sketches to layout ideas for menu and sub-menus (1/2)

Window sketches to layout ideas for menu and sub-menus (2/2)

With window sketches in hand and a sense of how I wanted to layout the menu, I was now ready to move onto creating the theme for the menu.

When it comes to theming, I struggle. I had no idea initially what I wanted to focus the theme of my main menu on. After brainstorming some ideas, I found that I really wanted to make a menu using some logos I had sitting in a folder from a previous project. The project’s name was “Rabbit Hole.” I really loved the whimsical feeling that the logo gave off. The logo also made picking the font (Amatic SC) for the menu super easy since I wanted the font to have the same feeling that the logo has. Take a look at the logo!

The Original Rabbit Hole Concept Logo

I also wanted the menu to have a sense of wonder. I find that my sense of wonder often comes from starting off into the distance. When I picture what the distance looks like, I find that I see a set of mountains or hills and a night sky.

Having these two thoughts in mind, I wanted to start making the vision of the menu in my head a reality. I’m not the best artist. It’s one of my weaker areas. For this project, I wanted to be able to make my own art without having to hire an artist. I lack practice in art and thought this would be a good way to practice that skill. In order for me to do just that, I started researching ways to create simple 2D landscape art with apps like GIMP or Photoshop.

In my research I came across a couple of different content creators that offered a unique process on how to approach this type of art style. Thomas Brush and Nemanja Sekulic both presented valuable information on the process of making 2D landscape art that I was able to take and run with for my menu. Check out the videos I referenced below:

A video by Thomas Brush that covers his process in making 2D landscapes for his games

A video by Nemanja Sekulic that covers his process in making any type of 2D landscape art

With Nemanja Sekulic’s video, I was able to create a landscape that captured the feeling of wonder perfectly; However, I felt that the image was too busy to be the background art for my Menu. I think it's also important to mention that the Moon in the logo for the final product was inspired by the image below.

My first piece of artwork using Nemanja Sekulic’s 2D landscape art techniques

With Thomas Brush’s video, I was able to create a landscape that is simple and perfect for my background. It’s not nearly as detailed as the previous image but when some blur effects are added, the image works perfectly as a backdrop.

My first piece of artwork using Thomas Brush’s 2D landscape art techniques

I also designed a third background that wouldn’t end up getting used for this project but I saved for any future projects.

Another piece of artwork I made using techniques I learned

With a solid plan and themed assets, I was now ready to move onto choosing a game engine to develop the menu.

Choosing a Game Engine, as I learned, can be one of the more difficult parts of building a project. I started my research by trying to decide if I should build my own engine from scratch or utilize an existing engine. To save time and begin the project as soon as possible, I elected to utilize an existing engine. But what do I choose? After doing some digging, I narrowed down my picks to Unreal Engine 4 and Unity Engine. My goal was to find one that was free and easy to learn.

Unreal Engine 4 was extremely powerful and free but I quickly realized that in order to use it properly, I would need to take more time to learn each piece of the engine. I found that Unreal Engine 4 was used in many big budget games such as Kingdom Hearts 3 and Final Fantasy 7 Remake. For Scripting, Unreal Engine 4 offered visual scripting and c++ scripting which at first was alluring since the first coding language I learned was c++.

Unity, on the other hand, was also free and simple to use. Unity made it incredibly easy for a newer user to get started since the layout was much simpler. I also found that Unity had an extensive list of indie developers that used it (including Thomas Brush). I even found out that Hollow Knight was made in Unity. For scripting, they used C#, which is similar in some ways to c++ in terms of syntax. At first, this seemed like a deterrent for me, but I later found out that the scripting was actually pretty easy to pick up.

With both options on the table, I decided to go with Unity. Unity offered me a solution that was free with the power to build my menu quickly and easily. After picking the Game Engine, I was ready to begin development of my menu.

To get myself familiar with the Unity editor, I started by creating the layout for the main menu based on my window sketches. The goal: get all the components I needed on the screen and tweak the look of it (with all the lovely content we just made).

With components on the screen for me to play with, I was now able to dive deeper into the Unity buttons. I needed to test how the button class in Unity worked. The most important thing was for the buttons to enable and disable a menu at will. For example, If the player is on the Main Menu and presses “Options,” they need to be able to get to the next menu with the current menu disappearing. Luckily, Unity makes it easy to create a Menu Object that can be toggled on and off. I just needed to create a Menu Object for each menu I wanted my user to see and wire the buttons up.

Once I got the buttons transitioning between menu states, I started testing animations. These animations would play when a menu is opened or closed. The Idea was that if I open or close a menu, a short animation will play rather than the change being sudden. After toying with the animator’s state machine and setting up simple triggers, I was able to get the Animations working.

The end result of the experimentation? Check it out for yourself!

Video showcases state transitioning between menu layers using the Unity animator

In all of my experimentation with the Unity Animator for the Menu, I found one big issue. I couldn't play a button animation to its full extent before disabling said button. The logic I wanted was: play an animation on the button -> disable the current menu -> enable the next menu. I also ran into another issue at the same time. You can’t keep playing an animation on a button that is already disabled. With this, I knew that I needed a different way to transition between two menus.

I ended up doing research and found a process called inbetweening (tweening for short) which allows me to animate without using the Unity Animator. In simple terms, I can animate with code instead. Rather than disabling a menu, I could instead move the object off screen when it’s not being used. The logic would be revised to: play an animation on the button -> move the current menu out -> move the next menu in. To get this all to work properly, I had to use something called an IEnumerator. Treat this as a sort of delay without pausing the main game loop. For example I could use an IEnumerator to run pieces of code that should run after a certain amount of time. The logic is simple: Wait ‘x’ seconds -> Move Menu.

The next challenge that awaited me was allowing the Input of “Go Back” to work without actually pressing a button. What do I mean by this? Simply put, I wanted my menu to know what to do when a player presses a back button in a sub menu (when I press B, go back please). At first, I thought this part would be more difficult. Since I had already written functions to do everything that a button should do when pressed, all I needed to do was write a bit of extra code. This code would simply need to check if the player is on a sub menu and if they press B. If this is true, then go to the previous menu. If both are not true, then ignore it! Simple right? The only tricky part was making sure that the program knows information about what menu was previously active and what menu is currently active. If the program doesn't have this info, our back selection won't know what menu to go to and what buttons need to be active.

What does all this crazy code talk mean? Watch the quick video to see for yourself.

Video showcases the use of state transitions using tweening rather than the animator for menu layers.

Next up on the list of features I needed to develop for the menu, Bar sliders and Text sliders. Bar sliders were actually super simple to set up since Unity has a pre-built slider already. All I had to do was set up Sliders to function with my crazy “Go Back with B” code.

Text Sliders, on the other hand, were much more difficult because they are not something Unity has by default. To build them, I had to get creative. Think of the slider as a button. The button has 2 pieces: A Button Type string and the Button Content String. Whenever the button is pressed, we want to cycle through a list of strings and update the content string to be whatever our current string in the cycle is.

Another crazy code talk segment? Confused? Watch the quick video to see for yourself how it works.

Video showcases the menu after developing sound sliders, text sliders, and sub menus

The last bit of coding I needed to do was make sure that regardless of the screen size, the menu would move in and out to the right spot. The trick? Create a formula that works for 16:9 aspect ratios to dynamically move the windows in and out without having to set anything manually. By analysing the manual numbers I had to set for each 16:9 aspect ratio, I was able to find a pattern in how much I needed to move a menu up or down regardless of the Width and Height of the screen (given the screen is in a 16:9 aspect ratio).

The last piece to getting my menu polished was setting up background audio and sound effects to play when buttons are pressed. Getting the button sound effect to play was pretty tedious since I had already added all the buttons to the scene. Basically, I had to go to each button and add a function call to play a sound when a button is pressed and to play a sound when navigated to.

The menu sound was also relatively simple. Just add in an audio mixer and place the track in the mixer. Then use the audio mixer to set the master volume for the track. I also had to make sure to check the box that said: “repeat.” All in all, not too difficult for the last touch of polish for my menu.

Are you curious what the final product looks like? Check out the video below!

Video showcases the menu after adding in background music, adding in sfx, and expanding the sub menus

I’m quite satisfied with how the Rabbit Hole Menu turned out. I was really pleased by the positive reactions from the people I shared the menu with. The reactions I got were along the lines of “This menu makes me want to play whatever game is behind the new game button.” or “I love the menu! When will there be a game for me to play?” Looking back on it now, I never intended to make a game to go with the menu, but now I actually want to make the game that the menu represents. In the end, I learned so much about the challenges that are involved on the side of UI and menu design as well as the programming challenges associated with creating a menu. Thanks for sticking with me to the end!