Entry 02 - Bells & Whistles
My second post, on the lengths I went to for the sake of a nicer game UI.
As I stated in my last post, my first task for this week was to work on the game’s UI, starting with the game’s main menu. I have a lot of experience making simple menus for my other game projects in the past. All the ones I’ve made before were quite static: A simple background image, with buttons that you could only click, not highlight. I could’ve recycled one of my older menus, but I decided that I wanted to challenge myself and create a quality UI from the get-go, one that was vibrant and constantly in motion. I took note of the main menu I saw in Sonic CD, a game I played through recently, this was the kind of menu I wanted to emulate. I didn’t want the menu options to stay static either, I wanted to get them scrolling according to the player’s input. When I wasn’t precoccupied with other aspects of the project, this was my primary challenge this week.
Scrolling Menu Options - The Components
My main menu’s Scene View in Unity.
First I had to set out the layout of the buttons on the main menu, this is certainly not in its final stages, but the layout of the buttons is similar to what I had in mind. Currently there are four options on our main menu: “New Game”, “Load Game”, “Options” and “Quit”. As you can see in the above screenshot there are three additional empty boxes that the buttons could fit inside. These are potential “Button Positions”. Currently, there are seven potential button positions and four buttons. In my menu script I have assigned an index to both the positions (0-6) and the buttons themselves (0-3). As seen in the above screenshot, the first button “New Game” (index 0) appears at the fourth potential position (index 3).
Scrolling Menu Options - The Method
In my menu script, I had to work out how to scroll each button as the player pressed up or down. I decided to use for loops to achieve my goal, creating an array for the button positions as well as an array for the buttons themselves. Once I had all the necessary variables set up in my script, I started to implement what would occur if the user pressed the down arrow on their keyboard. I envisioned a simple for loop that would iterate through each button and shift its position to the position directly above it. It was a simple enough concept, but one that had me run into a lot of “IndexOutOfRangeExceptions” as I tried to figure out the perfect way to cycle between these menu options.
I couldn’t wrap my head around the cause of my for loop going out range if I pressed DOWN more than twice. I had to get my pen and paper out and go through each loop. Eventually, I found the problem and was able to correct it in code easily.
Eventually, I managed to make my scrolling method air-tight. The for loop iterates through each button position, nothing happens until the first button is reached. I determined this by calculating the “firstButtonPositionIndex” variable, which is calculated as the difference in number between the positions and the buttons (7 positions - 4 buttons = 3). In the loop, once i is at this index (3) button positions start getting shifted, since position 3 is where our first button, “New Game”, is situated. We then use our “buttonIndex” counter to determine which button we need to move next. We also increase the count of how many times the player has pressed the down key, if they press it more than three times (three being our firstButtonPositionIndex), nothing happens, since each button can only be moved to three other positions at max. Once I confirmed that this method was working, I simply had to reverse it in order for the user to be able to move up through the menu too. My “NavigateDownMain” method can be seen in full below.
My method for scrolling downward through the game’s menu. The upward method is simply an inverse of this one.
After I confirmed that I could scroll through the menu options the way I intended. I then worked on getting each menu option to move to each new position naturally, instead of just teleporting to them. Eventually, after researching it on the web, I managed to implement a coroutine that makes each button lerp to their new location, giving the scrolling a much “smoother” look. I’m quite happy with the results so far.
A sample of the scrolling menu options, better seen in motion, each button moves up or down depending on player input, the highlighted button will be selected if the user presses the Enter key.
What’s Next?
I spent a lot of time on the menu this past week, due to a number of factors I didn’t get as much done as I wanted to have done by this point. The most difficult part of it is through however. I’ll be out of town this next week from Monday (22nd) to Wednesday (24th) so this will impact my velocity, though I intend to make up for this missed time on the coming weekend and possibly the one following that. Regardless, my plan for next week is to finish out the main menu and get started on implementing the functionality for the game’s collectibles. After that, it’s on to something new for me: Saving and Loading. Wish me luck!
‘Til next time.
