英文:
LIBGdx - I get gray pixels in a sprite when saving as PNG
问题
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();
}
英文:
I've been trying to scale down a sprite and save it to the android local store for later use, but everything I've tried always results in a grey edge around the sprite.
As you can see, the sprite batch blend function is set to GL20.GL_ONE
, GL20.GL_ONE_MINUS_SRC_ALPHA
and rendering to the screen look fine. It's only when the PNG is written that I get the dark edge. I've tried setting Pixmap blending to none and using a premultiplied alpha version of the original image (that's why there are two images), but when I look in the emulator's file system I get the same result. Here's my code:
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();
}
答案1
得分: 1
以下是翻译好的内容:
- 保留 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 文件在透明部分和半透明像素上有黑色 RGB,而不是边缘精灵的颜色。
对于第三点,需要从 Gimp 中重新导出,按照以下方式操作:
- 添加一个具有“传输 alpha 通道”选项的蒙版图层
- 填充 RGB 以匹配精灵颜色(修复边缘颜色)
- 导出为 PNG,勾选“从透明像素保存颜色值”的选项。
英文:
There was several issues and we found the solution together on Discord, so to sum things up to others :
- Blending function that preserve alpha : spriteBatch.setBlendFunctionSeparate(GL_ONE, GL20.GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ZERO)
- Clearing framebuffer before drawing : glClearColor(0,0,0,0); glClear(GL20.GL_COLOR_BUFFER_BIT)
- The Original PNG file has black RGB on transparent and half-transparent pixels instead of edges sprite color.
For the 3rd point, it has to be re-exported from Gimp like this :
- add a mask layer with "transfer alpha channel" option
- fill RGB with the sprite color (fixing edges color)
- export as PNG with "save color values from transparent pixels" option on.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论