* GIF made using Ezgif.com *
Menus can often be overshadowed in comparison to the graphics or gameplay. They in-turn enhance the overall feel of the entire experience! When done right, it can quickly communicate crucial information to the player. In this post, I will be walking you through the development of our Main Menu.
Version 0: Prototyping
Like in industry, Programmers are asked to design and create functionality to something that does not exist yet. The art seen in the end-product will come eventually, but until then it is prudent to use stand-ins or unofficial assets while I wait.
Based off examples of menus that others had made, I came to use a central-aligned scheme to present our information. Most Main Menus I saw included a settings page to adjust game features before playing. As a team, we determined that our Settings, if any, would reside in the Pause Menu instead.
Version 1: First Official Logo
With our first art asset included, I cleaned out the assets that were no longer needed. Reorganizing the overall design to incorporate the new logo!!! This logo highlights elements of fish and water that are main themes to our game. At this point, the menu remained in central alignment and would continue to do so for the next version.
Version 2: Menu of 3, Becomes 4
After one of our End of Sprint Reviews, it was suggested that we include a Controls section to our Main Menu. Including this feature allows the player to preview how to interact with our game beforehand. Familiarizing themselves with our controls scheme can streamline the transition into our game and its gameplay. Of course, players can choose to skip this option and learn how to play as the game progresses.
Version 3: New Look, New Logo
With this version, Bailey had designed the look and feel of our Main Menu. This required reworking the entire menu to support the new layout. The buttons were shifted right to maximize screen coverage for our logo. Speaking of the logo, its text was redesigned for clarity. Keeping with the general feel of the previous design; it included a cute, fish-finger creature reminiscent of the old point and click flash games era.
Version 4: Menu Design (as of Dec. 14th 2022)
What you see here is the version of our menu that was prepared for the fall SGX_22. I brought the Main Menu to life with keyboard, controller, and mouse interactions. Each option allows the player to choose how they want to manipulate the menu. Depending on which input they have, mouse/keyboard or controller, allows for ease of access when navigating to the destination or information they desire.
Note: While Version 3’s logo was scrapped for the Main Menu, it can still be found on our Itch.io Page: https://fishingguild.itch.io/divining-rods
Closing Thoughts:
When I was first asked to take on the task of Menu development, I thought “This will be straightforward.” There was the Main and Pause Menus to think about for our game that would need to be built. While I was set to do both… It turned out to be quite a pile of fish to accomplish on my own. Thus, the responsibility was split into two areas with one person working on each menu type.
Looking back at this process, I have come to realize the amount of time that was spent properly spacing and aligning images with buttons or text. A necessary process for sure but could have been more efficiently executed. Time was saved later with the inclusion of our official UI design and button layout that persisted from version 3 onward. Allowing for a greater amount of functionality implementation for interacting with our menus.
Bonus Content:
For those who made it to the end of the post, check out our most current version of the Main Menu. Here we are going for a more engraved look with our buttons. A key difference to this version is that it includes a Settings section. It is likely this is an abbreviation for Controls Settings, so we shall see if this is the case.
Comment below if you have any thoughts on this version of the menu!!! Please keep in mind this is not the final version of our menu and many features will be updated.
- Abigail Smith, UI/UX Programming Lead
From the Divining Rods Dev Team!!!