移相器：淡入黑色反应，难以重复事件-解网

问：

我正在尝试在我的游戏中添加淡入黑色事件。在触发某个对话后触发，导致屏幕淡入黑色，然后切换到另一个场景。我首先创建了一个覆盖整个屏幕的黑色大精灵，并将其 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，采用街机物理。

定时不透明度步器-框架移相器JS

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('space');
    
    // Game Object to fade
    this.add.rectangle(268, 91, 200, 50, 0xffffff);
    this.blackFade = this.add.rectangle(268, 91, 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>

更新：

有几种方法可以让黑屏徘徊，但简单的方法是简单地增加补间的和/或值。该值将durationalphaalpha

小淡出和徘徊演示：

将 alpha 设置为 2 这意味着，大约 ~3000 毫秒的补间持续时间的一半屏幕将是黑色的。如果您需要较少，我们可以调整 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('space');
    
    // Game Object to fade
    this.add.rectangle(268, 91, 200, 50, 0xffffff);
    this.blackFade1 = this.add.rectangle(218, 91, 100, 50, 0);
    this.blackFade1.setAlpha(0);
    
    this.blackFade2 = this.add.rectangle(318, 91, 100, 50, 0);
    this.blackFade2.setAlpha(0);
}

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

或者：只需从 onComplete 回调中调用计时器即可。

移相器：淡入黑色反应，难以重复事件

Phaser Making a fade to black reaction, having trouble with repeating events

评论

评论