LibGDX Table UI for menu screens - part 2

Hello. Let's continue were we previously ended our last post. Now that we have our button images and style file its time to implement them in the code.

Let's create a MainMenuScreen class that implements the libGDX class Screen. In order to use the Table layout we need a Stage, Table, Skin and TextButton.

public class MainMenuScreen implements Screen {

    private Stage stage;    
    private Table table;
    private Skin menuSkin;
    private TextButton playButton;    
 /**
  * Main Screen Screen
  */
 public MainMenuScreen() {
     this.stage = new Stage();
     this.table = new Table();
     this.menuSkin = new Skin(Gdx.files.internal("skins/menuskin.json"), this.g.manager.get(""+Gdx.files.internal("mainmenu/menu.atlas"), TextureAtlas.class));
     this.playButton = new TextButton("PLAY", menuSkin);
     //table.debug() 
    }
}

The code above is pretty clear. In the MainMenuScreen constructor we create new instances of Stage and Table. We create our Skin file from .json file we created earlier and associate it with a TextureAtlas we created earlier. Lastly we create a new play button which has the text "PLAY" and that uses the previously created menuSkin. You can also create the button and its label separately and assign them after you do some changes to the label, if you have to.

To add the button I put the following code to the show method of the MainMenuScreen class:

// add the button
this.table.add(this.playButton);
this.table.setFillParent(true);
// add the table to the Stage
this.stage.addActor(this.table);
// listen Stage inputs
Gdx.input.setInputProcessor(stage);

You can also assign input listener to your button. For example in the following way:

     this.playButton.addListener(new ClickListener() {
         
            @Override
            public void clicked(InputEvent event, float x, float y) {
                // What happens when the button is clicked goes here
                              
            }
        });

To make the stage visible include the following code in the render method:

        stage.act();
        
        stage.draw();
        //Table.drawDebug(stage);

You might have noticed earlier the commented lines table.debug() and Table.drawDebug(stage). I recommend uncommenting these lines while you are creating your table layout. These lines enable the debug line of the table layout that allow you to better understand what kind of space each element occupies. It can tricky sometimes to get the elements quite right and that's why you should be familiar with the table page in the libGDX wiki.

Below you can see how the previously created button looks in my game, Rocket Sledge. Now granted, I did use a few more commands such as expand(), row(), size() etc. to size and position the button where I exactly wanted it but there it is. Using ImageButtons is quite similar to textbuttons. You have include your image in your TextureAtlas and define what image your button uses in the .json file.