Photoshop Question posted in
The official user guide can be found here.

ShapeRenderer produces pixelated shapes using LibGDX – Photoshop

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:

enter image description here

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…).

Tags:

3

Answers


  1. 0

    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.

    anti-aliased image

    aliased image

    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).

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search