ShapeRenderer使用LibGDX会产生像素化的形状

Question

当我使用ShapeRenderer时，它总是呈现出像素化的效果。但如果我在Photoshop中用相同的尺寸绘制形状，则非常平滑和清晰。

我的方法如下所示：

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();
    }
}

这是输出的图像:

有什么想法是为什么会发生这种情况吗？是否可能使ShapeRenderer看起来像图片一样（这样我就不必创建不同颜色圆形的SpriteBatch...）。

- user3340001

Answer 1

Photoshop应用于其生成的图像的抗锯齿与ShapeRenderer生成的圆形只显示完全打开或关闭的像素不同。如果您放大两个圆的边缘，您会发现抗锯齿的圆周围有一些半黑色像素。

Libgdx的ShapeRenderer旨在快速简便地在屏幕上获取调试形状，但不支持抗锯齿。获得一致的抗锯齿渲染的最简单方法是使用纹理。(也可以使用OpenGL着色器实现)。

话虽如此，您并不需要创建不同的精灵来渲染不同颜色的圆。只需使用带有透明背景的白色圆，然后使用颜色进行渲染即可。(假设您想要各种实心圆)。

- P.T.

---

谢谢！非常简洁易懂。我没有想到可以只使用白色圆圈来匹配我的背景，然后独立地渲染颜色。再次感谢您的帮助！ - user3340001

Answer 2

这里有一种非常简单的方法可以实现平滑、好看的形状，而不需要使用纹理和SpriteBatch。

您所要做的就是渲染几个稍大一些、透明度略低的形状，连同第一个形状一起渲染。

渲染次数越多，效果越好，但当然，也要考虑屏幕的像素密度。

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

这里是一个展示您可以达到的情况的截图。

- Zodo

Answer 3

如果你的帧率没有达到临界点，你可以在启动器中启用抗锯齿功能。你可以增加采样次数以获得更好的效果，但这只会带来递减的回报。

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;

- spacer GIF