UI

Introduction

There are expected to be several UI displays in the game, e.g. main menu, player stats, level text, pop-up menus, etc. The game engine makes use of libgdx's Scene2D class to render UI elements such as images and text to the screen.

Key Components

• Renderer - Creates the stage, a canvas for UI elements (actors): Renderer.
• Render Service - Provides global access to the stage: RenderService.
• UI Components - Components containing actors to render onto the stage: extend UIComponent.

Usage

Create a UI entity and add UI Components to it (entities can have multiple UI components as long as there's only one of each type):

Entity UI = new Entity();
UI.addComponent(new GameAreaDisplay("Box Forest"));

The UI component should extend UIComponent:

public class UIDisplay extends UIComponent {
  private Label label;

  @Override
  public void create() {
    super.create();
    addActors();
  }

Create actors and add them to the stage in create(). Anything that isn't automatically rendered by the stage should be added to draw().

• Example without using libgdx Table:

  private void addActors() {
    label = new Label("Hello World", skin);
    label.setFontScale(2f);
    stage.addActor(title);
  }

  @Override
  public void draw(SpriteBatch batch)  {
    // change position in case of window resize
    int screenHeight = Gdx.graphics.getHeight();
    float offsetX = 10f;
    float offsetY = 30f;
    label.setPosition(offsetX, screenHeight - offsetY);
  }

• Example with libgdx Table:

private void addActors() {
    // Create table
    table = new Table();
    table.top().left();
    table.setFillParent(true);
    table.padTop(30f).padLeft(10f);
    
    // Add an image
    label = new Label("Hello World", skin);
    label.setFontScale(2f);

    table.add(label).pad(5);
    stage.addActor(table);
  }

  @Override
  public void draw(SpriteBatch batch)  {
    // changing position on window resizing is handled by the stage
  }

Remove actors from the stage in dispose():

  @Override
  public void dispose() {
    super.dispose();
    title.remove();
  }
}

Design and iteration

Commit to main: https://github.com/UQdeco2800/2021-studio-1/commit/27e01d1581025e249123d9821fce9b71adf8cb96 Commit to main: https://github.com/UQdeco2800/2021-studio-1/commit/df74d61210e0c531c07508d418126121af7e2186

Start/Main Menu

As described in an article written by Jhaan Elker of the Washington Post, the title screens of video games are an artform, with their design forming the first impression that players get of the gaming experience. This is why it is so important to have an impactful start menu.

Feature's to be included in an effective start screen/main menu: *Clean, polished main title of the game, that is centralised and can be in the dead centre of the screen or raised up higher. *Can have a character or location assets that fits the theme next to the main title if it increases the aesthetics of the main menu. *Background that relates to or directly foreshadows what the background will look like when playing the runner. Must very visually. pleasing to entice users and get them excited to play, hence why dynamic features may be useful here as well. *Start button, ideally dynamic with some sort of pulsing animation that looks much more 'pixelly' than the main title, centred below main title, possibly with a box surrounding it.

These points resulted in the following wireframe design for a start menu:

And the following wireframe for the main menu:

Creative influences for design

The first creative influence example is The Last of Us, a game set in post-apocalyptic America, with dark and evil themes. While it is a much more high quality game in regards to graphical performance, it keeps the themes for its menu's very simple and symbolic. This creates a feeling of intrigue and mystery for the players that draws them in an makes them want to experience what the game has to offer.

The second creative influence example is Pixel car racer, set in Japan or America and sees the player build, tune and race their own cars to win races for cash. Pixel racer, as it says in the name, has a pixelate aesthetic design, making it a great influence for Ragnarök racer as it is also going to be using the pixelate theme. On top of this, pixel racer also keeps their design choices simple on the start and main menus, with enough relevant detail to get the player excited.

Feedback for design

Upon discussion with team 3 about the presented wireframes above, some changes were suggested. It was established that the start screen could be difficult to implement, and as a bare minimum would likely be too difficult to implement for sprint 1. As a result, it was suggested to propose to the studio to decide if it should be implemented at a later date. As well as this, it was decided that a dynamic start screen and/or main menu would be much more effective than a static version, and should be iterated on and established next sprint. Finally, some more assets were suggested to be created such as a colosseum and snowy mountains to fit the theme of the game.

First Iteration Summary

After the most recent studio, it was decided that it would be the best decision to only implement a main menu design into Ragnarok Racer. As a result, with the creative influences and design feedback mentioned above taken into account, an initial iteration of the main menu design was created as seen below: The design was then given to the team to implement as the menu for the game in the first sprint. The design, as well as all the individually created assets themselves are to also be proposed to team 3 as well as the studio for further feedback and iteration, such as creating assets so that the menu may be dynamic by sprint 2 or 3.

Second Iteration Summary

At the beginning of sprint 3, focus for design had shifted to backgrounds for the levels, but there was some delay in teams communicating which themes were being developed by which team. In the meantime, there were some smaller issues with the main menu, such as: some white showing on the edges of the colosseum design; mountain range being disproportionately sized; and no shading at all. As a result, as second iteration of the main menu was proposed (as seen below) that fixes these smaller issues and creates a better main menu background that suits the theme of the game better and looks more polished.

Pause Menu

The pause menu is an important feature of the game which allows players to be flexible for their time. The design and arrangement enhance the experience of players as well as the UI design of the games.

The design for the pause screen is shown above. Core features such as RESUME, SETTING, RETURN TO MENU are considered as the options button on the screen. The arrangement of the button enhance the usability and design of the game pause screen since it gives a classic view to the screen. A fixed colour background which suit the game design and concept would be aesthetically pleasant to players.

This shows the feature mode within the setting options. Sound adjustment, difficulty selection, volume adjustment are the key display in the setting options. Further advanced adjustments such as resolution, character class, etc can be added if it is suitable to the game. Volume adjustment could be illustrated as a horizontal slide bar or a number to represent. However, horizontal slide bar is more suitable to the game since it is easier and less time-consuming for players to adjust the volume.

The picture shows the one of the design of the button. Colour theme of blue and white with a glassy effect creates a bright view. Red words in the middle will increase the readability since it contrasts to the button colour.

This design enhances the readability of the button as the words are in red with a darker theme button (glassy red). Moreover, this design would fit in the thrilling game theme compared to the previous one (Happy theme).