How to create a 'fog of war' bitmap overlay in Android

Question

I have a simple 2D game with a handful of characters which move around the screen. I'd like to create a fog of war, whereby only the background around each character is visible.

Hopefully that's clear (not too foggy?!?!). My thoughts were to create a black bitmap, then draw a 'transparent' disk centered on each of the characters. Then I can draw the background, draw the characters and finally draw this overlay bitmap over the top.

Just not sure how to draw the 'transparent' disks on to the black bitmap.

Any ideas, or alternative designs?

Answer 1

Use Canvas.drawCircle() with a Paint object whose alpha is set to 0. Alternatively you could create a transparent circle with a Bitmap and draw it just like another bitmap. The Bitmap based circle would be more advantageous if you wanted strong control with a fade to black.

1. Create a bitmap to hold the black overlay
2. Fill bitmap with black
3. Paint a transparent circle over it of where you whant to punch holes
4. Paint the overlay over your game canvas
5. Repeat.

Answer 2

Actually, since the fog-of-war needs to be persistent, I've had to go for an opaque tiled solution, rather than a straight bitmap, as the bitmap was too large and took too long to load/save between activations.