Main Menu Screen

The Asset Manager has been set up, and some fonts and sprites sheets were loaded during the loading screen. Now I can create a MainMenuScreen.

The MainMenuScreen code is very simple. Basically, the screen is the same as the LoadingScreen, but it will also display a "Play" button :

Here is the code of the MainMenuScreen.java :

public class MainMenuScreen implements Screen{

    final MyGdxGame game;
    private OrthographicCamera camera;
    private Stage stage;
    private Skin skin;
    private Texture textureLogo;
    private Image imageLogo;
    private TextureAtlas textureAtlas;
    private TextButton playButton, optionButton;
    private TextButtonStyle textButtonStyle;
    
    public MainMenuScreen(final MyGdxGame game){
        this.game = game;

        camera = new OrthographicCamera();
        camera.setToOrtho(false, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
        
        textureLogo = new Texture(Gdx.files.internal("Images/Logo.jpg"), true);
        textureLogo.setFilter(TextureFilter.MipMapLinearNearest, TextureFilter.MipMapLinearNearest);
        imageLogo = new Image(textureLogo);
        imageLogo.setWidth(Gdx.graphics.getWidth());
        imageLogo.setHeight(textureLogo.getHeight() * imageLogo.getWidth()/textureLogo.getWidth());
        imageLogo.setX(Gdx.graphics.getWidth()/2 - imageLogo.getWidth()/2);
        imageLogo.setY(Gdx.graphics.getHeight()/2 - imageLogo.getHeight()/2);
        
        stage = new Stage();
        skin = new Skin();
        
        textureAtlas = game.assets.get("Images/Images.pack", TextureAtlas.class);
        skin.addRegions(textureAtlas);
        
        textButtonStyle = new TextButtonStyle();
        textButtonStyle.up = skin.getDrawable("Button");
        textButtonStyle.down = skin.getDrawable("ButtonChecked");
        textButtonStyle.font = game.assets.get("fontMenu.ttf", BitmapFont.class);
        textButtonStyle.fontColor = Color.WHITE;
        textButtonStyle.downFontColor = new Color(0, 0, 0, 1);
        
        playButton = new TextButton("PLAY", textButtonStyle);
        playButton.setHeight(Gdx.graphics.getHeight()/7);
        playButton.setX(Gdx.graphics.getWidth()/2 - playButton.getWidth()/2);
        playButton.setY(29 * Gdx.graphics.getHeight()/100 - playButton.getHeight()/2);
                          
        stage.addActor(imageLogo);
        stage.addActor(playButton);
        
        playButton.addAction(Actions.sequence(Actions.alpha(0)
                ,Actions.fadeIn(0.25f)));
    }
    
    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(0,0,0,1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        
        game.batch.setProjectionMatrix(camera.combined);
        
        stage.act();
        stage.draw();       
    }

    @Override
    public void show() {
        Gdx.input.setInputProcessor(stage);
        
        playButton.addListener(new ClickListener(){
             @Override
                public void clicked(InputEvent event, float x, float y) {
                 game.setScreen(new GameScreen(game));
             }
        });     
    }

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

In the creator :

• I create the background image, with exactly the same code I used to display the logo image during the LoadingScreen.
• 3 new entities are created : a Stage, a TextButton and a Skin.
  • The Stage is an input processor. We can put all our actors (like Buttons) in the Stage, and the Stage will receive input events.
  • The TextButton is an actor. It will trigger a determined event when clicked.
  • The Skin stores resources to create our UI. In my case, I only store the TextureAtlas I loaded in the Asset Manager in the Skin.
• To create a TextButton, we need to first define a TextButtonStyle. The TextButtonStyle allows us to determine every parameter of the TextButton like its font, color, appearance when it is up, down, or checked... Once the TextButtonStyle created, creating a TextButton requires only one line : playButton = new TextButton("PLAY", textButtonStyle);
• After creating all this, we only need to add the actors, it is to say, the image and the button to the Stage.
• To make the MainMenuScreen fancier I make the "Play" button appears with a fade-in effect, with this line : playButton.addAction(Actions.sequence(Actions.alpha(0) ,Actions.fadeIn(0.25f)));

In the render() :

• We need to animate the Stage, only to have the fade-in effect : stage.act();
• And we draw the Stage : stage.draw();

In the show():

• To allow the Stage to receive input, we need this line of code : Gdx.input.setInputProcessor(stage);
• The we define the action triggered by the "Play" button. For that we set up a ClickListener.

In the dispose(): Like on EVERY screens, we need to dipose everything that can be diposed, to avoid memory leak.

And that's it for the main menu screen !