# See Through Walls Phaser 3

**URL:** <https://phaser.discourse.group/t/see-through-walls-phaser-3/11367>\
**Category:** Phaser 3\
**Created:** [March 8, 2022, 3:40pm UTC](https://phaser.discourse.group/t/see-through-walls-phaser-3/11367 "2022-03-08T15:40:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jamboom](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jamboom/32/6173_2.png) [@jamboom](https://phaser.discourse.group/u/jamboom)\
**Post date:** [March 8, 2022, 3:40pm UTC](https://phaser.discourse.group/t/see-through-walls-phaser-3/11367/1 "2022-03-08T15:40:16Z")

</div>

Hi there, hope you are all fine!

Since many days I’m searching for a feature in order to be able to create a “see-through wall” effect around the player.

Indeed, The game contains many roads and buildings. When the player goes behind buildings, I need to create a transparent aura around the sprite in order to see it, the same as you can see in the games fallout 1/2.

Any way to achieve this? I was thinking about shaders but was not able to find anything useful yet.

Thank you for your answer and have a great day!

---

<div class="post-metadata">

**Author:** ![mickeyren](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mickeyren/32/6264_2.png) [@mickeyren](https://phaser.discourse.group/u/mickeyren)\
**Post date:** [March 8, 2022, 9:04pm UTC](https://phaser.discourse.group/t/see-through-walls-phaser-3/11367/2 "2022-03-08T21:04:16Z")

</div>

You can change the alpha of the tile that is in front of the player - would that help?

---

<div class="post-metadata">

**Author:** ![jamboom](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jamboom/32/6173_2.png) [@jamboom](https://phaser.discourse.group/u/jamboom)\
**Post date:** [March 9, 2022, 10:45am UTC](https://phaser.discourse.group/t/see-through-walls-phaser-3/11367/3 "2022-03-09T10:45:55Z")

</div>

That could be the last choice solution, as many assets would be in front of the player at once.  
Here are some screenshots :  
 ![Screen Shot 03-09-22 at 11.44 AM](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/9d4d118457ba48462a757ac5d0d5947f37a39b4a.png)  
 ![Screen Shot 03-09-22 at 11.44 AM 001](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/1/1c35af398e53bdd9b1b2c9bdd5aca96c924193c2.png)

Shader would be a more optimized solution here, isn’t it?

---

<div class="post-metadata">

**Author:** ![Puccini](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/puccini/32/4984_2.png) [@Puccini](https://phaser.discourse.group/u/Puccini)\
**Post date:** [March 11, 2022, 10:48am UTC](https://phaser.discourse.group/t/see-through-walls-phaser-3/11367/4 "2022-03-11T10:48:36Z")

</div>

Maybe u could use some sort of mask object around the player.  
Showing a transparent sphere where he is like in this demo:

> **[Phaser - Examples - Image Mask](https://phaser.io/examples/v3/view/display/masks/geometry-mask/image-mask)**
>
> Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

Im using this for some sort of “fog-of-war” in my game 🙂  
there is a sphere around the player that lights up the environment, rest is dark:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/fa021fbb082685d4df78e649dda6c53821b727da.jpeg)

here some code snipped:

```javascript
this.fogOfWar = this.make.renderTexture({
            width,
            height
        }, true);
        this.fogOfWar.fill(0x000000, 0.9)
            .setScrollFactor( 0 )
            .setDepth( globals.DEPTH.FOW )
        this.fogOfWarSpotlight = this.make.sprite({
            x: width/2,
            y: height/2,
            key: 'fogofwar',
            add: false
        });
        this.fogOfWarSpotlight.setScrollFactor( 0 )
            .setScale( 3 );
        this.fogOfWar.mask = new Phaser.Display.Masks.BitmapMask(this, this.fogOfWarSpotlight );
        this.fogOfWar.mask.invertAlpha = true;

```

maybe u can put this on your objects to make them transparent round the player 🙂