Removing blur effect from another scene

Phaser 3
1

My code has a blur effect that I create on the game scene when the player launches the shop scene, which appears in front of the aforementioned game scene ( slightly smaller for visual appeal ).

this.scene.pause("game");

let effect = this.cameras.main.postFX.addBlur();

this.scene.launch("shop");

This works. However, the blur should stop when the player leaves the shop scene.

The ‘leave’ event:

xButton.on(

        "pointerdown",

function(pointer, localX, localY, event) {

this.scene.resume('game')

this.scene.stop('shop')

        },

this

    )

What can I add to remove the blur? The game resumes as usual.

2

One option is you could listen for the scene resume event in your game scene. This event should be fired once you call the resume method during your leave event logic above. In the event listener for the resume it, you could clear the post fx. Example for the event:

this.events.on(Phaser.Scenes.Events.RESUME, () => { console.log('scene resumed'); }, this);

3

right. would I then just set the blur effect to 0? not sure how to actually remove an effect :sweat_smile:

4

To remove the effect, if you call the remove method on the postFx instance for the camera, you can pass in the effect you want to remove. Example:

this.cameras.main.postFX.remove(effectToRemove);

The effectToRemove would be the effect instance from your code here:

let effect = this.cameras.main.postFX.addBlur();

If you have no other effects on the camera, you can also you the clear method to remove all effects at once, and this way you won’t need to store a reference to the original blur effect. https://docs.phaser.io/phaser/concepts/fx#remove-all-effects

1 Like
5

great, thanks!

1 Like