How can I add a transparent overlay to a UI in libGDX?

Question

I am attempting to use the following code

        shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
        shapeRenderer.setColor(3,3,3,.3f);
        shapeRenderer.rect(0,0,gameWidth,gameHeight);
        shapeRenderer.end();

So that when the menu is accessed, a transparent background appears. The problem I am facing is that when I try to do this the objects rendered by the SpriteBatch seem to misbehave. Upon further research i found that attempting to nest that code within SpriteBatch.begin() and SpriteBatch.end() is the cause of that. However, If I try to place the code after the SpriteBatch.end(), because the SpriteBatch has ended the objects rendered by it do not appear behind the transparent rectangle. (I tried assigning SpriteBatch and Shaperender a different camera, however, that didn't fix the problem.) How can I fix this or find another way to implement the transparent background for the menu.

Answer 1

As mentioned above, you can start and stop a SpriteBatch in the same draw-method, also for transparency you need to enable BLEND. Here's what I did with one of my UIs.

    batchstuff...
    spriteBatch.end();

    Gdx.graphics.getGL20().glEnable(GL20.GL_BLEND);
    Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
    shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);

    shapeRenderer.setColor(new Color(1, 1, 1, 0.1f));
    shapeRenderer.rect(screenMargin + innerScreenMargin, screenMargin+innerScreenMargin + 5*(cellItemHeight+cellMargin+innerCellBorder)-innerCellBorder-cellMargin + innerScreenMargin, (innerCellBorder + innerCellWidth+cellMargin) * 10 - innerCellBorder-cellMargin, 380);

    shapeRenderer.end();
    Gdx.gl.glDisable(GL20.GL_BLEND);

    spriteBatch.begin();
    ... more batchstuff