Fog of War with map chunks

Phaser 3
1

Hello,

I’ve used a tutorial which describes a way to turn a map into chunks and render them on demand. This is very cool. Dynamic map loading yeah!

I’d like to introduce fog of war to my scene.
There is always one player which the fog should follow as usual.

Visually I expect an ellipse, depending in which direction the player looks, he of course can see/hear almost nothing behind his back. Everything not in the ellipse should be rendered darker. This should span chunks (tilemaps), each chunk has a tilemap and therefore it’s own layers.

I’ve read about the old phaser 2 bitmapData which does not exist in Phaser 3 (https://samme.github.io/phaser-examples-mirror/bitmapdata/fog%20of%20war.html) and a thread here (Fog of War) suggesting bitmapmask alpha, but I don’t understand how this works. Do I need to put all the chunk objects (tilemap and layers) into an container? Could anyone give an example how this would work in my case?

Thank you!

2

Take a look at this very nice post.

3

I think you could use a Container, but you don’t have to. Some options are:

  1. Mask the main camera.
  2. Mask the tilemap layer and any sprites.
  3. Use a Render Texture
  4. Use a Canvas Tetxure, which is like Phaser 2 BitmapData.

Look at the bitmap mask alpha example. Here is its “mask” image:

mask

And here’s the mask image from (1):

soft mask
soft mask800×600 34.3 KB