[libgdx] day 6 – user interface

Today we want to create as an addition to the splashscreen a cool menu for our app. Every menu does have to look somehow. In libgdx this is called skin. For the beginning we use a default skin. Therefore we unpack the five files from this zip-file into a subfolder ui in the assets-folder. On another day we’ll learn how to create our own skin, but for today we have to life with this. Loading our skin is really easy:

Skin skin;
skin = new Skin( Gdx.files.internal( "ui/defaultskin.json" ));

Every element on our user interface is an actor. So we simply need to add it to our stage.

TextButton button=new TextButton("pointless button", skin);
button.setPosition(350,200);
stage.addActor(button);

Our UI shall as well react to the input of the user (e.g. if he clicks a button). Just set the stage as the InputProcessor.

Gdx.input.setInputProcessor(stage);

If we want something to happen, if our button is clicked, we just add a ClickListener. (and yes, as every UI-element is an actor, we can perform the fancy actions on it)

button.addListener(new ClickListener(){
 @Override
 public void clicked(InputEvent event, float x, float y) {
  button.addAction(Actions.fadeOut(0.7f));
 }
});

We could now build our menu screen by setting the positions of the buttons one by one. But if we have changing resolutions that might get messy. So a layoutmanager can make our life easier.

libgdx has a layout-library called TableLayout integrated, which is really easy to use.

Table table=new Table();
table.setSize(800,480);

TextButton startGame=new TextButton("start game",skin);
table.add(startGame).width(200).height(50);
table.row();

TextButton options=new TextButton("options",skin);
table.add(options).width(150).padTop(10).padBottom(3);
table.row();

TextButton credits=new TextButton("credits",skin);
table.add(credits).width(150);
table.row();

TextButton quit=new TextButton("quit",skin);
table.add(quit).width(100).padTop(10);

stage.addActor(table);

Everything important explains it self. When calling .add() or .row() you get a Cell object back to perform the methods to change with,height or padding on this cell.

There are many more elements that you can add to your user interface:

TextField text=new TextField("",skin);
// [...]
String value=text.getText();

CheckBox box=new CheckBox("done",skin);
// [...]
boolean checked=box.isChecked();

String[] items={"cool","mega","awesome"};
SelectBox selectbox=new SelectBox(items, skin);
// [...]  
String selection=selectbox.getSelection();

Your task is to create an option menu like this one and maybe add switching between the main menu and the options screen.

The tutorial for today was rather short as most of the stuff is self-explainable. (if you though got questions, write them in the comments!). tomorrow we will deal with packing many textures into one big.