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

Dialogue box:

A global dialogue box is now available, currently in the AtlantisGameArea class. This dialogue box is final, however it is somewhat mutable, including:

• title
• text
• image
• visibility

Text updating still needs fixing, as currently although the text is updated, the renderer is not made aware of these changes.

Mutability:

dialogueBox.hide();
/* trigger event */
dialogueBox.setText("new text");
dialogueBox.setTitle("new title");
dialogueBox.setImage(new Image(...));
dialogueBox.show();

The dialogue box can be dismissed via the top-left dismiss button, which currently states "EXIT", but will be changed in the near future.

Pause menu:

• Create a Pause Menu

 private void addActors() {
    pauseWindow = new Table();
    background = new Image(ServiceLocator.getResourceService().getAsset(BACKGROUND_FILE_PATH, Texture.class));
    createMainTable();
    pauseWindow.add(mainTable);


   pauseWindow.padTop(0);
   pauseWindow.padBottom(0);
   pauseWindow.setVisible(false);
   background.setVisible(false);
   setPauseMenuSize();

   stage.addActor(background);
   stage.addActor(pauseWindow);

   entity.getEvents().addListener("togglepm", this::togglePauseScreen);
  }

• Now we need a function to turn the pause menu on and off

  public void togglePauseScreen() {
      GameTime timeSource = ServiceLocator.getTimeSource();

      if (!pmEnabled) {
          timeSource.paused();
          pauseWindow.setVisible(true);
          background.setVisible(true);
          pmEnabled = true;
      } else {
          timeSource.unpaused();
          pauseWindow.setVisible(false);
          background.setVisible(false);
          pmEnabled = false;
      }
    }

• Then simply assign the function to an event

entity.getEvents().addListener("togglepm", this::togglePauseScreen);

• To trigger the event, use

entity.getEvents().trigger("togglepm");

UML Diagrams

Dialogue Box

Pause Menu