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