UI API for libgdx

Question

Android and libgdx noob here.

Does anyone know anything about the recent UI API that was released for libgdx? See blog post here: http://www.badlogicgames.com/wordpress/?p=2058

I am looking to create a basic menu system, and I was wondering if this UI API would make it easier.

Answer 1

Updated to reflect changes to the LibGDX

I am in a similar position, the following code worked for me to create a basic menu (A container of buttons). The code won't work as is, because it uses some of my classes, but what really matter is the content of the create method. This creates a centered title, then some buttons in a container that gets centered, then fps label in the lower left and an image in the lower right corner. The theme files and some of the images are from the LibGDX tests assets.

I've gotten this to work with the JOGL, LWJGL, and android application classes. I've run it on a Droid 2 and got it to run as it did on my desktop. Hopefully this should get you started.

public class MenuScreen extends Screen{
private Stage ui;
private Table window;
@Override
public void create(final Game game) {
    super.create(game);
    TextureRegion image = new TextureRegion(new Texture(Gdx.files.internal(Art.badlogicSmall)));
    Label fps = new Label("fps: ", Art.sSkin.getStyle(LabelStyle.class),"fps");
    ui = new Stage(Gdx.graphics.getWidth(),Gdx.graphics.getHeight(), true);
    Gdx.input.setInputProcessor(ui);
    window = new Table("window");
    window.width = ui.width();
    window.height = ui.height();
    window.x = 0;
    window.y = 0;
    window.debug();
    Label title = new Label("Title",Art.sSkin.getStyle(LabelStyle.class),"title");
    Button newGame = new Button("New Game",Art.sSkin.getStyle(ButtonStyle.class),"new");
    newGame.setClickListener(new ClickListener() {
        @Override
        public void click(Actor actor) {
            game.setScreen(GameScreen.class);               
        }
    });
    Button optionMenu = new Button("Option",Art.sSkin.getStyle(ButtonStyle.class),"Options");
    Button helpMenu = new Button("Help",Art.sSkin.getStyle(ButtonStyle.class),"Help");
    Image libgdx = new Image("libgdx", image);
    window.row().fill(false,false).expand(true,false).padTop(50).padBottom(50);
    window.add(title);
    Table container = new Table("menu");
    container.row().fill(true, true).expand(true, true).pad(10, 0, 10, 0);
    container.add(newGame);
    container.row().fill(true, true).expand(true, true).pad(10, 0, 10, 0);
    container.add(optionMenu);
    container.row().fill(true, true).expand(true, true).pad(10, 0, 10, 0);
    container.add(helpMenu);
    window.row().fill(0.5f,1f).expand(true,false);
    window.add(container);
    Table extras = new Table("extras");
    extras.row().fill(false,false).expand(true,true);
    extras.add(fps).left().center().pad(0,25,25,0); 
    extras.add(libgdx).right().center().pad(0,0,25,25);
    window.row().fill(true,false).expand(true,true);
    window.add(extras).bottom();
    ui.addActor(window);
}

@Override
public void render(float arg0) {
    Gdx.gl.glClearColor(0.2f, 0.2f, 0.2f, 1);
    Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
    ((Label)ui.findActor("fps")).setText("fps: " + Gdx.graphics.getFramesPerSecond());  
    ui.act(Math.min(Gdx.graphics.getDeltaTime(), 1 / 30f));
    ui.draw();
    Table.drawDebug(ui);
}
@Override
public void resize(int width, int height) {
    ui.setViewport(width, height, true);
    Log.d("Resize: "+width+", "+height);
}

Answer 2

Yes， the the new UI api is very easy to use. You can use the Skin object to create some Actor object, and then join them to the Stage object.

You can reference the UITest.java file in the libgdx source. It demonstrates how to use the basic UI elements.

From low level to see the libgdx new UI, it only include the following element:

• NinePatch: the basic shape object for create the element could stretch up;
• Region: the shape object for the fixed size element;
• Font: the bitmapfont object for display text;

The high level element is composed by them, such as the Button object, include: ninepatch and font ojbect, and so on.

So, you can very easy to create the 2D UI use them. :)