Producing eraser effects using libgdx and OpenGL ES

Producing Eraser Effects using libGDX and OpenGL ES

This article delves into the process of creating eraser effects in your libGDX applications using the power of OpenGL ES.

Understanding the Concept

Eraser effects, in the context of drawing applications, simulate the action of erasing drawn content. This typically involves:

• Clearing a portion of the drawn canvas: This removes previously drawn pixels, creating an “erase” effect.
• Transparency and Blending: Erasing often involves manipulating the alpha values (transparency) of pixels to achieve a smooth fading effect.

Implementing the Eraser Effect

Here’s how to implement an eraser effect in your libGDX game or application:

1. Setting up the Scene

Start by creating a simple scene where you’ll be drawing and erasing.

package com.example.eraserdemo;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;

public class EraserDemo extends ApplicationAdapter {
    private OrthographicCamera camera;
    private ShapeRenderer shapeRenderer;

    @Override
    public void create() {
        camera = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
        camera.position.set(Gdx.graphics.getWidth() / 2f, Gdx.graphics.getHeight() / 2f, 0);
        camera.update();

        shapeRenderer = new ShapeRenderer();
    }

    @Override
    public void render() {
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        shapeRenderer.setProjectionMatrix(camera.combined);
        shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);

        // Draw some content (replace with your own drawing logic)
        shapeRenderer.setColor(0, 0, 0, 1);
        shapeRenderer.rect(100, 100, 200, 200);

        shapeRenderer.end();
    }

    @Override
    public void dispose() {
        shapeRenderer.dispose();
    }
}

2. Creating the Eraser

Define a function to represent the eraser. You can use the same ShapeRenderer for this. This function will clear a circular region.

    private void erase(float x, float y, float radius) {
        shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
        shapeRenderer.setColor(1, 1, 1, 1); // White with full transparency
        shapeRenderer.circle(x, y, radius);
        shapeRenderer.end();
    }

3. Implementing Touch/Mouse Input

Add code to handle touch or mouse input to determine the eraser position and activate the erase functionality.

    @Override
    public void render() {
        // ... existing code ...

        if (Gdx.input.isTouched()) {
            int x = Gdx.input.getX();
            int y = Gdx.graphics.getHeight() - Gdx.input.getY();
            erase(x, y, 30); // Erase with a radius of 30 pixels
        }

        // ... existing code ...
    }

Additional Considerations

• Eraser Size and Shape: Experiment with different eraser radii and shapes (circles, squares, etc.) to achieve the desired effect.
• Blending Modes: Explore different OpenGL blending modes (e.g., GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) to fine-tune the transparency of the erased area.
• Performance Optimization: For large drawing areas, consider optimizing the erasing logic by using techniques like batching or using a custom shader to blend the erased pixels.

Code Explanation

Let’s break down the code:

create() Function

• Creates an OrthographicCamera to manage the scene’s view.
• Initializes a ShapeRenderer for drawing shapes.

render() Function

• Clears the screen with white color.
• Sets the ShapeRenderer’s projection matrix based on the camera.
• Draws content (your own drawing logic goes here).
• Handles touch/mouse input and calls the erase() function to erase at the touched location.

erase() Function

• Starts a ShapeRenderer drawing session.
• Sets the color to white with full transparency (1, 1, 1, 1).
• Draws a filled circle to erase content within the radius.

Conclusion

By following these steps, you can successfully implement an eraser effect in your libGDX application, giving your users the power to erase drawn content with precision and visual appeal.