LibGdx - Dialog Boxes

pipplo

— 2 min read

I wanted to add a tutorial mode to Word Hive because I noticed some aspects of the game weren’t very obvious. There were some frustrating aspects of adding dialog boxes so I wanted to share some of my solutions.

As always the documentation pages are very great resources

Here is an example screenshot from the game:

Screenshot_2014-02-08-17-14-07

 

Showing a dialog box is relatively simple. Here’s a copy of the example code from the UITest examples.

new Dialog("Some Dialog", skin, "dialog") {
    protected void result (Object object) {
        System.out.println("Chosen: " + object);
    }
}.text("Are you enjoying this demo?").button("Yes", true).button("No", false).key(Keys.ENTER, true)
    .key(Keys.ESCAPE, false).show(stage);

Whenever a button is pushed in the dialog, the result() function defined here will be called with a specified Object. This can be a custom return value from the dialog, in the example true and false are used for Yes and No options.

You need to have a valid skin setup for the dialog for this to work. I just started with a default one and tweaked. Looks into more details on Skins

Dialogs do have some unexpected behaviors though. By default the text sent via .text() is not wrapped! So if you send a long string you end up with something like this, where the text is overflowing the button! It is a little frustrating that this is the default behavior..

Screenshot_2014-02-08-17-45-11

In order to get a dialog with wrapped text you have to forgo the utility methods of .text() and .button() etc.  The Dialog class gives you direct access the content table which you can add your own actors to.

A wrapped Label itself requires two things

  • Calling .setWrap(true) on your label
  • Putting the label in a parent with a fixed width

So you need to create a Label, give the Dialog table a fixed width, and then add the Label. After that you have to call some set of invalidate and layout on the elements.

Here is some sample code that works in my game, I don’t think all of the code here is necessary, but I haven’t had a chance to go remove everything un-needed.

Label label = new Label("Tap tiles to build a word and then press the blue button to play the word", stage.uiSkin);
label.setWrap(true);
label.setFontScale(.8f);
label.setAlignment(Align.center);

Dialog dialog = 
new Dialog("", stage.uiSkin, "dialog") {
    protected void result (Object object) {
            System.out.println("Chosen: " + object);
    }
};

dialog.padTop(50).padBottom(50);
dialog.getContentTable().add(label).width(850).row();
dialog.getButtonTable().padTop(50);

TextButton dbutton = new TextButton("Yes", stage.uiSkin, "dialog");
dialog.button(dbutton, true);

dbutton = new TextButton("No", stage.uiSkin, "dialog");
dialog.button(dbutton, false);
dialog.key(Keys.ENTER, true).key(Keys.ESCAPE, false);
dialog.invalidateHierarchy();
dialog.invalidate();
dialog.layout();
dialog.show(stage);

Read more