Phaser 3黑屏淡入事件重复触发问题求助

先修正代码基础错误 #

你当前的定时器代码存在致命问题：每个time.addEvent对象里重复定义了callback属性，JavaScript对象中重复属性会被后面的覆盖，导致setAlpha的回调完全没执行，只有console.log在运行。比如第一个定时器实际只会输出"1"，不会改变黑色精灵的透明度。

不移出update方法的解决方案：添加状态锁 #

在场景类中新增一个状态变量，用来标记淡入流程是否已触发，确保update里的代码仅执行一次：

// 在场景的create方法中初始化状态与黑色精灵
create() {
    // ...其他初始化逻辑
    this.isFading = false;
    this.blackFade = this.add.sprite(0, 0, 'blackFade').setOrigin(0, 0).setAlpha(0);
}

update() {
    // 假设触发条件是玩家按下A键选择睡觉（可替换为你的实际触发逻辑）
    const aKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
    if (this.input.keyboard.checkDown(aKey, 100) && !this.isFading) {
        this.isFading = true; // 标记为已触发，阻止后续重复执行
        
        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.');
        
        // 用Phaser Tween实现平滑淡入，比多个定时器更高效简洁
        this.tweens.add({
            targets: this.blackFade,
            alpha: 1,
            duration: 8000, // 从0到1淡入8秒，对应你原逻辑的总时长
            ease: 'Linear',
            onComplete: () => {
                this.scene.switch('bedRoomDay2');
            }
        });
    }
}

如果坚持使用多个定时器，需先修正callback重复问题，再配合状态锁控制：

update() {
    if (/* 你的触发条件 */ && !this.isFading) {
        this.isFading = true;
        
        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.');
        
        // 修正callback重复：将多个操作合并到一个回调中
        this.time.addEvent({
            delay: 2500, 
            callback: () => {
                this.blackFade.setAlpha(0.2);
                console.log("1");
            },
            callbackScope: this, 
        });
        this.time.addEvent({
            delay: 4500, 
            callback: () => {
                this.blackFade.setAlpha(0.4);
                console.log("2");
            },
            callbackScope: this, 
        });
        this.time.addEvent({
            delay: 6500, 
            callback: () => {
                this.blackFade.setAlpha(0.6);
                console.log("3");
            },
            callbackScope: this, 
        });
        this.time.addEvent({
            delay: 8500, 
            callback: () => {
                this.blackFade.setAlpha(0.8);
                console.log("4");
            },
            callbackScope: this, 
        });
        this.time.addEvent({
            delay: 10500, 
            callback: () => {
                this.blackFade.setAlpha(1);
                console.log("5");
            },
            callbackScope: this, 
        });
        this.time.addEvent({
            delay: 12500, 
            callback: () => this.scene.switch('bedRoomDay2'),
            callbackScope: this, 
        });
    }
}

核心逻辑说明 #

• 状态变量this.isFading是关键：一旦触发淡入流程就设为true，update循环后续迭代中会跳过这段代码，彻底避免重复添加定时器。
• 优先使用Phaser内置的Tween系统：它能自动处理平滑过渡，减少代码冗余，还能统一控制动画时长与缓动效果，比手动设置多个定时器更可靠。

内容的提问来源于stack exchange，提问作者EmptyStone