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.
Leave Your Comments...