LibGDX: Buttonis is drawn twice in stage

Question

So my problem is that when a game ends, it throws the game into a new screen (called "EndState") where I drew title "Game Over" and an ImageButton called "Restart", so the background and player and everything else is the same as in the previous Screen, but frozen. When I click my restart button, it moves 10px below (pressing effect, implemented using pressedOffsetY), but I see the same button BEHIND it, the only way I found to solve this problem is to draw something all over the screen before drawing the Stage with this button, but this way I lose my player image and everything else from the previous screen.

I draw ImageButton using Stage (because it's clickable) this way :

public class EndState implements Screen {
    private Game endGame;
    private Texture gameOver, restartBtnTexture; // textures of title and button
    private SpriteBatch batch;
    private ImageButton restartImgButton; // ImageButton
    private Drawable drawable; //drawable, to store the image and then use it in Style
    private Stage stage; //the stage which will contain button
    private ImageButton.ImageButtonStyle style; // Style

    public EndState(final Game game) {
        this.endGame = game; //I receive game state from the previous state
        gameOver = new Texture(Gdx.files.internal("GameOver.png"));
        restartBtnTexture = new Texture(Gdx.files.internal("Buttons/Button_1.png"));

        drawable = new TextureRegionDrawable(new TextureRegion(restartBtnTexture));
        batch = new SpriteBatch();

        style = new ImageButton.ImageButtonStyle(); // creating style
        style.imageUp = drawable; 9
        style.pressedOffsetY = -10; // when I press the button I move 10px below

        restartImgButton = new ImageButton(style); // creating the button and assigning the Style
        restartImgButton.getImage().setFillParent(true);
        restartImgButton.setBounds(Gdx.graphics.getWidth() / 2 - (Gdx.graphics.getWidth() / 4), Gdx.graphics.getHeight() * 4/8, Gdx.graphics.getWidth() / 2, Gdx.graphics.getHeight() / 7); // size and position
        restartImgButton.getImageCell().expand().fill();

        stage = new Stage(); // creating stage
        stage.addActor(restartImgButton); //adding button to the stage
        restartImgButton.addListener(new ChangeListener() {
            @Override
            public void changed(ChangeEvent event, Actor actor) {
                endGame.setScreen(new PlayState(endGame));
            }
        });
        Gdx.input.setInputProcessor(stage);


    }

    @Override
    public void show() {

    }

    @Override
    public void render(float delta) {
        batch.begin();
        batch.draw(gameOver, Gdx.graphics.getWidth() / 2 - (Gdx.graphics.getWidth() * 2/6), Gdx.graphics.getHeight() * 6/8, Gdx.graphics.getWidth() * 2/3, Gdx.graphics.getWidth() / 3); // drawing Game Over
        batch.end();
        stage.draw(); // drawing restart Button
    }

DHa DHa · Accepted Answer · 2018-05-04T19:03:44

I believe the basic problem is that you are not clearing the screen every render (intentionally so but it also leads to your problem).

Since you are not clearing the screen, your last screen will still be visible, but so will everything that is drawn on this screen (test moving the button around more than you already are and you will start seeing copies of it everywhere you move it).

The simple solution: don't let anything move at this screen

The proper solution: since you want the old graphics to stay around, don't make a new screen, just insert your button actor in the previous screen and work from there

LibGDX: Buttonis is drawn twice in stage

1 Answers