Fog of War multilayer map (using setDepth() )

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


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

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

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

// set a dark blue tint and set Depth over last layer (Prevent other layers to be over the fog layer.)

// 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;



Hope get some ideas.

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

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

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

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!