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

The difference is anti-aliasing that Photoshop applies to the image it generates. If you zoom in on the edges of the two circles, you'll see the anti-aliased one has some semi-black pixels around the edge, where the ShapeRenderer generated circle just shows pixels entirely on or off.

The Libgdx ShapeRenderer was designed for being a quick and simple way to get debugging shapes on the screen, it does not support anti-aliasing. The easiest way to get consistent anti-aliased rendering it to use a texture. (Its also possible with an OpenGL shader.)

That said, you do not have to create different sprites just to render different colored circles. Just use a white circle with a transparent background, and then render it with a color. (Assuming you want a variety of solid-colored circles).