LIBGdx - 另存为 PNG 时,我在 sprite 中得到灰色像素
LIBGdx - I get gray pixels in a sprite when saving as PNG
我一直在尝试缩小 sprite 并将其保存到 android 本地存储供以后使用,但我尝试过的所有操作总是导致 sprite 周围出现灰色边缘。
Sprites
如您所见,精灵批量混合功能设置为 GL20.GL_ONE
、GL20.GL_ONE_MINUS_SRC_ALPHA
并且渲染到屏幕看起来很好。只有在写入 PNG 时,我才会看到暗边。我已经尝试将 Pixmap 混合设置为 none 并使用原始图像的预乘 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();
}
有几个问题,我们在 Discord 上一起找到了解决方案,所以总结一下其他人:
- 保留 alpha 的混合函数:spriteBatch.setBlendFunctionSeparate(GL_ONE, GL20.GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ZERO)
- 绘制前清除帧缓冲区:glClearColor(0,0,0,0); glClear(GL20.GL_COLOR_BUFFER_BIT)
- 原始 PNG 文件在透明和 half-transparent 像素上有黑色 RGB,而不是边缘 sprite 颜色。
对于第三点,它必须是来自 Gimp 的 re-exported,如下所示:
- 使用“传输 alpha 通道”选项添加遮罩层
- 用精灵颜色填充 RGB(固定边缘颜色)
- 导出为 PNG 并启用 “从透明像素保存颜色值” 选项。
我一直在尝试缩小 sprite 并将其保存到 android 本地存储供以后使用,但我尝试过的所有操作总是导致 sprite 周围出现灰色边缘。
Sprites
如您所见,精灵批量混合功能设置为 GL20.GL_ONE
、GL20.GL_ONE_MINUS_SRC_ALPHA
并且渲染到屏幕看起来很好。只有在写入 PNG 时,我才会看到暗边。我已经尝试将 Pixmap 混合设置为 none 并使用原始图像的预乘 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();
}
有几个问题,我们在 Discord 上一起找到了解决方案,所以总结一下其他人:
- 保留 alpha 的混合函数:spriteBatch.setBlendFunctionSeparate(GL_ONE, GL20.GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ZERO)
- 绘制前清除帧缓冲区:glClearColor(0,0,0,0); glClear(GL20.GL_COLOR_BUFFER_BIT)
- 原始 PNG 文件在透明和 half-transparent 像素上有黑色 RGB,而不是边缘 sprite 颜色。
对于第三点,它必须是来自 Gimp 的 re-exported,如下所示:
- 使用“传输 alpha 通道”选项添加遮罩层
- 用精灵颜色填充 RGB(固定边缘颜色)
- 导出为 PNG 并启用 “从透明像素保存颜色值” 选项。