Multiple masks

[liangchunn]

Hey, I am trying to recreate the game Dungeon Crawler but not in a tiled map way, but I’m having difficulties trying to mask a grid with another object which is also masked.

I have three layers:

1. Grid (Geometry)
2. Ray casting layer (Geometry, yellow coloured polygon on the first image)
3. Gradient alpha mask (Bitmap)

Right now I have this:
Layer 3’s mask is set to a GeometryMask of layer 2 -> FOV layer (As seen in the second image)

How do I use this resulting masked bitmap to mask the grid?

[samme]

I think you can’t chain masks together. Maybe draw the rays (Graphics) and gradient (image) to a render texture then create a bitmap mask from the render texture.

[liangchunn]

Thank you for the suggestion of using RenderTexture, that was a right step in the direction of making it work!

Unfortunately, trying to render the gradient mask (which is masked by the ray polygon) didn’t work. I’m not sure how to approach this.

Here’s how it looks like:

And some code snippets
create() function:

const grid = this.add.grid(
  0,
  0,
  800 * 2,
  600 * 2,
  50,
  50,
  0xffffff,
  1,
  0x000000,
  1
)
grid.setOrigin(0, 0)


// make lightGraphics and masks
this.lightGraphics = this.make.graphics({}, false)
this.mask = this.make.image(
  {
    key: 'mask',
    x: 0,
    y: 0,
    scale: 4,
  },
  false
)
// set mask's mask to lightGraphics
this.mask.setMask(this.lightGraphics.createGeometryMask())
// create RT
this.rt = this.add.renderTexture(0, 0, 800 * 2, 600 * 2)

update() function:

// update mask position
this.mask.setX(this.square.x)
this.mask.setY(this.square.y)

// lightGraphics stuff
this.lightGraphics.clear()
this.lightGraphics.fillStyle(0xfff000, 1)
this.lightGraphics.beginPath()
// this.lightGraphics.moveTo()
// this.lightGraphics.lineTo()
this.lightGraphics.closePath()
this.lightGraphics.fillPath()

// clear RT and draw mask
this.rt.clear()
this.rt.draw(this.mask) // <<< this draws the image, not the masked result

[samme]

I was thinking the render texture should be the only mask in the scene, but now I see that you still have to clip the gradient somehow when drawing it to the render texture.

With the Canvas renderer, you can do this with blend modes SOURCE_IN or DESTINATION_IN.

With WebGL, there is erase() but I think you would have to invert the gradient to erase with it.

// create()
this.rt = this.add.renderTexture(0, 0, 800 * 2, 600 * 2);
this.rtMask = this.rt.createBitmapMask();
grid.setMask(this.rtMask);

[liangchunn]

Thanks samme! I ended up drawing the inverse of of light polygon in another render texture, and drawing that into the existing render texture so that it covers up the remaining white spaces of the masked rays. (Instead of inverting the gradient)

[samme]

How did you invert the polygon?