ShapeRenderer produces pixelated shapes using LibGDX

Question

When I use a ShapeRenderer, it always comes out pixelated. But if I draw the shape in photoshop with the same dimensions, it's very smooth and clean-looking.

My method is just as follows:

package com.me.actors;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType;
import com.badlogic.gdx.scenes.scene2d.Actor;

public class bub_actors extends Actor {
    private ShapeRenderer shapes;
    private Texture text;
    private Sprite sprite;

    public bub_actors(){
        shapes = new ShapeRenderer();
        text = new Texture(Gdx.files.internal("data/circle.png"));
        sprite = new Sprite();
        sprite.setRegion(text);
    }
    @Override
    public void draw(SpriteBatch batch, float parentAlpha) {
            batch.draw(sprite, 200, 200, 64, 64);
            shapes.begin(ShapeType.FilledCircle);
            shapes.filledCircle(50, 50, 32);
            shapes.setColor(Color.BLACK);
            shapes.end();
    }
}

Here's an image of the output:

Any ideas as to why this happens? Is it possible to make the ShapeRenderer look like the image (so I don't have to create a SpriteBatch of different-colored circles...).

Answer 1

Here is really simple way to achieve smooth & well-looking shapes without using a texture and SpriteBatch.

All you have to do is to render couple of shapes with slightly larger size and lower alpha channel along with the first one.

The more passes the better result, but, of course, consider ppi of your screen.

...
float alphaMultiplier = 0.5f; //you may play with different coefficients
float radiusStep = radius/200;
int sampleRate = 3;
...

//do not forget to enable blending
Gdx.gl.glEnable(GL20.GL_BLEND);
Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);

shapeRenderer.begin(ShapeType.Filled);

//first rendering
shapeRenderer.setColor(r, g, b, a);
shapeRenderer.circle(x, y, radius);

//additional renderings
for(int i=0; i<sampleRate; i++) {
    a *= alphaMultiplier;
    radius += radiusStep;
    shapeRenderer.setColor(r, g, b, a);
    shapeRenderer.circle(x, y, radius);
}

shapeRenderer.end();
...

Here is a screenshot of what can you achieve.

Answer 2

If you're not teetering on the edge of losing frames, you can enable antialiasing in your launcher. You can increase the sample count for better results, but it's really diminishing returns.

LWJGL3 : config.setBackBufferConfig(8, 8, 8, 8, 16, 0, 2);
LWJGL2 : config.samples = 2;
GWT    : config.antialiasing = true;
Android: config.numSamples = 2;
iOS    : config.multisample = GLKViewDrawableMultisample._4X;