glow effect with ShapeRenderer (libgdx)

Question

I read about glow/particle effecta with sprites, which are working well.

Is there a simple way to create the similar blur effect with simple shaperender functionality like circles ?

@Override
public void draw(Batch batch, float parentAlpha) {
    super.draw(batch, parentAlpha);
    batch.end();
    shapeRenderer.begin(ShapeRenderer.ShapeType.Point);
    shapeRenderer.setAutoShapeType(true);
    drawCircle();
    shapeRenderer.end();
    batch.begin();
}

private void drawCircle() {
    shapeRenderer.setColor(Color.WHITE);
    shapeRenderer.set(ShapeRenderer.ShapeType.Filled);
    // apply effect ??
    shapeRenderer.circle(10,10,2);
}

Do you want to do this so you can make arbitrary shapes glow? A prerendered glow sprite will be way more performant and easier way to get a glowing circle. To do it with arbitrary ShapeRenderer shapes, you could draw to a FrameBuffer and do some blur post processing. Not trivial, but there are libraries that can make it easier. — Tenfour04, Nov 30 '19 at 17:24

score 0 · Answer 1 · answered Jan 15 '20 at 00:13

0

You can't use textures with default ShapeRender.

There are several way to do this but the easiest is to use ShapeDrawer library. It adds some "ShapeRenderer like" capabilities to a SpriteBatch and more. see https://github.com/earlygrey/shapedrawer

answered Jan 15 '20 at 00:13

mgsx-dev

440
3
5

score 0 · Answer 2 · answered Jan 16 '20 at 16:58

Yes, you could create a "glow" effect, this could be achieved by drawing using decreasing alpha values past the boundaries.

Firstly, to define the glow-effect parameters, let's determine the maximum boundary of the glowing object, where the glow ends, as being auraSize for the size of the aura.

Next, we need to know the size of the solid portion of the object, the bit that doesn't glow, and let's call this objSize for the size of the object.

To draw this, we can use a simple for loop and some if statements:

private void drawCircle() {
    shapeRenderer.set(ShapeRenderer.ShapeType.Filled);

    //Draw circles upto the size of aura
    for(int radius = 0; radius < auraSize; radius++) {
        /*
        * Checks if radius fits object size, sets colour to solid white if so
        * Interpolates alpha value to 0 based on distance to aura covered by radius otherwise
        */
        if(radius <= objSize) {
            shapeRenderer.setColor(Color.WHITE);
        } else {
            shapeRenderer.setColor(new Color(1, 1, 1,
                     MathUtils.lerp(1, 0, (radius - objSize) / (auraSize / objSize))));
        }

        //Draws the circle at the current radius
        shapeRenderer.circle(10, 10, radius);
    }
}

glow effect with ShapeRenderer (libgdx)

2 Answers2