Switch Screen

Objective

Shows how to use create Screens and switch from one Screen to the next with LibGDX.

What you should be familiar with for this tutorial

 Tutorial

Change your main class to extends the class Game. The class Game allows an application to easily have multiple screens.
Declare the following method to extend Game:

  1. dispose
  2. render
  3. create

Within the render method call

super.render();

Upon the creation of the game (within the Create method):

  • We load the Skin (See Skin tutorial)
  • Then we create and display the title screen by calling

this.setScreen(new TitleScreen(this));

Main Class (MyGdxGame.java)

public class MyGdxGame extends Game {
  static public Skin gameSkin;
  public void create () {
    gameSkin = new Skin(Gdx.files.internal("skin/glassy-ui.json"));
    this.setScreen(new TitleScreen(this));
  }

  public void render () {
    super.render();
  }

  public void dispose () {
  }
}
Screens

Create a package “Screens” and within that package create one class per Screen.
Each class implements Screen and its associated methods:

  • show
  • render
  • resize
  • pause
  • hide

Within the constructor we

  • Create our stage,
  • Labels and TextButton.

Within the Show method we set the input processor to the Screen´s stage:

Gdx.input.setInputProcessor(stage);

public class TitleScreen implements Screen {

    private Stage stage;
    private Game game;

    public TitleScreen(Game aGame) {
        game = aGame;
        stage = new Stage(new ScreenViewport());

        Label title = new Label("Title Screen", MyGdxGame.gameSkin,"big-black");
        title.setAlignment(Align.center);
        title.setY(Gdx.graphics.getHeight()*2/3);
        title.setWidth(Gdx.graphics.getWidth());
        stage.addActor(title);

        TextButton playButton = new TextButton("Play!",MyGdxGame.gameSkin);
        playButton.setWidth(Gdx.graphics.getWidth()/2);
        playButton.setPosition(Gdx.graphics.getWidth()/2-playButton.getWidth()/2,Gdx.graphics.getHeight()/2-playButton.getHeight()/2);
        playButton.addListener(new InputListener(){
            @Override
            public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
                game.setScreen(new GameScreen(game));
            }
            @Override
            public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
                return true;
            }
        });
        stage.addActor(playButton);

        TextButton optionsButton = new TextButton("Options",MyGdxGame.gameSkin);
        optionsButton.setWidth(Gdx.graphics.getWidth()/2);
        optionsButton.setPosition(Gdx.graphics.getWidth()/2-optionsButton.getWidth()/2,Gdx.graphics.getHeight()/4-optionsButton.getHeight()/2);
        optionsButton.addListener(new InputListener(){
            @Override
            public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
                game.setScreen(new OptionScreen(game));
            }
            @Override
            public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
                return true;
            }
        });
        stage.addActor(optionsButton);

    }

    @Override
    public void show() {
        Gdx.input.setInputProcessor(stage);
    }

    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        stage.act();
        stage.draw();
    }

    @Override
    public void resize(int width, int height) {

    }

    @Override
    public void pause() {

    }

    @Override
    public void resume() {

    }

    @Override
    public void hide() {

    }

    @Override
    public void dispose() {
   stage.dispose();
  }
}

Code

Full Code available for download here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s