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.

Button

Shop button

Home Screen Button

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

The setting's On and Off Button

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