Masking is the technique of hiding portions of an image using the pixel information of another to decide whether a pixel of the original should or should not be shown. There’s more than one way to achieve this effect in libGDX.

Table of Contents

  1. Masking using glScissor
  2. Masking using the ScissorStack
  3. Masking using the ShapeRenderer
  4. Masking using the SpriteBatch
  5. Masking using Pixmaps
  6. Masking using Shaders + Textures
  7. Masking using the FrameBuffer (Removal)
  8. Masking using the FrameBuffer (Tinting)

1. Masking using glScissor (Rectangle)

For the simplest of masking needs here’s a technique that allows us to create and apply a single rectangular mask using OpenGL’s Scissor Test. The Scissor Test is a Per-Sample Processing operation that discards Fragments that fall outside of a certain rectangular portion of the screen.

Step 1 - Preparations

  1. private ShapeRenderer shapeRenderer;
  3. @Override
  4. public void create() {
  5.     /* We can use a SpriteBatch or a ShapeRenderer to draw our masked elements. */
  6.     shapeRenderer = new ShapeRenderer();
  7.     shapeRenderer.setAutoShapeType(true);
  9.     /* Increase the OpenGL line thickness for better visualization. */
  10.     Gdx.gl.glLineWidth(2);
  11. }

Step 2 - Drawing our masked elements

  1. private void drawMasked() {
  2.     /* To activate the scissor test, first enable the GL_SCISSOR_TEST enumerator.
  3.      * Once enabled, pixels outside of the scissor box will be discarded. */
  4.     Gdx.gl.glEnable(GL20.GL_SCISSOR_TEST);
  6.     /* To define the scissor box, use this function: */
  7.     Gdx.gl.glScissor(100, 100, 200, 200);
  8.     /* The x and y is the window-space lower-left position of the scissor box,
  9.      * and width and height define the size of the rectangle. */
  11.     /* Draw our circle to be masked, we could also draw sprites with a SpriteBatch. */
  12.     shapeRenderer.set(ShapeType.Filled);
  13.     shapeRenderer.setColor(Color.RED);
  14.     shapeRenderer.circle(100, 100, 100);
  16.     /* Remember to flush before changing GL states again. */
  17.     shapeRenderer.flush();
  19.     /* Deactivate the scissor test before continuing with further rendering operations. */
  20.     Gdx.gl.glDisable(GL20.GL_SCISSOR_TEST);
  21. }

Step 3 - Drawing the contours for debugging purposes

  1. private void drawContours() {
  2.     shapeRenderer.set(Line);
  4.     /* Draw the circle's contour for comparison. */
  5.     shapeRenderer.setColor(Color.GREEN);
  6.     shapeRenderer.circle(100, 100, 100);
  8.     /* Draw the clipped area contour for comparison. */
  9.     shapeRenderer.setColor(Color.CYAN);
  10.     shapeRenderer.rect(100, 100, 200, 200);
  11. }

Result

  1. @Override
  2. public void render() {
  3.     shapeRenderer.begin();
  5.     drawMasked();
  6.     drawContours();
  8.     shapeRenderer.end();
  9. }

Circle masked by a rectangle

2. Masking using the ScissorStack (Rectangles)

A single rectangle could easily not be enough, here’s a technique that allows us to create and apply multiple rectangular masks using libGDX’s ScissorStack.

Step 1 - Preparations

  1. /* Some attributes we're gonna need. */
  2. private ShapeRenderer shapeRenderer;
  3. private Rectangle scissors1, scissors2;
  5. @Override
  6. public void create() {
  7.     /* The ScissorStack needs a camera to transform the clipping rectangles. */
  8.     camera = new OrthographicCamera();
  9.     camera.setToOrtho(false, CAMERA_WIDTH, CAMERA_HEIGHT);
  11.     /* We can use a SpriteBatch or a ShapeRenderer to draw our masked elements. */
  12.     shapeRenderer = new ShapeRenderer();
  13.     shapeRenderer.setAutoShapeType(true);
  14.     shapeRenderer.setProjectionMatrix(camera.combined);
  16.     /* Increase the OpenGL line thickness for better visualization. */
  17.     Gdx.gl.glLineWidth(2);
  19.     /* scissors1 and scissors2 store the results of calculateScissors(...). 
  20.      * clipBounds is used to define the x, y, width and height of the clipping rectangles. */
  21.     scissors1 = new Rectangle();
  22.     Rectangle clipBounds = new Rectangle(100, 100, 200, 200);
  23.     ScissorStack.calculateScissors(camera, shapeRenderer.getTransformMatrix(), clipBounds, scissors1);
  25.     scissors2 = new Rectangle();
  26.     clipBounds.set(50f, 50f, 100f, 100f);
  27.     ScissorStack.calculateScissors(camera, shapeRenderer.getTransformMatrix(), clipBounds, scissors2);
  28. }

