LIBGdx – 当将精灵另存为PNG时,我得到了带有灰色像素的精灵。

huangapple go评论81阅读模式
英文:

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.

Sprites

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

以下是翻译好的内容:

  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,勾选“从透明像素保存颜色值”的选项。
英文:

There was several issues and we found the solution together on Discord, so to sum things up to others :

  1. Blending function that preserve alpha : spriteBatch.setBlendFunctionSeparate(GL_ONE, GL20.GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ZERO)
  2. Clearing framebuffer before drawing : glClearColor(0,0,0,0); glClear(GL20.GL_COLOR_BUFFER_BIT)
  3. 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.

huangapple
  • 本文由 发表于 2020年10月5日 23:39:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/64211859.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定