[SOLVED] Fade in an image from black

Phaser 3
1

I’m making a game, where if a player runs out of health, a game over screen appears. I have created a game over scene, but I would like the image to fade in from black. I used to do this using tweens in Phaser 2 but now I’m not entirely sure what to use with Phaser 3. I will be using the same game over screen for other levels too, so just overlapping the image over the level is not my desired effect.

Here’s my code for the game over scene:

//GameOver.js
class GameOver extends Phaser.Scene {
	constructor() {
		super("gameOver");
	}

	create() {
		//background
		this.gameOverBg = this.add.image(0,0,"gameOver").setOrigin(0,0).setInteractive();
		this.gameOverBg.on('pointerdown', function (event) {
			console.log("Game Over to Hi Scores");
			this.scene.start('gameTitle');
      }, this);
    //your score text
	}

	update() {
		//fade in tween here?
	}
}
2

Hey PandaJam,
I would suggest using a tween and maybe a static method to create the gameOver overlay? You could use a whole new scene, but if you’re only showing a high-score list and some text, I feel as though it’s not overly necessary. Creating a static function would also allow you to easily port this over to a new project without including it into your scenes queue.

class GameOver
{
    /**
     * @param {Phaser.Scene} scene 
     * @returns {Phaser.GameObjects.Container}
     */
    static ShowEndScreen(scene, sceneToLoad)
    {
        let gameOverBg = this.add.image(0,0,"gameOver").setOrigin(0,0).setInteractive();
		gameOverBg.on('pointerdown', function (event) {
			console.log("Game Over to Hi Scores");
			this.scene.start(sceneToLoad);
        }, this);

        let endScreen = scene.add.container(0, 0, gameOverBg).setDepth(Number.MAX_VALUE);
        endScreen.alpha = 0;
        scene.tweens.add({
            targets: endScreen,
            duration: 500,
            alpha: 1
        });

        return endScreen;
    }
}

Then in your code somewhere you could just do:
GameOver.ShowEndScreen(this, 'gameTitle');

3

Thank you! That’s an interesting solution. I’ll try it and get back to the thread with my findings :slight_smile:

4

Hi ThePandaJam,

You could possibly also use a camera fade like in this example.
https://labs.phaser.io/view.html?src=src\camera\fade.js

Hope this helps :slight_smile:

5

You may want to use camera’s fadeIn and fadeOut methods, as shown in this example