Step 2 - Drawing our masked elements

  1. private void drawMasked() {
  2.     /* Feed the ScissorStack and store whether it could push the scissors or not. */
  3.     boolean pop1 = ScissorStack.pushScissors(scissors1);
  4.     boolean pop2 = ScissorStack.pushScissors(scissors2);
  6.     /* Draw the elements to be constrained to an area,
  7.      * without masking this would render a red filled circle. */
  8.     shapeRenderer.set(ShapeType.Filled);
  9.     shapeRenderer.setColor(Color.RED);
  10.     shapeRenderer.circle(100, 100, 100);
  11.     shapeRenderer.flush();
  13.     /* Safety check for the situations the scissor fails to be pushed to the stack
  14.      * (happens for example when the window is minimized on desktop or the clipping
  15.      * area is <= 0). */
  16.     if (pop1) {
  17.         ScissorStack.popScissors();
  18.     }
  19.     if (pop2) {
  20.         ScissorStack.popScissors();
  21.     }
  22. }

It is also possible to push multiple rectangles. Only the pixels of the sprites or shapes that are within all of the rectangles will be rendered.

Also, if your camera moves, you’ll need to recalculate the scissor area afterwards.

Step 3 - Drawing the contours for debugging purposes

  1. private void drawContours() {
  2.     shapeRenderer.set(Line);
  4.     /* The rectangular mask. */
  5.     shapeRenderer.setColor(Color.CYAN);
  6.     shapeRenderer.rect(100, 100, 200, 200);
  7.     shapeRenderer.rect(50, 50, 100, 100);
  9.     /* The masked circle. */
  10.     shapeRenderer.setColor(Color.GREEN);
  11.     shapeRenderer.circle(100, 100, 100);
  12. }

Result

  1. @Override
  2. public void render() {
  3.     ScreenUtils.clear(Color.BLACK);
  5.     shapeRenderer.begin();
  7.     drawMasked();
  8.     drawContours();
  10.     shapeRenderer.end();
  11. }

Circle masked by 2 rectangles

3. Masking using the ShapeRenderer (Various Shapes)

Alright rectangles are great but our needs are greater what now. This upcoming technique allows us to create more diversely shaped masks using libGDX’s ShapeRenderer. You can use a SpriteBatch, but because the masks are built from the geometry of what you’re drawing it will not work as you expect. Texture regions will render as rectangles no matter what the image looks like.

Step 1 - Preparations

  1. private ShapeRenderer shapeRenderer;
  3. @Override
  4. public void create() {
  5.     /* We can use a SpriteBatch or a ShapeRenderer to draw our masked elements. */
  6.     shapeRenderer = new ShapeRenderer();
  7.     shapeRenderer.setAutoShapeType(true);
  9.     /* Increase the OpenGL line thickness for better visualization. */
  10.     Gdx.gl.glLineWidth(2);
  11. }

Step 2 - Draw the mask elements to the depth buffer

  1. private void drawMasks() {
  2.     /* Clear our depth buffer info from previous frame. */
  3.     Gdx.gl.glClear(GL20.GL_DEPTH_BUFFER_BIT);
  5.     /* Set the depth function to LESS. */
  6.     Gdx.gl.glDepthFunc(GL20.GL_LESS);
  8.     /* Enable depth writing. */
  9.     Gdx.gl.glEnable(GL20.GL_DEPTH_TEST);
  11.     /* Disable RGBA color writing. */
  12.     Gdx.gl.glColorMask(false, false, false, false);
  14.     /* Render mask elements. */
  15.     shapeRenderer.set(ShapeType.Filled);
  16.     shapeRenderer.circle(100, 200, 100);
  17.     shapeRenderer.triangle(0, 0, 100, 100, 200, 0);
  18.     shapeRenderer.flush();
  19. }

