# Use multiple masks on a render texture? **URL:** \ **Category:** Phaser 3\ **Created:** [January 6, 2021, 8:41am UTC](https://phaser.discourse.group/t/use-multiple-masks-on-a-render-texture/8578 "2021-01-06T08:41:20Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Milrud](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@Milrud](https://phaser.discourse.group/u/Milrud)\ **Post date:** [January 6, 2021, 8:41am UTC](https://phaser.discourse.group/t/use-multiple-masks-on-a-render-texture/8578/1 "2021-01-06T08:41:20Z")
Hello everybody, and a happy new year! With the help of [this tutorial](https://blog.ourcade.co/posts/2020/phaser3-fog-of-war-field-of-view-roguelike/) I use a render texture to simulate a fog of war **which also hides the layers below** (I highlight this because this is the reason I don’t simply use WebGL Light2D pipeline), and a bitmap mask to simulate a light source. Here is a screenshot to give an idea of the result (you can see circled in red a character that is hard to see because he is on the edge of the light source. If he were outside the light, he would be invisible) : > **screenshot** > > ![game](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/2/27820c7077f4165c88f988cd89fefd3b39439a5f.jpeg) > > (rpg maker XP assets FTW 🙃) Here is the gist of the code I use: > **code** > > ``` > // the Fog of War render texture > const FoW_texture = this.add.renderTexture( 0, 0, 2000, 2000 ); > FoW_texture.fill( 0x000000, 1 ); > > // the ground layer > const ground_layer = map.createLayer( "ground", tileset ); > > // the render texture replicates the ground layer to overlay it > FoW_texture.draw( ground_layer ); > > // color the render texture to simulate darkness > FoW_texture.setTint( 0x0a2948 ); > > // creating a "vision mask" > const vision_mask = this.make.image({ > x: 0, > y: 0, > key: 'vision_mask', > add: false > }); > > // adding the vision mask to the render texture > FoW_texture.mask = new Phaser.Display.Masks.BitmapMask( this, vision_mask ); > > ``` I’m very happy with the result, but I was wondering now **how to simulate other light sources** , since the render texture can only have one mask. I see 3 possible ways, but they all come with drawbacks I cannot solve : - Instead of having one single large render texture for the whole map, I could have several render textures for smaller “regions” of the subdivided map, allowing me to use more than one mask. But then how to manage multiple light sources in a same “region”? - I could use in complement with the render texture the Light2D pipeline of WebGL, but it would be hidden under the render texture (or lighting the render texture and its blueish tint which would look weird. - finally I could completely change the way I’m doing fog of war and only use Light2D (where it is easy to have several light sources) and change the opacity of sprites according to the distance of the light sources to simulate the fog of war effect. If this is my last solution I will give it a try but it feels a bit over complicated since the render texture and mask worked so well. I thank anybody taking the time to read this message and wish to all a very happy new year! Cheers 🙂 ---
**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:** [January 6, 2021, 6:54pm UTC](https://phaser.discourse.group/t/use-multiple-masks-on-a-render-texture/8578/2 "2021-01-06T18:54:49Z")
I think you would use a second render texture as the bitmap mask source and then draw `vision_mask` (or other mask textures) on it. ---
**Author:** ![Milrud](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@Milrud](https://phaser.discourse.group/u/Milrud)\ **Post date:** [January 6, 2021, 8:34pm UTC](https://phaser.discourse.group/t/use-multiple-masks-on-a-render-texture/8578/3 "2021-01-06T20:34:11Z")
Wow I actually never thought of using a render texture to be another render texture’s mask… I’ll need a few hours to try this, I will edit my post to report the result. Thank you very much for your answer! ---
**Author:** ![smjn](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/smjn/32/2087_2.png) [@smjn](https://phaser.discourse.group/u/smjn)\ **Post date:** [January 6, 2021, 11:37pm UTC](https://phaser.discourse.group/t/use-multiple-masks-on-a-render-texture/8578/4 "2021-01-06T23:37:45Z")
You can also put images in a container and then use the container as the single mask. ---
**Author:** ![Milrud](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@Milrud](https://phaser.discourse.group/u/Milrud)\ **Post date:** [January 7, 2021, 10:44am UTC](https://phaser.discourse.group/t/use-multiple-masks-on-a-render-texture/8578/5 "2021-01-07T10:44:01Z")
smjn thank you so much! I ended up trying smjn’s solution and it worked wonders. I’m sure samme’s solution would work too but to be honest I’m not very comfortable with texture, so I chose to work with containers. Here are 2 screenshots of the result as a thank you: > **First implementation was a little rough around the edges:** > > ![oh_boy](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/ea63bb27bd5b1969497b73af20475bba1de71f7f.jpeg) > **But by tweaking it a bit it works really well, and adding light sources is really simple:** > > ![here_we_go](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/a/adcda9625dbfeb59f195cae3af26a8f5d452375b.jpeg) If anyone has the same problem as I have, here is what I changed from the code posted above: > **code** > > ``` > // the beginning of the code is the same as above > > // lights mask as a container for all light sources in the game > this.lights_mask = this.make.container(0, 0); > > // vision mask > const vision_mask = this.make.image({ > x: 0, > y: 0, > key: 'vision_mask', > add: false > }); > > // campfire mask > const campfire_mask = this.make.image({ > x: 200, > y: 200, > key: 'campfire_mask', > add: false, > }); > > // adding the images to the container > this.lights_mask.add( [vision_mask, campfire_mask] ); > > // now this is the important line I did not expect: > // the lights container was being drawn into the scene (even though I used "make" and not "add") > this.lights_mask.setVisible(false); > > // adding the lights mask to the render texture > FoW_texture.mask = new Phaser.Display.Masks.BitmapMask( this, this.lights_mask ); > > ``` I hope this can help others with a similar issue. Thank you again and have a great day! ---
**Author:** ![Malefikarvm](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/malefikarvm/32/8036_2.png) [@Malefikarvm](https://phaser.discourse.group/u/Malefikarvm)\ **Post date:** [February 10, 2024, 12:49am UTC](https://phaser.discourse.group/t/use-multiple-masks-on-a-render-texture/8578/6 "2024-02-10T00:49:05Z")
I know smjn solved this, but your implementation saved my ass,I was trying to extend and override whatever class `(layerMap as any).setMask` was calling, but this thread totally helped me a lot. THANK YOU!!!