How to make the main menu screen fade out when the game starts in libGDX?

Question

I am creating the main menu of my game, and I want the main menu screen to disappears with a fade out. I thought that if I used a Stage to make the menu and added buttons as actors, the menu would work...

But I get the following problem: If I add the fadeOut(1) in the click event of the button used to start the game, instead of having the whole screen fade out, only the buttons of the menu disappear. Probably using Stage is the wrong way to make menus, and I do not know the right way ...

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.actions.Actions;
import com.badlogic.gdx.scenes.scene2d.ui.ImageButton;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
import com.badlogic.gdx.scenes.scene2d.utils.Drawable;
import com.badlogic.gdx.scenes.scene2d.utils.TextureRegionDrawable;
import com.phillips.mrbulb.MrBulb;


public class MenuState extends Estado {
    private Stage menu;
    private Texture fondo;
    private Drawable empz, instr, acrc, slir;
    private ImageButton empezar, instrucciones, acerca, salir;
    public MenuState(GameStateManager gsm) {
        super(gsm);
        fondo = new Texture("fondo_temp.png");
        empz = new TextureRegionDrawable(new TextureRegion(new Texture("Empezar.png")));
        instr = new TextureRegionDrawable(new TextureRegion(new Texture("Instrucciones.png")));
        acrc = new TextureRegionDrawable(new TextureRegion(new Texture("Acerca.png")));
        slir = new TextureRegionDrawable(new TextureRegion(new Texture("Salir.png")));
        empezar = new ImageButton(empz);
        empezar.addCaptureListener(new ClickListener(){
            public void clicked(InputEvent event, float x, float y){
                menu.addAction(Actions.fadeOut(1));
            }
        });
        empezar.setPosition(MrBulb.ANCHO/2 - 90,MrBulb.ALTO/2);
        instrucciones = new ImageButton(instr);
        instrucciones.setPosition(MrBulb.ANCHO/2 - 80,MrBulb.ALTO/2 - 90);
        acerca = new ImageButton(acrc);
        acerca.setPosition(MrBulb.ANCHO/2 - 62,MrBulb.ALTO/2 - 180);
        salir = new ImageButton(slir);
        salir.setPosition(MrBulb.ANCHO/2 - 33,MrBulb.ALTO/2 - 267);
        menu = new Stage();
        menu.addActor(empezar);
        menu.addActor(instrucciones);
        menu.addActor(acerca);
        menu.addActor(salir);
    }

    @Override
    public void update(float dt) {
        Gdx.input.setInputProcessor(menu);
        handleInput();
    }

    @Override
    public void handleInput() {

    }

    @Override
    public void render(SpriteBatch batch) {
        batch.begin();
        batch.draw(fondo,0,0,MrBulb.ANCHO, MrBulb.ALTO);
        batch.end();
        menu.act(Gdx.graphics.getDeltaTime());
        menu.draw();
    }

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

What would be the correct way to make a menu for the game? Or, if using Stage, what would be the right way of coding it?

Answer 1

Using fadeOut is the way to go. You just need to make sure that everything that you want to fade out is part of your Stage. You should start by adding an Image instead of directly rendering your background.

menu = new Stage();

/* Create your background as an actor instead of just a texture */
Image background = new Image(fondo);
background.setBounds(0, 0, MrBulb.ANCHO, MrBulb.ALTO);

menu.addActor(empezar);
menu.addActor(instrucciones);
menu.addActor(acerca);
menu.addActor(salir);
menu.addActor(background);

This will now appropriately fade out your background as well as the buttons. Also make sure to remove these lines from your render method so you don't double-render the background:

batch.begin();
batch.draw(fondo,0,0,MrBulb.ANCHO, MrBulb.ALTO);
batch.end();