When using a SpriteBatch write this line right after SpriteBatch.begin() : Gdx.gl.glDepthMask(true);

Step 3 - Draw the masked elements

  1. private void drawMasked() {
  2.     /* Enable RGBA color writing. */
  3.     Gdx.gl.glColorMask(true, true, true, true);
  5.     /* Set the depth function to LESS. */
  6.     Gdx.gl.glDepthFunc(GL20.GL_EQUAL);
  8.     /* Render masked elements. */
  9.     shapeRenderer.setColor(Color.RED);
  10.     shapeRenderer.circle(100, 100, 100);
  11.     shapeRenderer.flush();
  12. }

Step 4 - Draw the contours for debugging purposes

  1. private void drawContours() {
  2.     /* Disable depth writing. */
  3.     Gdx.gl.glDisable(GL20.GL_DEPTH_TEST);
  5.     shapeRenderer.set(Line);
  7.     /* The circle and triangle masks. */
  8.     shapeRenderer.setColor(Color.CYAN);
  9.     shapeRenderer.circle(100, 200, 100);
  10.     shapeRenderer.triangle(0, 0, 100, 100, 200, 0);
  12.     /* The masked circle. */
  13.     shapeRenderer.setColor(Color.GREEN);
  14.     shapeRenderer.circle(100, 100, 100);
  15. }

Result

  1. @Override
  2. public void render() {
  3.     ScreenUtils.clear(Color.BLACK);
  5.     shapeRenderer.begin();
  7.     drawMasks();
  8.     drawMasked();
  9.     drawContours();
  11.     shapeRenderer.end();
  12. }

Circle masked by another circle and a triangle

4. Masking using the SpriteBatch (Any shape)

For the demanding GDXer with complex masking needs, this technique allows us to have any mask imaginable and take the alpha channel into account for the first time! For this we’ll be using libGDX’s SpriteBatch.

Step 1 - Preparations

These are the images we’re gonna use:

The maskThe sprite
The maskThe sprite to mask

The images in a black background for clarity:

The maskThe sprite
The maskThe sprite to mask
  1. /* Some attributes we're gonna need. */
  2. private SpriteBatch spriteBatch;
  3. private Sprite mask, maskedSprite;
  5. @Override
  6. public void create() {
  7.     spriteBatch = new SpriteBatch();
  9.     /* Load the mask containing the alpha information. */
  10.     mask = new Sprite(new Texture("mask.png"));
  12.     /* Load the sprite which will be masked. */
  13.     maskedSprite = new Sprite(new Texture("sprite.png"));
  14.     maskedSprite.setColor(Color.RED);
  15. }

Step 2 - Draw the mask elements to the frame buffer

  1. private void drawMasks() {
  2.     /* Disable RGB color writing, enable alpha writing to the frame buffer. */
  3.     Gdx.gl.glColorMask(false, false, false, true);
  5.     /* Change the blending function for our alpha map. */
  6.     spriteBatch.setBlendFunction(GL20.GL_ONE, GL20.GL_ZERO);
  8.     /* Draw alpha masks. */
  9.     mask.draw(spriteBatch);
  11.     /* This blending function makes it so we subtract instead of adding to the alpha map. */
  12.     spriteBatch.setBlendFunction(GL20.GL_ZERO, GL20.GL_SRC_ALPHA);
  14.     /* Remove the masked sprite's inverse alpha from the map. */
  15.     maskedSprite.draw(spriteBatch);
  17.     /* Flush the batch to the GPU. */
  18.     spriteBatch.flush();
  19. }

Step 3 - Draw the masked elements

  1. private void drawMasked() {
  2.     /* Now that the buffer has our alpha, we simply draw the sprite with the mask applied. */
  3.     Gdx.gl.glColorMask(true, true, true, true);
  5.     /* Change the blending function so the rendered pixels alpha blend with our alpha map. */
  6.     spriteBatch.setBlendFunction(GL20.GL_DST_ALPHA, GL20.GL_ONE_MINUS_DST_ALPHA);
  8.     /* Draw our sprite to be masked. */
  9.     maskedSprite.draw(spriteBatch);
  11.     /* Remember to flush before changing GL states again. */
  12.     spriteBatch.flush();
  13. }

Step 4 - Draw the original sprites for debugging purposes

  1. private void drawOriginals() {
  2.     /* Switch to the default blend function */
  3.     spriteBatch.setBlendFunction(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
  5.     /* Draw the source images separately */
  6.     spriteBatch.draw(mask, 0, 256);
  7.     spriteBatch.draw(maskedSprite, 256, 256);
  8. }

Result

  1. @Override
  2. public void render() {
  3.     ScreenUtils.clear(Color.BLACK);
  5.     spriteBatch.begin();
  7.     drawMasks();
  8.     drawMasked();
  9.     drawOriginals();
  11.     spriteBatch.end();
  12. }

Masked sprite and original sprites

5. Masking using Pixmaps (Any shape)

This technique allows the mask to be any image or shape and takes the alpha channel into account. This time we’ll be using the libGDX’s Pixmap class.

Step 1 - Preparations

  1. private ShapeRenderer shapeRenderer;
  2. private SpriteBatch spriteBatch;
  3. private Texture masked, original;
  4. private final int size = 256;
  6. @Override
  7. public void create() {
  8.     /* The ShapeRenderer will only be used to draw the mask contours */
  9.     shapeRenderer = new ShapeRenderer();
  10.     shapeRenderer.setAutoShapeType(true);
  11.     Gdx.gl20.glLineWidth(2);
  13.     /* Needed to render our textures, a ShapeRenderer won't work with this technique. */
  14.     spriteBatch = new SpriteBatch();
  16.     /* The path to the image to mask. */
  17.     FileHandle imagePath = new FileHandle("images/shared/weirdShape.png");
  19.     /* Load the pixels of our image into a Pixmap. */
  20.     Pixmap pixmap = new Pixmap(imagePath);
  22.     /* Have an unaltered version for comparison. */
  23.     original = new Texture(imagePath);
  25.     /* Apply the mask to our Pixmap. */
  26.     pixmap = applyMask(pixmap);
  28.     /* Load the pixel information of the Pixmap into a Texture for drawing. */
  29.     masked = new Texture(pixmap);
  30. }

Step 2 - Applying the mask

  1. private Pixmap applyMask(Pixmap source) {
  2.     /* Create a Pixmap to store the mask information, at the end it will
  3.      * contain the result. */
  4.     Pixmap result = new Pixmap(source.getWidth(), source.getHeight(), Pixmap.Format.RGBA8888);
  6.     /* This setting lets us overwrite the pixels' transparency. */
  7.     result.setBlending(None);
  9.     /* Ignore RGB values unless you want funky results, alpha is for the mask. */
  10.     result.setColor(new Color(1f, 1f, 1f, 1f));
  12.     /* Draw a circle to our mask, any shape is possible since
  13.      * you can draw individual pixels to the Pixmap. */
  14.     result.fillCircle(size / 2, size / 2, size / 2);
  16.     /* Draw a rectangle with little alpha to our mask, this will turn
  17.     * a corner of the original image transparent. */
  18.     result.setColor(1f, 1f, 1f, 0.25f);
  19.     result.fillRectangle(size / 2, size / 2, size / 2, size / 2);
  21.     /* We can also define the mask by loading an image:
  22.      * result = new Pixmap(new FileHandle("image.png")); */
  24.     /* Decide the color of each pixel using the AND bitwise operator. */
  25.     for (int x = 0; x < result.getWidth(); x++) {
  26.         for (int y = 0; y < result.getHeight(); y++) {
  27.             result.drawPixel(x, y, source.getPixel(x, y) & result.getPixel(x, y));
  28.         }
  29.     }
  31.     return result;
  32. }

Step 3 - Drawing the original and masked images

  1. private void drawImages() {
  2.     /* Draw the original image for comparison. */
  3.     spriteBatch.setColor(Color.WHITE);
  4.     spriteBatch.draw(original, 0, size, size, size);
  6.     /* Draw the masked image in red. */
  7.     spriteBatch.setColor(Color.RED);
  8.     spriteBatch.draw(masked, 0, 0, size, size);
  9. }

Step 4 - Drawing the contours of the mask for debugging purposes

  1. private void drawContours() {
  2.     /* Draw the contour of the circle and rectangle used as masks. */
  3.     shapeRenderer.setColor(Color.CYAN);
  4.     shapeRenderer.circle(size / 2f, size / 2f, size / 2f);
  5.     shapeRenderer.rect(size / 2f, 0, size / 2f, size / 2f);
  6. }

Result

  1. @Override
  2. public void render() {
  3.     ScreenUtils.clear(Color.BLACK);
  5.     spriteBatch.begin();
  6.     drawImages();
  7.     spriteBatch.end();
  9.     shapeRenderer.begin();
  10.     drawContours();
  11.     shapeRenderer.end();
  12. }

Original and masked images + contours

6. Masking using Shaders and Textures (Any shape)

This technique allows the mask to be any image or shape and takes alpha channel into account. This time we’ll be using the libGDX’s ShaderProgram class in conjunction with the Texture class.

Step 1 - Preparations

  1. private final int size = 300;
  2. private Texture texture;
  3. private SpriteBatch spriteBatch1, spriteBatch2;
  4. private ShapeRenderer shapeRenderer;
  6. @Override
  7. public void create() {
  8.     /* We'll be using a pixmap to define the mask this time. */
  9.     defineMask();
  11.     /* Some regular textures to draw on the screen. */
  12.     texture = new Texture(WEIRD_SHAPE_PATH);
  13.     texture.setFilter(Linear, Linear);
  15.     setupShader();
  17.     /* An unmodified SpriteBatch to draw the original image as reference
  18.      * we could also change the shader of spriteBatch1 back to the default. */
  19.     spriteBatch2 = new SpriteBatch();
  21.     /* Construct a simple ShapeRenderer to draw reference contours. */
  22.     shapeRenderer = new ShapeRenderer();
  23.     shapeRenderer.setAutoShapeType(true);
  24.     Gdx.gl.glLineWidth(2);
  25. }

Step 2 - Defining our mask

  1. private void defineMask() {
  2.     /* The fragment shader simply multiplies the fragment's usual alpha with
  3.      * our mask alpha, since we only care about the alpha channel, the Alpha
  4.      * Pixmap format is just what we need. */
  5.     Pixmap pixmap = new Pixmap(size, size, Alpha);
  7.     /* Pixmap blending can result in some funky looking lines when
  8.      * drawing. You may need to disable it. */
  9.     pixmap.setBlending(None);
  11.     /* The default color of a newly created Pixmap has an alpha value of 0
  12.      * play with different alpha values for different levels of transparency. */
  13.     pixmap.setColor(0, 0, 0, 1);
  15.     /* This setting will let us see some portions of the masked image. */
  16.     pixmap.fillCircle(size / 2, size / 4, size / 4);
  17.     pixmap.setColor(0, 0, 0, 0.25f);
  18.     pixmap.fillRectangle(size / 4, size / 2, size / 2, size / 2);
  20.     /* Create a Texture based on the pixmap.
  21.      * IMPORTANT: How we create the texture doesn't matter, this technique
  22.      * also allows, for example, to create it out of any supported format image */
  23.     Texture pixmapTex = new Texture(pixmap);
  25.     /* Bind the mask texture to TEXTURE<N> (TEXTURE1 for our purposes),
  26.      * which also sets the currently active texture unit. */
  27.     pixmapTex.bind(1);
  29.     /* However SpriteBatch will auto-bind to the current active texture,
  30.      * so we must now reset it to TEXTURE0 or else our mask will be
  31.      * overwritten. */
  32.     Gdx.gl.glActiveTexture(GL20.GL_TEXTURE0);
  33. }

Step 3 - Setting up the shader

  1. private void setupShader() {
  2.     /* It's nicer to keep shader programs as text files in the assets
  3.      * directory rather than dealing with horrid Java string formatting. */
  4.     FileHandle vertexShader = Gdx.files.internal("shaders/shared/vertex.glsl");
  5.     FileHandle fragmentShader = Gdx.files.internal("shaders/masking/fragment.glsl");
  7.     /* Bonus: you can set `pedantic = false` while tinkering with your
  8.      * shaders. This will stop it from crashing if you have unused variables
  9.      * and so on. */
  10.     ShaderProgram.pedantic = false;
  12.     /* Construct our shader program. Spit out a log and quit if the shaders
  13.      * fail to compile. */
  14.     ShaderProgram shader = new ShaderProgram(vertexShader, fragmentShader);
  15.     if (!shader.isCompiled()) {
  16.         Gdx.app.log("Shader", shader.getLog());
  17.         Gdx.app.exit();
  18.     }
  20.     /* Tell our shader that u_texture will be in the TEXTURE0 spot and
  21.      * u_mask will be in the TEXTURE1 spot. We can set these now since
  22.      * they'll never change; we don't have to send them every render frame. */
  23.     shader.bind();
  24.     shader.setUniformi("u_texture", 0);
  25.     shader.setUniformi("u_mask", 1);
  27.     /* Construct a simple SpriteBatch using our shader program. */
  28.     spriteBatch1 = new SpriteBatch();
  29.     spriteBatch1.setShader(shader);
  30. }

The vertex.glsl shader file:

  1. uniform mat4 u_projTrans;
  3. attribute vec4 a_position;
  4. attribute vec4 a_color;
  5. attribute vec2 a_texCoord0;
  7. varying vec4 v_color;
  8. varying vec2 v_texCoord0;
  10. void main()
  11. {
  12.     v_color = a_color;
  13.     v_texCoord0 = a_texCoord0;
  14.     gl_Position = u_projTrans * a_position;
  15. }

The fragment.glsl shader file:

  1. #ifdef GL_ES
  2. precision mediump float;
  3. #endif
  5. uniform sampler2D u_texture;
  6. uniform sampler2D u_mask;
  8. varying vec4 v_color;
  9. varying vec2 v_texCoord0;
  11. void main()
  12. {
  13.     vec4 texColor = texture2D(u_texture, v_texCoord0);
  14.     vec4 mask = texture2D(u_mask, v_texCoord0);
  15.     texColor.a *= mask.a;
  16.     gl_FragColor = v_color * texColor;
  17. }

Step 4 - Drawing the contours of the mask for debugging purposes

  1. private void drawContours() {
  2.     /* Draw the contour of the masks. */
  3.     shapeRenderer.setColor(Color.CYAN);
  4.     shapeRenderer.rect(size / 4f, 0f, size / 2f, size / 2f);
  5.     shapeRenderer.circle(size / 2f, size * 0.75f, size / 4f);
  6. }

Result

  1. @Override
  2. public void render() {
  3.     ScreenUtils.clear(Color.BLACK);
  5.     /* Draw our masked image. */
  6.     spriteBatch1.begin();
  7.     spriteBatch1.setColor(Color.RED);
  8.     spriteBatch1.draw(texture, 0, 0, size, size);
  9.     spriteBatch1.end();
  11.     /* Draw the original image unmasked for comparison. */
  12.     spriteBatch2.begin();
  13.     spriteBatch2.draw(texture, 0, size, size, size);
  14.     spriteBatch2.end();
  16.     shapeRenderer.begin();
  17.     drawContours();
  18.     shapeRenderer.end();
  19. }

Masked sprite and original sprites

7. Masking using the FrameBuffer (Removal)

Ideal if you wanna use the mask to hide portions of the masked elements.

Step 1 - Preparations

  1. private ShapeRenderer shapeRenderer;
  2. private FrameBuffer frameBuffer;
  3. private SpriteBatch spriteBatch;
  5. @Override
  6. public void create() {
  7.     shapeRenderer = new ShapeRenderer();
  8.     shapeRenderer.setAutoShapeType(true);
  9.     Gdx.gl20.glLineWidth(2);
  11.     frameBuffer = new FrameBuffer(Pixmap.Format.RGBA8888, Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), false);
  13.     spriteBatch = new SpriteBatch();
  14. }

