Improved Settings Esc Menu Interface - UQdeco2800/2022-studio-3 GitHub Wiki

Overview

The first thing a player sees in any game is a menu. This “face” of a game is what gives him the opportunity to feel the atmosphere of a game from the very first seconds. That is why developers carefully think over the main menu interface.

It can either be as simple as messing with the general settings like _Audio _or _Video _to make the gun run smoother or as per you desire.

Generally speaking, it should be something that is very user friendly, easy to understand and navigate through while looking aesthetically pleasing.

In Atlantis Sinks, the game being fairly simple, there's a few things to consider in terms of the settings menu while keeping the gameplay in mind.

The CogWheel Menu is expected with a unique GUI on the top-left of the screen right under the Spell Deployment Interface, and consists of a cogwheel which is highlighted upon hovering/selecting.

• Cogwheel should be easily visible/located.

• Cogwheel should be interactable.

• Is it obvious you are selecting the settings/cogwheel to display a menu.

• Can you control the menu with the mouse? It makes it more user friendly.

• Does the back button only go back one menu option? When navigating submenus, using the back button should return to the previous menu, rather than cascade back to the main menu.

• Does the settings options do what they are supposed to do

• Does the game support multiple resolutions in game? system to resize the scale of the game, like doubling the pixels or displaying in its original size. and different aspect ratios like 16:9, 16:10, 4:3 or 5:4.

• Can you switch between full screen, windowed and borderless?

Feature

GUI

Here's the initial look of the interface that the game used to have. Similar to the previous base game, Box-Boy, the UI was very ugly, janky and not clean which did not match the color scheme or suit the theme of this game. The two buttons on the top right were still from the previous game. were uneven and kind of redundant. The 'Exit' and 'Pause' Button did not make sense to be there and especially no the same size. The exit button is pointless to have, as it just instantly takes you out of the game completely. The pause button doesnt really pause the game as it just pops up the menu.

This is how the Menu Looks like when the pause button is pressed. The ugly blank/black box with 4 menu options following the same old button style. The Box just looks very unpleasing and blocking content. The 4 options seen are pretty self explanatory what they do. Resume puts you back into the game, exit to main menu returns you to the main menu, Settings takes you to the game settings and exit game exits you to the desktop or out the game. The options are clustered in the middle, are not spaced enough.

This is what the option used to look like when the settings button/option was pressed. Keep in mind, there was no indicator you were pressing this button as there was no sound to let the user know/feedback or clear indicator.

This is the game settings menu, it gives a few different options like FPS cap, Fullscreen toggle, V-Sync Toggle, Different resolutions support, and UI Scale. But with the bright yellow background, the white text showing these options are not clear enough for all the users. Nonetheless, it doesn't match any of the theme or colors. There are two options to click, 'apply' and 'exit'. The apply button is to be clicked when a setting is changed. The exit button takes you out the game fully, which doesnt make sense it should be a back button.

Designs

This is the design for a Cogwheel. The two images above show a default cogwheel and a cogwheel which is highlighted upon selection or hover. These designs were previously showcased in Sprint 3, however were never implemented. Now, they are more refined and resized to fit perfectly in the games UI. The cogwheel will act as a replacement of the older 2 button on the top right of the screen (exit and pause). This cogwheel will display a menu like the old pause button used to. This cogwheels design was inspired by the games theme of Atlantis by following the color scheme. If you take closer look at the cogwheel, it is a mixture of a wooden pirate wheel but as a settings cogwheel. The color scheme represented is similar to the borders used in information box, spells GUI etc.

Above shows the basic UI background of what is to be appeared when the Cogwheel is clicked/selected. This is to replace the previously known black box. Now the background follows the theme of oceans and Atlantis with a border to clearly differentiate it from the game. This new design will then have options just like before but with buttons shown in sprint 3, following the same wooden texture like pirate style. The image on the right shows the cogwheel menu in action with all the buttons. The 4 buttons work similarly to the previous ones but are rename to make more sense. Moreover. These buttons will also highlight indicating the user that you are hovering over it/about to select.

This is a design UI which will replace the settings menu. Again, following the same theme and colors.

Final Menu UI

This is how the new settings menu now looks, all the options are now clearly visible, looks aesthetically pleasing and much more user friendly. The Exit and Apply buttons are now changes to back and apply and follow the new design patterns. A box is shown with a darker color following the wood texture to clearly make the text visible. This screenshot shows, the cogwheel actually implemented in the game. It is now below the spell UI. Clearly visible in all environments. The cogwheel implementation has now selected, showing how its highlighted and the new menu is now popped up.
The highlighted button indicates the user is hovering over that particular option or has selected it.

This is how we made the Menu UI Change. ``