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.