libgdx ScissorStack not working as expected

Question

I'm trying to create a "progress bar" of sorts but the clipping doesn't seem to work the way I expect it to. Is this something I am doing wrong or something I've misinterpreted?

The draw() routine that should clip:

    @Override
    public void draw(SpriteBatch batch, float parentAlpha) {
        Rectangle scissors = new Rectangle();
        Rectangle clipBounds = new Rectangle(getX(), getY(), getWidth() * 0.75f, getHeight());

        ScissorStack.calculateScissors(
                getStage().getCamera(),
                getStage().getGutterWidth(),
                getStage().getGutterHeight(),
                getStage().getCamera().viewportWidth,
                getStage().getCamera().viewportHeight,
                batch.getTransformMatrix(),
                clipBounds, scissors);

        if (ScissorStack.pushScissors(scissors)) {
            super.draw(batch, parentAlpha);
            ScissorStack.popScissors();
        }
    }
}

Complete sample code for ClipTest group class, TestScreen and screenshot.

• ClipTest is a subclass of group used to demonstrate the "bug".
• ClipImage is a subclass of Image, which performs the clipping on draw().
• ClipTest has 2 images, background and foreground.

The background is a black image and it should always be the full size of the progress bar.

The foreground is a white image and it's width is clipped depending on the percentage of the bar.

The strange result I've found is that although the foreground is using the clipping class, the background image is the one actually clipped.

The expected result was created using photoshop (as I couldn't produce it via code).

Any idea what's wrong?

Answer 1

Actual drawing doesn't happen until the Batch "flushes", its not the draw call you need to wrap, as that just queues up drawing to be done later.

You need to make sure the OpenGL draw calls happen between enabling and disabling your scissors, so add a flush after the draw. See https://github.com/libgdx/libgdx/wiki/Clipping,-with-the-use-of-scissorstack

Because a draw call might cause a flush to happen, you need to keep the draw calls inside the active-scissor region. You may also need to flush or end the batch before starting the active scissor region to prevent queued draw calls from before the scissor start getting flushed inside the active scissor region.