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

Add loading bar and update its progress by using update():

private void addActors() {
    table = new Table();
    table.setFillParent(true);

    loadingLabel = new Label("Loading...", skin);
    progressBar = new ProgressBar(0, 1, 0.01f, false, skin);
    progressBar.setValue(0);

    table.add(loadingLabel).expandX().padTop(50);
    table.row();
    table.add(progressBar).width(300).padTop(20);
    stage.addActor(table);
}

@Override
public void update() {
    super.update();
    progress += 0.05f; //progress should equal to resourceService.Progress(), but this is just an example.  
    System.out.println(progress);
    progressBar.setValue(progress);
        
}

Add background image by using draw():

@Override
public void draw(SpriteBatch batch) {
    batch = new SpriteBatch();
    batch.begin();
    batch.draw(backgroundTexture, 0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
    batch.end();
}

Set a color for a background:

Pixmap pixmap = new Pixmap(1, 1, Pixmap.Format.RGBA8888);
pixmap.setColor(Color.WHITE); // Set color to white
pixmap.fill();
// Create a Drawable from the Pixmap
Drawable backgroundDrawable = new TextureRegionDrawable(new TextureRegion(new Texture(pixmap)));
// Dispose of the Pixmap after creating the texture
pixmap.dispose();

table.setSize(1980, 1080);
table.setBackground(backgroundDrawable);