12
\$\begingroup\$

I'm building a simple tic-tac-toe example with LibGDX. I have simple images: cross, circle and board, all pngs created with GIMP with a transparent background.

How can I render them as a Texture with transparency?

I've tried with GL10 enable feature, but it seems not to work.

\$\endgroup\$
  • \$\begingroup\$ Have you put this in your code : Gdx.gl.glClearColor(1, 1, 1, 1); Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT); \$\endgroup\$ – LeSam Dec 24 '13 at 16:35
  • \$\begingroup\$ put this in the render loop \$\endgroup\$ – LeSam Dec 24 '13 at 16:42
  • \$\begingroup\$ It should work fine (does for me). What specific problem did you run into? \$\endgroup\$ – ashes999 Dec 24 '13 at 17:41
  • \$\begingroup\$ Your statement: "I have simple images: cross, circle and board all pngs created with gimp with alpha as color." could be interpreted many different ways, from color-key transparency to pre-multiplied alpha. Can you clarify what you mean? Generally you are either going to need alpha blending (alpha transparency) or alpha testing (alpha mask); neither of these things are enabled by default and the second is not supported in modern OpenGL. \$\endgroup\$ – Andon M. Coleman Dec 24 '13 at 23:04
5
\$\begingroup\$

SpriteBatch#enableBlending

before rendering:

batch.enableBlending();
batch.begin();
//draw stuff
batch.end();
\$\endgroup\$
2
\$\begingroup\$

Create Sprite and assign Texture to it, Then use Sprite setColor to adjust its alpha, like so,

Texture yourTexture = new Texture("image.png");
sprite = new Sprite(yourTexture);
//RGBA
sprite.setColor(1, 0, 0, 0.2f);

and in render() loop use SpriteBatch

sprite.draw(spriteBatch);
\$\endgroup\$
  • \$\begingroup\$ Note that SpriteBatch uses DefaultShader, if you would like you might write your own shader to control transparency, and of course you should enable OpenGL ES 2.0 for that. \$\endgroup\$ – daniel Dec 25 '13 at 8:38
1
\$\begingroup\$

If you put

Gdx.gl.glClearColor(0, 0, 0, 1); 
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT); 

at the beginning of your render() loop is should refresh the screen with the colour black. So if any images have transparency in them it will be noticeable.

so your render() loop would possibly look like this

public void render(float delta) {
  Gdx.gl.glClearColor(0, 0, 0, 1);
  Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

  // Update logic & etc.        

  batch.begin();

  // Place your render calls
  // In this I use a Sprite object named "sprite" and all you need to do is call .draw();
  // on it and it will render at 0,0, unless told differently with .setPosition();

  sprite.draw(batch);

  batch.end();              
}
\$\endgroup\$
0
\$\begingroup\$

I tried to render a .png with transparency as well. With the basic setup (blending not activated) it didn't render properly.

I never activated blending, but I did add this:

Gdx.gl.glClear(GL20.GL_ALPHA_BITS);

My issue was the alpha was never cleared. Meaning if I rendered with 0.1 alpha, it would take 10 frames until the alpha was "stacked" back up to 1. Adding the call above cleared the alpha, just like you would clear color.

I know this is an old question, so the solutions then were different. enableBlending should still work, but I am not sure if this prevents "stacking" of alpha. Clearing the alpha bits is probably the easiest way to prevent the solid look.

As for the actual rendering, that is the same as always.

//Viewport, camera, logic, etc
batch.begin();
//draw your image(s) here
batch.end();
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.