Collection: Shane Gavin - ICA Portfolio Semester 2

Menus and UI

Menus and UI in All the Way Down

The following menus and menu features have been implemented by Shane for All the Way Down: 

  • Main Menu which launches on game start. Options for World Tour, Free Ride, *Customise (bike), Options, Credits, and Quit.
  • Stage Select Menu with 2 stages selectable (Stage IE launches the developed level, Stage GB is locked out). When stage buttons are hovered over, the menu background is updated with an image attached to the location / setting. The stage name and difficulty level are also displayed. Both the World Tour and Free Ride buttons in the main menu launch this screen. 
  • Credits Menu with scroll pane. Features developer information, and (to satisfy terms of use) music credits for the game.
  • Options Menu where users can set their preferred overall volume, music volume, and sound effect volume. User can also set quality settings for Shadows, Textures and Screen Resolution. Finally, users can customise their leader board name. All setting are saved and reloaded between play sessions.
  • Leader Board screen which shows leader board entries retrieved from an online service.
  • An In-Game Menu which is displayed on game pause (ESC key) with options to Resume, Quit (back to main menu), and Restart the current level. 


The following UI/HUD elements have been implemented by Shane for All the Way Down: 

  • Full-width HUD bar which displays the game logo, current race time, and split time notifications. When a split time is triggered, animation sequences temporarily change the colour of this bar (green for an improved time, otherwise red), and display the split time differences in fly-in/out sequences. 
  • End game message which is animated into place when the player reaches the end enclosure. This displays a message to congratulate the player on besting a previous time, or otherwise commiserate them on their complete and utter failure. 


*Ronan and Michael have developed the bike customisation menu screen.

Menus and UI (Video)

Main Menu

The Main Menu is the entry point for the game, and provides links to all other primary menu screens. These menus are contained within their own distinct scene (level) within Unreal, and are constructed using the Unreal Motion Graphics (UMG) tool (see below for more).

Putting menus within their own scene allows for fast loading of the menus, and makes it possible to play background music which persists while you move through menu screens (the audio's life is tied to the scene, not any individual menu screen).

All menu buttons change their textures on hover and on click. Menus have been constructed to scale to any resolution. 

Stage Select Menu

The Stage Select menu can be launched from the World Tour and Free Ride buttons in the main menu. This scene presents a list of available levels, their stage name and difficulty rating. 

When a user hovers over a stage, the background of this menu screen changes to show an image which is representative of the stage (a forest trail for Stage Ireland, etc.) This functionality required custom logic within the UMG graph as not all hover states are available in the pre-bundled events. 

This screen also provides a link to the leader-board screen. 

Options Menu

The Options Menu allows users to customise volume levels in 3 categories (master, music, and effects); to set shadow quality, texture quality, and game resolution, and to customise their leader board name.

Shadow and Texture settings can be used to by players to sacrifice some quality for performance. Settings available correspond to those core to the Unreal 4 engine (low, medium, high, epic). For Shadow quality, the low setting disables all dynamic shadows.

All of these settings are saved to disk when changed, and will be reloaded when the game is launched (see the Misc. Tasks section for further details).

In-Game Menu

The In-Game menu is activated with the ESC key. Pressing this key will pause the game and show the in-game menu. This menu provides options to Resume the game, Restart the level, and to Quit the level (returns to Main Menu). As part of this menu's development, a system was put in place to pause and restart the game timer. 

As can be seen in the screen shot above, this menu only covers a portion of the screen and the paused game can still be seen in the background. 

Level restarting is handled in the same way level loading is in the Stage Selection Menu: a call is made to Unreal's built-in load level functionality. 

In-Game HUD

The In-Game HUD is used to display a player's current race time, split time stamps and split time differences. The game logo and colours are used to add branding to each level. 

The HUD features UMG animations which are used to linearly interpolate colours and transformations. When a split time is triggered, the background colour of the HUD bar changes to either red or green to indicate the player's split time performance. At the same time, the player's split time difference (as text) also flies into place on the bar. 

This implementation is also used to animate in an end message which is displayed to the player when they reach the end enclosure, and indicates whether or not the player has beaten their personal best time. 

Other Menu Screens / UI Elements

A menu screen has also been implemented for game credits. This features a scroll pane containing names and specialities for the development team. This menu also displays information about music tracks used in the game, and provides links to label and artist websites (a requirement of their usage rights).

Additionally, a menu screen has been developed to display leader board entries. The event graph behind this screen sends a restful request to an on-line service which returns a string containing multiple lines (one entry per line) and delimited values for player names and times. These are then processed and inserted into a scroll box. While the on-line service is being polled, a circular throbber (recognisable, spinning, loading graphic) is displayed to indicate that data is loading. 

Pre-development Process

The first stage of the menu implementation process was to produce mock-up images for the team to approve.

Last semester, a visual style for graphics (menus, slides, etc.) was developed to reflect the low-poly look we were intending for the game at the time. As the overall effect sought has been changed to a more realistic aesthetic, those graphics were not going to be reusable this semester. For this reason, it was important to complete the initial mock-ups early, to get approval for a new look from the team, so that I would be able to proceed with the menu implementation.

I also felt it was important to develop the new visual identity early on, to ensure we presented a consistent brand throughout the semester (from POC through to Beta).

The game logo from last semester was re-used as this did not conflict with the new look. I then obtained several royalty-free stock images, and proceeded to develop concepts using GIMP and Inkscape. When I had a look I was happy with, I presented the below images to the team with the caveat that exact duplication in UE might not be possible.

Once the images were approved, I then broke up the mock-ups into modular components which could be used in UMG's layout editor.



Relevant Journal Entries:
 

Unreal Motion Graphics (UMG)

Menus in the Unreal Engine are created with the Unreal Motion Graphics (UMG) Tool which was added to the editor in version 4.5 (released ~Oct 2014). As a quite recent addition to the engine, tutorials on the tool's workflow are scarce, but this is offset by a small number very detailed video tutorials and excellent UE4 documentation pages.

Menus, and all other on-screen UI graphics in Unreal 4 are referred to as widgets. Widget creation is broken down into two sub-system: the UMG Designer which is used to lay out the visuals of a widget, and the UMG Event Graph which is a BluePrint specialisation for driving widget behaviours.

The designer view allows the use of anchor points to define the bounds of all items, which makes it extremely easy to create menus which scale and skew without breaking. These anchor points allow you to position and size elements based on percentages of displayed screen dimensions. 

A wide range of pre-defined widgets are available for nesting: buttons, scroll boxes, sliders etc. Coming from a web design background, I found UMG's workflow to be very intuitive and easy to use.

A full overview of the menus for POC, and explanation of all functionality, can be seen in the video at the top of this page:


Relevant Journal Entries:
 

Tutorials and References

The following tutorials and documentation were followed in the early stages of development. Once I understood the basic work-flow, all further development relied on investigation of the available APIs and tools within the development environment. 

The following stock images were used. FreeImages.com (formerly sxc.hu) is a fantastic repository of royalty-free (and financially-free) high-quality stock photography which I've used for all my budget  stock photo needs for nearly a decade. Highly recommended.

The following tools were used to create the graphics for All the Way Down's menus and UI element: