Trying to Fade Out Screen to Black Using Tween

Phaser 3
1

Hi,

I am trying to fade out the game screen to black when the player dies. I am drawing a black rectangle to fill the screen and then I want to destroy the tween and black rectangle once the player respawns.

This is the code I have, but nothing happens I think it has something to do with the direction it is going in, maybe? I don’t understand exactly how it is done from what I am reading online. I have set the alpha of the rectangle to 0.5 for demonstration. If I change the alpha value to 1 in the tween then it goes from half transparent to completely transparent which isn’t what I want. I want it to make the screen back.

Here is the code:

  //Fade out screen
  var blackRectangle = this.add.graphics({ fillStyle: { color: 0x000000, alpha:0.5 } });
  var coverScreen = new Phaser.Geom.Rectangle(0, 0, this.map.widthInPixels,this.map.heightInPixels );
  blackRectangle.fillRectShape(coverScreen);
  this.tweens.add({
      targets: blackRectangle,
      duration: 1000,
      delay: 0,
      alpha: 0,
      repeat: 0,
      yoyo: false
  });

Can anyone help?

2

Hi, it seems blackRectangle need to be created with alpha 1 to works.
So i just put alpha to 0 just after. (I changed the color to red for debugging)

var blackRectangle = this.add.graphics({ fillStyle: { color: 0xFF0000, alpha: 1 } });
blackRectangle.alpha = 0;
var coverScreen = new Phaser.Geom.Rectangle(0, 0, 400, 256 );
blackRectangle.fillRectShape(coverScreen);
this.tweens.add({
  targets: blackRectangle,
  duration: 1000,
  delay: 0,
  alpha: 1,
  repeat: 0,
  yoyo: false,
  onComplete: () => {
    blackRectangle.alpha = 0
    }
});
3

This should work:

var blackRectangle = this.add.graphics({ fillStyle: { color: 0x000000 } })
  .setAlpha(0);
var coverScreen = new Phaser.Geom.Rectangle(0, 0, 400, 300);

blackRectangle.fillRectShape(coverScreen);

this.tweens.add({
  targets: blackRectangle,
  alpha: 1
});
4

Thanks, this works. When I destroy the blackRectangle, does it automatically destroy the tween or do I need to do something else?

5

You don’t need to destroy the tween, it will get removed automatically when it completes.

6

Thanks