Fog of War multilayer map (using setDepth() )

Phaser 3
1

Hey, all good?!

I’m creating a 2d rpg with Phaser and React, and last weekend I’ve followed the tutorial (phaser3-fog-of-war-field-of-view-roguelike) to set a fow in game, but even following the tutorial I got some issues, like the mask added is like a square, not a circle as in the tutorial (is not specified if is needed a png image to be set as mask).

My question is: Is possible set this as a circle mask instead?

The layers I have with the index set on setDepth();

  • ground - setDepth: 0
  • over-ground - setDepth: 1
  • decoration - setDepth: 2
  • character - setDepth: 3
  • over-character - setDepth: 4
  • roof - setDepth: 5

CODE:

Summary 
const groundLayer = scene.mapLoader?.tilemapLayers?.find((layer) => layer?.layer?.name === 'ground');    
const width = scene.map?.width! * GRID_WIDTH;
const height = scene.map?.height! * GRID_HEIGHT;

const fowLayer = scene.make.renderTexture({      
  width,
  height
}, true)

// fill it with black and draw the floorLayer into it
fowLayer.fill(0x000000, 0.8)
fowLayer.draw(groundLayer)

// set a dark blue tint and set Depth over last layer (Prevent other layers to be over the fog layer.)
fowLayer.setTint(0x0a2948)
fowLayer.setDepth(6)

// Set a mask to turn visible the area around the player.
const fogVisionMask = scene.make.image({
  x: character.x,
  y: character.y,
  key: 'vision',
  add: false
})
fogVisionMask.scale = 2.5
 
fowLayer.mask = new Phaser.Display.Masks.BitmapMask(scene, fogVisionMask);
fowLayer.mask.invertAlpha = true;

Result:

Summary

image
image516×515 13 KB

Hope get some ideas.
Thanks.

2

A BitmapMask uses pixel alpha from an image (bitmap), so you need to change that.

Or you can switch to a GeometryMask and draw a circle.

1 Like
3

Thanks @samme, I`ll try this now, soon I update the results!!
Have a nice weekend!

Edit:
Works well @samme, thank for that!! :slight_smile:
image

Just have to work in the smothness of this haha and some other problems of the delay when move the character and the update of mask position!! But its another history hahaha

Thanks, again!