LibGDX Video Tutorial: Scene2D UI, Widgets, Layout and Skins

 

In this next part in the ongoing LibGDX Video tutorial series, we take our final look at the Scene2D library.  Specifically we look at using Scene2D to provide a UI, including buttons, windows, layout containers and more.  We also look at how to mix “normal” and Scene2D games together. 

 

The video is available in full HD here.  The source code from the examples is below the video:

 

Example 1

package com.gamefromscratch;    import com.badlogic.gdx.ApplicationAdapter;  import com.badlogic.gdx.Gdx;  import com.badlogic.gdx.graphics.GL20;  import com.badlogic.gdx.graphics.Texture;  import com.badlogic.gdx.graphics.g2d.SpriteBatch;  import com.badlogic.gdx.scenes.scene2d.InputEvent;  import com.badlogic.gdx.scenes.scene2d.Stage;  import com.badlogic.gdx.scenes.scene2d.ui.Dialog;  import com.badlogic.gdx.scenes.scene2d.ui.Skin;  import com.badlogic.gdx.scenes.scene2d.ui.TextButton;  import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;  import com.badlogic.gdx.utils.Timer;  import com.badlogic.gdx.utils.viewport.ScreenViewport;    public class Scene2DUiDemo1 extends ApplicationAdapter {     private Skin skin;     private Stage stage;          @Override     public void create () {        skin = new Skin(Gdx.files.internal("uiskin.json"));        stage = new Stage(new ScreenViewport());          final TextButton button = new TextButton("Click Me",skin,"default");        button.setWidth(200);        button.setHeight(50);          final Dialog dialog = new Dialog("Click Message",skin);          button.addListener(new ClickListener(){           @Override           public void clicked(InputEvent event, float x, float y) {              dialog.show(stage);              Timer.schedule(new Timer.Task() {                 @Override                 public void run() {                    dialog.hide();                 }              }, 10);           }        });        stage.addActor(button);          Gdx.input.setInputProcessor(stage);     }       @Override     public void render () {        Gdx.gl.glClearColor(0, 0, 0, 1);        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);        stage.act(Gdx.graphics.getDeltaTime());        stage.draw();     }      }

Example 2

package com.gamefromscratch;    import com.badlogic.gdx.ApplicationAdapter;  import com.badlogic.gdx.Gdx;  import com.badlogic.gdx.graphics.GL20;  import com.badlogic.gdx.graphics.Texture;  import com.badlogic.gdx.graphics.g2d.SpriteBatch;  import com.badlogic.gdx.scenes.scene2d.InputEvent;  import com.badlogic.gdx.scenes.scene2d.Stage;  import com.badlogic.gdx.scenes.scene2d.ui.*;  import com.badlogic.gdx.scenes.scene2d.utils.Align;  import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;  import com.badlogic.gdx.utils.Timer;  import com.badlogic.gdx.utils.viewport.ScreenViewport;    public class Scene2DUiDemo1 extends ApplicationAdapter {     private Skin skin;     private Stage stage;       private Table table;     private TextButton startButton;     private TextButton quitButton;          @Override     public void create () {        skin = new Skin(Gdx.files.internal("uiskin.json"));        stage = new Stage(new ScreenViewport());        table = new Table();        table.setWidth(stage.getWidth());        table.align(Align.center | Align.top);          table.setPosition(0,Gdx.graphics.getHeight());        startButton = new TextButton("New Game",skin);        quitButton = new TextButton("Quit Game",skin);          table.padTop(30);          table.add(startButton).padBottom(30);          table.row();        table.add(quitButton);          stage.addActor(table);        Gdx.input.setInputProcessor(stage);     }       @Override     public void render () {        Gdx.gl.glClearColor(0, 0, 0, 1);        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);        stage.act(Gdx.graphics.getDeltaTime());        stage.draw();     }      }

 

Example 3

package com.gamefromscratch;    import com.badlogic.gdx.ApplicationAdapter;  import com.badlogic.gdx.Gdx;  import com.badlogic.gdx.InputMultiplexer;  import com.badlogic.gdx.InputProcessor;  import com.badlogic.gdx.graphics.GL20;  import com.badlogic.gdx.graphics.Texture;  import com.badlogic.gdx.graphics.g2d.Sprite;  import com.badlogic.gdx.graphics.g2d.SpriteBatch;  import com.badlogic.gdx.scenes.scene2d.InputEvent;  import com.badlogic.gdx.scenes.scene2d.Stage;  import com.badlogic.gdx.scenes.scene2d.actions.RepeatAction;  import com.badlogic.gdx.scenes.scene2d.ui.*;  import com.badlogic.gdx.scenes.scene2d.utils.Align;  import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;  import com.badlogic.gdx.utils.Timer;  import com.badlogic.gdx.utils.viewport.ScreenViewport;    public class Scene2DUiDemo1 extends ApplicationAdapter implements InputProcessor {     private Skin skin;     private Stage stage;       private Table table;     private TextButton startButton;     private TextButton quitButton;       private SpriteBatch batch;     private Sprite sprite;          @Override     public void create () {        skin = new Skin(Gdx.files.internal("uiskin.json"));        stage = new Stage(new ScreenViewport());        table = new Table();        table.setWidth(stage.getWidth());        table.align(Align.center | Align.top);          table.setPosition(0,Gdx.graphics.getHeight());        startButton = new TextButton("New Game",skin);        quitButton = new TextButton("Quit Game",skin);          startButton.addListener(new ClickListener() {           @Override           public void clicked(InputEvent event, float x, float y) {              Gdx.app.log("Clicked button","Yep, you did");              event.stop();           }        });          table.padTop(30);          table.add(startButton).padBottom(30);          table.row();        table.add(quitButton);          stage.addActor(table);              batch = new SpriteBatch();        sprite = new Sprite(new Texture(Gdx.files.internal("badlogic.jpg")));        sprite.setSize(Gdx.graphics.getWidth(),Gdx.graphics.getHeight());          Timer.schedule(new Timer.Task() {           @Override           public void run() {              sprite.setFlip(false,!sprite.isFlipY());           }        },10,10,10000);            // ORDER IS IMPORTANT!        InputMultiplexer im = new InputMultiplexer(stage,this);        Gdx.input.setInputProcessor(im);     }       @Override     public void render () {        Gdx.gl.glClearColor(0, 0, 0, 1);        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);          batch.begin();        sprite.draw(batch);        batch.end();          stage.act(Gdx.graphics.getDeltaTime());        stage.draw();     }         @Override     public boolean keyDown(int keycode) {        return false;     }       @Override     public boolean keyUp(int keycode) {        return false;     }       @Override     public boolean keyTyped(char character) {        return false;     }       @Override     public boolean touchDown(int screenX, int screenY, int pointer, int button) {        sprite.setFlip(!sprite.isFlipX(),sprite.isFlipY());        return true;     }       @Override     public boolean touchUp(int screenX, int screenY, int pointer, int button) {        return false;     }       @Override     public boolean touchDragged(int screenX, int screenY, int pointer) {        return false;     }       @Override     public boolean mouseMoved(int screenX, int screenY) {        return false;     }       @Override     public boolean scrolled(int amount) {        return false;     }  }

 

uiskin.json

// @formatter:off  {    com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: Razer.fnt } },    com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {     default: { down: default-round-down, up: default-round, font: default-font },    },    com.badlogic.gdx.scenes.scene2d.ui.Window$WindowStyle: {      default:  {        titleFont: default-font       }     }  }

Programming Video


Scroll to Top