title: How to generate a transparent PNG image with LibGDX?
body: <p>There's an entity of my LibGDX game I would like to render to a PNG. So I made a small tool that is a LibGDX app to display that entity and it takes a screenshot on F5. The goal of that app is only to generate the PNG.</p>
  
  <pre><code>camera.update();
  
  Gdx.gl.glClearColor(0, 0, 0, 0);
  Gdx.gl.glClear(GL_COLOR_BUFFER_BIT);
  
  batch.setProjectionMatrix(camera.combined);
  batch.begin();
  
  animation.update(Gdx.graphics.getDeltaTime() * 1000);
  animation.draw(batch);
  
  batch.end();
  
  if(exporting)
      // export...
  </code></pre>
  
  <p>From that <a href="https://github.com/libgdx/libgdx/wiki/Taking-a-Screenshot" rel="nofollow noreferrer">wiki page</a> I found out how to make a screenshot and by removing the for loop, I was able to get a screenshot that doesn't replace transparent pixels by black pixels. </p>
  
  <pre><code>byte[] pixels = ScreenUtils.getFrameBufferPixels(0, 0, Gdx.graphics.getBackBufferWidth(), Gdx.graphics.getBackBufferHeight(), true);
  
  Pixmap pixmap = new Pixmap(Gdx.graphics.getBackBufferWidth(), Gdx.graphics.getBackBufferHeight(), Pixmap.Format.RGBA8888);
  BufferUtils.copy(pixels, 0, pixmap.getPixels(), pixels.length);
  PixmapIO.writePNG(Gdx.files.external("mypixmap.png"), pixmap);
  pixmap.dispose();
  </code></pre>
  
  <p>It works well for the edges of the entity but not for the multiple parts inside.</p>
  
  <p>Edges: (perfect)</p>
  
  <p><a href="https://i.stack.imgur.com/iygeFm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iygeFm.png" alt="Edges"></a></p>
  
  <p>Inside: (should not be transparent)</p>
  
  <p><a href="https://i.stack.imgur.com/UWI1Am.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UWI1Am.png" alt="Inside"></a></p>
  
  <p>So I started playing with blending to fix that.
  With </p>
  
  <pre><code>batch.enableBlending();
  batch.setBlendFunction(
              exporting ? GL20.GL_ONE : GL20.GL_SRC_ALPHA, // exporting is set to true on the frame where the screenshot is taken
              GL20.GL_ONE_MINUS_SRC_ALPHA);
  </code></pre>
  
  <p>This improved it a bit:</p>
  
  <p><a href="https://i.stack.imgur.com/vL7Rqm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vL7Rqm.png" alt="Inside working"></a></p>
  
  <p>But with images like glasses that are supposed to be transparent, it's opaque:</p>
  
  <p><a href="https://i.stack.imgur.com/qyOsem.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qyOsem.png" alt="Opaque glasses"></a></p>
  
  <p>Instead of:</p>
  
  <p><a href="https://i.stack.imgur.com/gsEfSm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gsEfSm.png" alt="Transparent glasses"></a></p>
  
  <p>Any idea of what I should do to fix this? What I want is pretty standard, a transparent background with semi transparent images on top of it. I want it to behave just like a regular image software would with layers (like GIMP).</p>