1

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).

Brad Larson
  • 168,330
  • 45
  • 388
  • 563
user2498846
  • 23
  • 1
  • 5
  • 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 – Springrbua Feb 06 '14 at 16:58
  • another link: http://stackoverflow.com/questions/14729961/ambiguous-results-with-frame-buffers-in-libgdx – Springrbua Feb 07 '14 at 08:59
  • How are you doing this now? Are you using PixMap with blending disabled? Or are you using the FBO solution i suggested? – Springrbua Feb 20 '14 at 10:14

1 Answers1

2

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

  1. Draw everything you want to draw on screen.
  2. End your SpriteBatch and begin your FrameBuffer, begin the SpriteBatch again.
  3. Draw the Fog, which fills the whole "screen" (FrameBuffer) with a black, non transparent color.
  4. Draw the "Fogless" circle as a white circle, at the position you want to delete the fog.
  5. Set the FrameBuffers alpha channel (transparancy) to 0.7 or something like that.
  6. 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

Community
  • 1
  • 1
Springrbua
  • 8,377
  • 9
  • 48
  • 92
  • Could you write me an example code how to draw onto the FrameBuffer? I have never used it before. Btw, may I forget PixMap? – user2498846 Feb 06 '14 at 13:47
  • Actually i have to say i also never used FrameBuffer cause i am also new, but i read a lot of tutorials :P I update my answer! I don't know if it is possible with pixmap to... Lets hope that someone else has got an advice for you. – Springrbua Feb 06 '14 at 13:50
  • It isn't work. Actually if it would work and there are 2 or more circles and they are overlaping each other, then their alpha is summed. So I have no idea, what should I do. – user2498846 Feb 06 '14 at 14:22
  • Their alpha won't be summed becuase you don't set an alpha to your circles, you set it to the whole FBO. your circles should have an alpha value of 1! This line : `spriteBatch.setCOlor(1,1,1,0.7);` sets the alpha value to the spriteBAtch,whihc draws to your FBO. – Springrbua Feb 06 '14 at 14:25
  • Could you write an example code? I am confused. Can I use the PixMap or use FrameBuffer? My problem is with the unexpected lines and the merged areas, where the filled area is not transparent. – user2498846 Feb 06 '14 at 14:35
  • Try the code of my updated answer. Just comment out your PixMap stuff and write this instead. Instead of Pixmap.fillCircle() you could load a selfmade texture with transparent background and white circle on it. And have a look at the links i posted – Springrbua Feb 06 '14 at 14:39
  • I checked. It didn't work. But I will try the texture version. – user2498846 Feb 06 '14 at 14:50