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"));
   button = new TextButton("TEST BUTTON", skin, "default");

//Screen render function
public void render(float delta) {

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.


1 Answer 1


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(resourceLabel1).spaceRight(50); //Move next element 50px right


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.

  • \$\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 .