Phaser 做出淡入黑色反应，无法重复事件

Question

我正在尝试向我的游戏添加淡入黑色事件。它在触发某个对话后触发，并导致屏幕淡入黑色，然后切换到另一个场景。我首先创建一个覆盖整个屏幕的大黑色精灵，并将其 alpha 设置为 0。以下是使淡入淡出起作用的代码：

            this.line1.setText('Scally: Its been a long day Peef. Ready to hit the hay?');
            this.line2.setText('Press A for: Yeah I am ready to sleep. or Press D for: Naw, I am gonna stay up a bit more.');
            this.time.addEvent({
                delay: 2500, 
                callback: () => this.blackFade.setAlpha(0.2),
                callback: () => console.log("1"),
                callbackScope: this, 
            });
            this.time.addEvent({
                delay: 4500, 
                callback: () => this.blackFade.setAlpha(0.4),
                callback: () => console.log("2"),
                callbackScope: this, 
            });
            this.time.addEvent({
                delay: 6500, 
                callback: () => this.blackFade.setAlpha(0.6),
                callback: () => console.log("3"),
                callbackScope: this, 
            });
            this.time.addEvent({
                delay: 8500, 
                callback: () => this.blackFade.setAlpha(0.8),
                callback: () => console.log("4"),
                callbackScope: this, 
            });
            this.time.addEvent({
                delay: 10500, 
                callback: () => this.blackFade.setAlpha(1),
                callback: () => console.log("5"),
                callbackScope: this, 
            });
            this.time.addEvent({
                delay: 12500, 
                callback: () => this.scene.switch('bedRoomDay2'),
                callbackScope: this, 
            });

由于我在更新方法中有这段代码，所以我遇到了一个问题，即计时器事件被多次触发，导致屏幕在切换场景之前只会变暗一点，偶尔会出现较暗的闪烁，而不会完全变黑。有没有办法确保计时器事件只触发一次，最好不要将代码移出更新方法？

如果有帮助，我正在使用街机物理原理在 VSCode 中使用 Phaser 3。

Answer 1

那么，您需要一个辅助变量来防止多次调用，我建议使用一个简单的

timer

调用，而不是

tween

，因为补间会以平滑的方式更新

alpha

属性。

以下示例演示了两个提到的概念。

小淡出演示：

document.body.style = 'margin:0;';

var config = {
    width: 536,
    height: 183,
    scene: {
        create, 
        update,
    }
}; 

function create () {
    this.label = this.add.text(10,10, 'Use Spacebar, to Fade WhiteBox')
        .setScale(1.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});

    // Fade Status Varible Initialize
    this.isFading = false;
    this.spacebar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
    
    // Game Object to fade
    this.add.rectangle(config.width / 2, config.height / 2, 200, 50, 0xffffff)
    this.blackFade = this.add.rectangle(config.width / 2, config.height / 2, 200, 50, 0)
    this.blackFade.setAlpha(0);
}

function update(){
    // Only start fading, if fading is not taking place
    if(!this.isFading && Phaser.Input.Keyboard.JustDown(this.spacebar)){
        if(this.blackFade.alpha == 0){
            this.isFading = true;
            this.tweens.add({
                targets: this.blackFade,
                alpha: 1,
                duration: 6000,
                onComplete: () => {
                  // reset variable
                  this.isFading = false;
                  this.label.setText('Use Spacebar, to show WhiteBox');
                },
                repeat: 0,
            });
        } else {
            // fade reset only for demo
            this.blackFade.alpha = 0;
            this.label.setText('Use Spacebar, to Fade WhiteBox');
        }
    }
}

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>