Step 2 - Drawing the masked elements and the mask elements

  1. private void drawCircles() {
  2.     shapeRenderer.set(ShapeType.Filled);
  4.     /* An example circle, remember to flush before changing the blending function */
  5.     shapeRenderer.setColor(Color.RED);
  6.     shapeRenderer.circle(200, 200, 100);
  7.     shapeRenderer.flush();
  9.     /* We'll need blending enabled for the technique to work*/
  10.     Gdx.gl.glEnable(GL20.GL_BLEND);
  12.     /* With this blending function, wherever we draw pixels next
  13.      * we will actually remove previously drawn pixels. */
  14.     Gdx.gl.glBlendFuncSeparate(GL20.GL_ZERO, GL20.GL_ZERO, GL20.GL_ONE_MINUS_SRC_ALPHA, GL20.GL_ONE_MINUS_DST_ALPHA);
  15.     shapeRenderer.circle(300, 200, 70);
  16.     shapeRenderer.circle(100, 200, 35);
  17.     shapeRenderer.flush();
  19.     /* Restore defaults. */
  20.     Gdx.gl.glDisable(GL20.GL_BLEND);
  22.     /* The default blend function in case we need standard blending elsewhere.
  23.      * Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA); */
  24. }

Step 3 - Drawing the contours for debugging purposes

  1. private void drawContours() {
  2.     shapeRenderer.set(Line);
  4.     /* Contour of the masked circle */
  5.     shapeRenderer.setColor(Color.GREEN);
  6.     shapeRenderer.circle(200, 200, 100);
  8.     /* Contour of the masks */
  9.     shapeRenderer.setColor(Color.CYAN);
  10.     shapeRenderer.circle(300, 200, 70);
  11.     shapeRenderer.circle(100, 200, 35);
  12. }

