LIBGdx – I get gray pixels in a sprite when saving as PNG

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

Answer

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.