Using filledcircle and pixmap in libgdx

Question

I am using Libgdx. I want to simulate fog in my game using pixmap, but I have a problem during generating the "fogless" circle. First, I make a pixmap, filled with black (it is transparent a little bit). After filling I want to draw a filled circle onto it, but the result is not that I expected.

this.pixmap = new Pixmap(640, 640, Format.LuminanceAlpha);
Pixmap.setBlending(Blending.None); // disable Blending
this.pixmap.setColor(0, 0, 0, 0.9f);
this.pixmap.fill();
//this.pixmap.setColor(0, 0, 0, 0);
this.pixmap.fillCircle(200, 200, 100);
this.pixmapTexture = new Texture(pixmap, Format.LuminanceAlpha, false);

In the procedure render()

public void render() {
  mapRenderer.render();
  batch.begin();
  batch.draw(pixmapTexture, 0, 0);
  batch.end();
}

If I use Format. Alpha when creating the Pixmap and Texture, I neither see the more translucent circle.

Here is my problem:

enter image description here

Problem

Could somebody help me? What should I do, what should I init before to draw a full transparent circle? Thanks.

UPDATE I have found the answer for my problem. I have to disable blending to avoid the problem.

Now my code:

FrameBuffer fbo = new FrameBuffer(Format.RGBA8888, 620, 620, false);
Texture tex = EnemyOnRadar.assetManager.get("data/sugar.png", Texture.class);

batch.begin();
// others
batch.end();

fbo.begin();
batch.setColor(1,1,1,0.7f);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
batch.draw( tex, 100, 100);
batch.end();
fbo.end();

But I don't see the circle (it's a png image, represents transparent bg, white filled circle).

I updated my answer check it out. IF you have any further questions to this, please update this question instead of posting an answer. If you try the code i give you, but it does not work update the question, paste the code and let me know what the output is. So i and others can help you. Thanks — Robert P
How are you doing this now? Are you using PixMap with blending disabled? Or are you using the FBO solution i suggested? — Robert P

Robert P Robert P · Accepted Answer · 2014-02-06T13:28:33

I am not sure if this works for you but i just share it: You could use FrameBuffers and do the following:

Draw everything you want to draw on screen.
End your SpriteBatch and begin your FrameBuffer, begin the SpriteBatch again.
Draw the Fog, which fills the whole "screen" (FrameBuffer) with a black, non transparent color.
Draw the "Fogless" circle as a white circle, at the position you want to delete the fog.
Set the FrameBuffers alpha channel (transparancy) to 0.7 or something like that.
End the SpriteBatch and the FrameBuffer to draw it to screen.

What happens? You draw the normal scene, without fog. You create a "virtual screen", fill it with black and overdraw the black with a white circle. Now you set a transparacy to this "virtual screen" and overdraw your real screen with it. The part of the screen, which is under the white circle seems to be bright, while the black rest makes your scene darker. Something to read: 2D Fire effect with libgdx, more or less the same as fog. My question to this: Libgdx lighting without box2d

EDIT: another Tutorial.

Let me know if it helps!

EDIT: Some Pseudocode: In create:

fbo = new FrameBuffer(Format.RGBA8888, width, height, false);

In render:

fbo.begin();
glClearColor(0f, 0f, 0f, 1f);    // Set the clear color to black, non transparent
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);  // Clear the "virtual screen" with the clear color
spriteBatch.begin();  // Start the SpriteBatch
// Draw the filled circles somehow // Draw your Circle Texture as a white, not transparent Texture
spriteBatch.end(); // End the spritebatch
fbo.end(); // End the FrameBuffer
spriteBatch.begin();   // start the spriteBatch, which now draws to the real screen
// draw your textures, sprites, whatever
spriteBatch.setColor(1f, 1f, 1f, 0.7f); // Sets a global alpha to the SpriteBatch, maybe it applies alo to the stuff you have allready drawn. If so just call spriteBatch.end() before and than spriteBatch.begin() again.
spriteBatch.draw(fbo, 0, 0);  // draws the FBO to the screen.
spriteBatch.end();

tell me if it works

Using filledcircle and pixmap in libgdx

1 Answers