# Multiple masks

**URL:** <https://phaser.discourse.group/t/multiple-masks/6385>\
**Category:** Phaser 3\
**Created:** [May 21, 2020, 1:34pm UTC](https://phaser.discourse.group/t/multiple-masks/6385 "2020-05-21T13:34:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![liangchunn](https://avatars.discourse-cdn.com/v4/letter/l/5e9695/32.png) [@liangchunn](https://phaser.discourse.group/u/liangchunn)\
**Post date:** [May 21, 2020, 1:34pm UTC](https://phaser.discourse.group/t/multiple-masks/6385/1 "2020-05-21T13:34:35Z")

</div>

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:

```javascript
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**?

 ![Screenshot 2020-05-21 at 15.32.14](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/d093c6d08d35f6c65b28577d8cc90b9115872547.jpeg)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 22, 2020, 5:10pm UTC](https://phaser.discourse.group/t/multiple-masks/6385/2 "2020-05-22T17:10:00Z")

</div>

👋

I think you can’t chain masks together. Maybe draw the rays (Graphics) and gradient (image) [to a render texture](http://phaser.io/examples/v3/view/game-objects/render-texture/graphics-to-render-texture "graphics to render texture") then create a bitmap mask from the render texture.

---

<div class="post-metadata">

**Author:** ![liangchunn](https://avatars.discourse-cdn.com/v4/letter/l/5e9695/32.png) [@liangchunn](https://phaser.discourse.group/u/liangchunn)\
**Post date:** [May 22, 2020, 8:42pm UTC](https://phaser.discourse.group/t/multiple-masks/6385/3 "2020-05-22T20:42:47Z")

</div>

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:

 ![Screenshot 2020-05-22 at 22.28.57](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/ee875b9a7a1e162ff0e5d3243be31ad40744f00a.jpeg)

And some code snippets  
`create()` function:

```javascript
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:

```javascript
// 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

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 22, 2020, 10:04pm UTC](https://phaser.discourse.group/t/multiple-masks/6385/4 "2020-05-22T22:04:59Z")

</div>

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()](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.RenderTexture.html#erase) but I think you would have to invert the gradient to erase with it.

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

```

---

<div class="post-metadata">

**Author:** ![liangchunn](https://avatars.discourse-cdn.com/v4/letter/l/5e9695/32.png) [@liangchunn](https://phaser.discourse.group/u/liangchunn)\
**Post date:** [May 23, 2020, 8:52pm UTC](https://phaser.discourse.group/t/multiple-masks/6385/5 "2020-05-23T20:52:41Z")

</div>

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)

 ![Screenshot 2020-05-23 at 22.50.28](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/e06dcf29b7dcd5680f84b9394e628e9daa9cac9d.jpeg)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 24, 2020, 1:02am UTC](https://phaser.discourse.group/t/multiple-masks/6385/6 "2020-05-24T01:02:28Z")

</div>

How did you invert the polygon?