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.


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
    Jan 4 at 23:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.