Phaser 3 Fade Camera In and Out Easy Example

Camera fading in Phaser 3 is a great way to transition between scenes in your games.

I would recommend adding the following method to a 'base scene' that all your game scenes inherit from - this way you get consistent fades between scenes.

The method takes two arguments, a boolean (true = fade in, false = fade out) and a callback function that is executed once the fade is complete.

fade (fadeIn, callbackFn) 
{
    if (fadeIn && fadeIn === true) {
        this.cameras.main.on('camerafadeincomplete', () => {
            if (callbackFn) {
                callbackFn();
            }
        }, this);

        this.cameras.main.fadeIn(GameConstants.camera.fadeSpeed);
    } else {
        this.cameras.main.on('camerafadeoutcomplete', () => {
            if (callbackFn) {
                callbackFn();
            }
        }, this);

        this.cameras.main.fadeOut(GameConstants.camera.fadeSpeed);
    }
}

And that is all there is to easily fading between game scenes in Phaser 3.  For more on Phaser 3 game development you can read my other blog articles on Phaser 3 game development.