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

• General Design Principles - Helps the aesthetics of the team to be consistent
• 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.

General Design Principles

• Design Style - Detailed pixels, which have a black outline. This is to increase usability for those with colour blindness and also is consistent with the design style.

UI Graphics

Shop button

The shop button had many iterations and this is not its final draft as user feedback from the studio team said that looked like a lock and could be confusing. Home Screen Button

Gold was chosen as it's bright so the user's eye would be immediately drawn to it, and want to start the game.

Building Button (Could be used for adding buildings to the map)

The setting's On and Off Button

These two buttons would be toggles of themselves, once clicked it will swap to the other button, clearly showing on and off.

Atlantis Sinks Logo for Start Page

UImplementing the Graphics

To implement the graphics for the main menu, main game and setting screens an atlas was developed to implement the skins for the buttons. By implementing an atlas, we can avoid implementing the picture for each button and avoid repeated and redundant code. From this atlas, we used a JSON file to find the coordinates of the pictures, and import them into each button using skins, as seen below.

insert atlas

insert JSON file

Insert code for button implement.

Testing and Validation

User testing was conducted in three stages.

One: When the buttons were created This user testing was used to determine colours, size and general look.

Two: When the button was implemented onto the page This user testing was to determine if the layout of the page was ideal and did

Three: When the buttons were fully linked and the goals of the sprint were completed. This is the last user testing to ensure that the navigation of the screen and the ensure that it is intuitive to find all pages. (First Click Testing)

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();
  }
}