LIBGdx - 保存為 PNG 時，精靈中出現灰色像素

Question

我一直在嘗試縮小精靈並將其保存到 android 本地商店以備后用，但我嘗試過的一切總是導致精靈周圍出現灰色邊緣。

精靈

如您所見，精靈批處理混合功能設置為GL20.GL_ONE 、 GL20.GL_ONE_MINUS_SRC_ALPHA並且渲染到屏幕看起來很好。 只有在寫入 PNG 時，我才會得到暗邊。 我已經嘗試將 Pixmap 混合設置為無並使用原始圖像的預乘 alpha 版本（這就是為什么有兩個圖像），但是當我查看模擬器的文件系統時，我得到了相同的結果。 這是我的代碼：

private AssetManager assetManager = new AssetManager();
private TextureLoader.TextureParameter textureParameter = new TextureLoader.TextureParameter();
private SpriteBatch spriteBatch;
private FrameBuffer frameBuffer;

@Override
public void create()
{
    Matrix4 matrix4 = new Matrix4();
    this.spriteBatch = new SpriteBatch();
    this.spriteBatch.setProjectionMatrix(matrix4.setToOrtho2D(0, 0, 96, 48));
    this.spriteBatch.setBlendFunction(GL20.GL_ONE, GL20.GL_ONE_MINUS_SRC_ALPHA);
    this.frameBuffer = new FrameBuffer(Pixmap.Format.RGBA8888, 96, 48, false);

    this.textureParameter.genMipMaps = true;
    this.assetManager.load("sprite.png", Texture.class, textureParameter);
    this.assetManager.load("sprite_pre_multiplied.png", Texture.class, textureParameter);
    this.assetManager.finishLoading();
    Texture texture = this.assetManager.get("sprite.png");
    Texture texture_pre = this.assetManager.get("sprite_pre_multiplied.png");
    texture.setFilter(Texture.TextureFilter.MipMapLinearNearest, Texture.TextureFilter.Linear);
    texture_pre.setFilter(Texture.TextureFilter.MipMapLinearNearest, Texture.TextureFilter.Linear);

    this.frameBuffer.begin();
    this.spriteBatch.begin();
    this.spriteBatch.draw(texture, 0, 0, 48, 48, 0, 0, 132, 132, false, false);
    this.spriteBatch.draw(texture_pre, 48, 0, 48, 48, 0, 0, 132, 132, false, false);
    this.spriteBatch.end();
    Pixmap pixmap = ScreenUtils.getFrameBufferPixmap(0, 0, 96, 48);
    pixmap.setBlending(Pixmap.Blending.None);
    this.frameBuffer.end();
    PixmapIO.writePNG(Gdx.files.local("sprites.png"), pixmap);
    this.spriteBatch.setProjectionMatrix(matrix4.setToOrtho2D(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight()));
}

@Override
public void render()
{
    Gdx.gl.glClearColor(1, 1, 1, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    this.spriteBatch.begin();
    this.spriteBatch.draw(this.frameBuffer.getColorBufferTexture(), (Gdx.graphics.getWidth() - 96)/2f, Gdx.graphics.getHeight()/2f, 96, 48, 0, 0, 96, 48, false, false);
    this.spriteBatch.end();
}

Answer 1

有幾個問題，我們一起在 Discord 上找到了解決方案，總結一下：

1. 保留 alpha 的混合函數： spriteBatch.setBlendFunctionSeparate(GL_ONE, GL20.GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ZERO)
2. 繪制前清除幀緩沖區：glClearColor(0,0,0,0); glClear(GL20.GL_COLOR_BUFFER_BIT)
3. 原始 PNG 文件在透明和半透明像素上具有黑色 RGB，而不是邊緣精靈顏色。

對於第三點，它必須像這樣從 Gimp 重新導出：

• 添加帶有“傳輸 Alpha 通道”選項的遮罩層
• 用精靈顏色填充 RGB（固定邊緣顏色）
• 使用“從透明像素保存顏色值”選項導出為 PNG。