See Through Walls Phaser 3

Phaser 3
1

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!

2

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

3

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
Screen Shot 03-09-22 at 11.44 AM 001

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

4

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

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

image
image800×652 86.9 KB

here some code snipped:

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 :slight_smile: