0
\$\begingroup\$

I am developing my first LibGdx game, and I would like some help understanding Scene2D/Ui.

So far I understand a "Stage" contains the various UI elements, and a "Table" contains the layout; an input processor can be assigned to buttons and stuff to define what they will do.

What I don't really understand clearly so far is how to utilise tables and skins, and if I'm doing this correctly.

So far I have a MainGameScreen class which extends Screen, and renders a Tiled map.

I want to render the UI on top of it, I have defined a Stage, a Table and a Skin, as well as a button; here are my relevant code snippets.

//declaration of stage, table, skin
public class MainGameScreen implements Screen, InputProcessor{
    ...
    private Stage stage;
    private Table table;
    private Skin skin;
}

//class constructor
public MainGameScreen(final MyGame game){
   ...
   stage = new Stage(new ScreenViewport());
   table = new Table();
   skin = new Skin(Gdx.files.internal("uiskin.json"));
   table.setFillParent(true);
   stage.addActor(table);
   button = new TextButton("TEST BUTTON", skin, "default");
   button.setWidth(200);
   button.setHeight(50);
   stage.addActor(button);

//Screen render function
public void render(float delta) {
    ...
    stage.act(Gdx.graphics.getDeltaTime());
    stage.draw();
}

It works, the Tiled map gets rendered, a button appears on the bottom left.

Now, please take a look at this Warcraft 2 screenshot: http://en.war2.ru/wp-content/uploads/2015/03/screenshot-14.png

I'd like to implement a top bar similiar to that, meaning "Menu" "Pause" buttons as well as rendering an icon + value for each resource (variable) at the top of the screen.

I understand that I'd have to use the Image widget for the icons, Label for text and Button for Menu and Pause, but I don't get how to lay them out properly using a Table and ensuring scaling.

I'd be grateful if someone could provide a simple implementation, or point me on the right direction.

\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

To just create the top bar I would do something like this:

Image resourceImage1 = ...;
Label resourceLabel1 = ...;
...

Table table = new Table();

//Display at the top and occupy a 10th of the screen height
table.setBounds(0, screenHeight * .9, screenWidth, screenHeight *.1); 
table.defaults().padRight(10); // All cells have a padding of 10px to the right

table.add(resourceImage1);
table.add(resourceLabel1).spaceRight(50); //Move next element 50px right
table.add(resourceImage2);
table.add(resourceLabel2).spaceRight(50);
...

stage.addActor(table);

This will align all of the above elements in a single row with some space in between them. If you need to create another row use table.row();. For a quick rundown of using the table take a look at the LibGdx wiki entry on them.

As for your concern on scaling take a closer look at Viewports. I see you're already using a ScreenViewport which does not support a constant size. Perhaps a FitViewport would be more suitable for you as it keeps the aspect ratio.

\$\endgroup\$
1
  • \$\begingroup\$ If you have a camera which follows a player around, you will need a separate camera for the TopBar (HUD) \$\endgroup\$
    – DataMania
    Commented Jan 4, 2021 at 23:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .