Stage draws over everything

Question

public void render(float delta) {
    Gdx.gl.glClearColor(0, 0, 0.2f, 1);
    Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

    stage.act(delta);

    batch.setProjectionMatrix(camera.combined);
    batch.begin();
    if (lifeCount > 0) {
        /* 
        When stage.draw is called here, it only displays the exit button.
        The game still operates, but everything is invisible.
        If I leave the game on, the game over screen is shown,
        */
        stage.draw();
        text.setColor(1.0f, 1.0f, 1.0f, 1.0f);
        text.draw(batch, score + scoreCount, 25, 100);
        text.draw(batch, lives + lifeCount, 25, 120);
        text.draw(batch, speed + raindropSpeed, 25, 80);
        batch.draw(bucketTexture, bucket.x, bucket.y);
        for (Rectangle clearDrop : clearDrops) {
            batch.draw(clearDropTexture, clearDrop.x, clearDrop.y);
        }
        for (Rectangle healthDrop : healthDrops) {
            batch.draw(healthDropTexture, healthDrop.x, healthDrop.y);
            /* 
             If I place stage.draw here, health drops are invisible.
             This also happens if I place it in the raindrop for-loop and the 
             cleardrop for-loop
            */ 
        }
        for (Rectangle raindrop : raindrops) {
            batch.draw(raindropTexture, raindrop.x, raindrop.y);
        }
        /*
         If I place stage.draw here, the bucket, score, life, and speed
         display correctly. The drops are still invisible.
         */
    } else {
        pause();
        raindrops.clear();  
        game.setScreen(new GameOver(game));
    }
    batch.end();

What I have been trying to do is have an exit button in the top right corner of the GameScreen, although drawing the stage which the button resides in gives me difficulties (see comments in code).

Here is my code for the exit button and stage (resize()):

if (stage == null)
        stage = new Stage(width, height, true);
    stage.clear();

    Gdx.input.setInputProcessor(stage);

    TextButtonStyle styleQuit = new TextButtonStyle();
    styleQuit.up = skin.getDrawable("buttonnormal");
    styleQuit.down = skin.getDrawable("buttonpressed");
    styleQuit.font = text;

    quitButton = new TextButton(" ", styleQuit);
    quitButton.setWidth(128);
    quitButton.setHeight(128);
    quitButton.setX(800 - 128);
    quitButton.setY(480 - 100);

    quitButton.addListener(new InputListener() {
        public boolean touchDown(InputEvent event, float x, float y,
                        int pointer, int button) {
                return true;
        }

        public void touchUp(InputEvent event, float x, float y,
                        int pointer, int button) {
            Gdx.app.log(RainCatcher.LOG, "Quit Button Pressed");
            game.setScreen(new MainMenu(game));
        }
    });

    stage.addActor(quitButton);

And the rest (in show())

    atlas = new TextureAtlas("gamebuttons.pack");
    skin = new Skin();
    skin.addRegions(atlas);
    text = new BitmapFont();

Is there any special trick to allow a stage to be rendered alongside with the falling raindrops, bucket, and text? My friends and I have been stumped and couldn't find a solution anywhere.

Answer 1

Move stage.draw() after batch.end() or before batch.begin()