Result

  1. @Override
  2. public void render() {
  3.     ScreenUtils.clear(Color.GRAY);
  5.     frameBuffer.bind();
  6.     shapeRenderer.begin();
  7.     drawCircles();
  8.     drawContours();
  9.     shapeRenderer.end();
  10.     frameBuffer.end();
  12.     Texture texture = frameBuffer.getColorBufferTexture();
  13.     Sprite sprite = new Sprite(texture);
  14.     sprite.flip(false, true);
  16.     spriteBatch.begin();
  17.     sprite.draw(spriteBatch);
  18.     spriteBatch.end();
  19. }

Masked sprite and original sprites

8. Masking using the FrameBuffer (Tinting)

Ideal if you wanna use the mask to tint or texture portions of the masked elements.

Step 1 - Preparations

  1. private ShapeRenderer shapeRenderer;
  2. private SpriteBatch spriteBatch;
  3. private BitmapFont menuItemFont;
  4. private FrameBuffer frameBuffer;
  5. private float textWidth, textHeight, textX, textY;
  7. @Override
  8. public void create() {
  9.     shapeRenderer = new ShapeRenderer();
  10.     shapeRenderer.setAutoShapeType(true);
  12.     spriteBatch = new SpriteBatch();
  14.     menuItemFont = new BitmapFont();
  15.     menuItemFont.getData().setScale(6f);
  17.     int screenWidth = Gdx.graphics.getWidth();
  18.     int screenHeight = Gdx.graphics.getHeight();
  20.     GlyphLayout glyphLayout = new GlyphLayout();
  21.     glyphLayout.setText(menuItemFont, "ONE PLAYER");
  23.     textWidth = glyphLayout.width;
  24.     textHeight = glyphLayout.height;
  25.     textX = screenWidth / 2f - textWidth / 2f;
  26.     textY = screenHeight / 2f + textHeight / 2f;
  28.     frameBuffer = new FrameBuffer(Pixmap.Format.RGBA8888, screenWidth, screenHeight, false);
  29. }

Step 2 - Drawing the mask and masked elements

  1. private void draw() {
  2.     spriteBatch.begin();
  3.     menuItemFont.draw(spriteBatch, "ONE PLAYER", textX, textY);
  4.     spriteBatch.end();
  6.     Gdx.gl.glEnable(GL20.GL_BLEND);
  8.     Gdx.gl.glBlendFunc(GL20.GL_DST_COLOR, GL20.GL_ZERO);
  10.     shapeRenderer.begin();
  11.     shapeRenderer.set(ShapeType.Filled);
  12.     shapeRenderer.rect(textX - 10, textY + 10, textWidth + 20, -(textHeight + 20),
  13.             Color.LIME, Color.LIME, Color.BLACK, Color.BLACK);
  14.     shapeRenderer.end();
  16.     Gdx.gl.glDisable(GL20.GL_BLEND);
  17. }

Result

  1. @Override
  2. public void render() {
  3.     ScreenUtils.clear(Color.RED);
  5.     frameBuffer.bind();
  6.     draw();
  7.     frameBuffer.end();
  9.     Texture texture = frameBuffer.getColorBufferTexture();
  10.     Sprite sprite = new Sprite(texture);
  11.     sprite.flip(false, true);
  13.     spriteBatch.begin();
  14.     sprite.draw(spriteBatch);
  15.     spriteBatch.end();
  16. }

Masked sprite and original sprites