Phaser 3：为什么我的 this.cameras.main.fadeOut 效果没有立即开始？

Question

我正在尝试在两个场景之间创建淡入淡出效果 out/fade，但由于某种原因，淡出效果直到玩家离开 "portkey" 后才会开始。

我正在使用重叠检查来查看玩家是否触及球门，然后我有一个 "touchGoal" 函数的回调。基于 documentation，我认为这是正确的方法，但也许我遗漏了什么？

这是我的重叠检查：

this.physics.add.overlap(this.player, this.goal, this.touchGoal, false, this);

这是回调函数：

touchGoal() {
    this.cameras.main.fadeOut(2000, 255, 255, 255, () => {
      this.cameras.main.on('camerafadeoutcomplete', () => {
        this.scene.start('scene2');
      }, this);
    });
  }

我还创建了一个 codepen，所以你可以看到它的实际效果： https://codepen.io/moorehannah/pen/bGbwOrO

另一件让我感到困惑的事情是，当我在本地运行这段代码时，当我在场景之间淡入淡出时，会出现一瞬间的黑屏。有谁知道为什么会这样？

Answer 1

文档对此不是很清楚，但是重叠回调方法（您设置正确！）在两个对象重叠时重复触发。在玩家离开目标之前，您的场景淡出不会开始，因为只要玩家和目标重叠，您的淡出就会在开始时不断重新开始。

要避免这种行为，您需要做的就是向回调方法添加一个布尔值以查看它是否已经被触发。然后，每次重叠只会导致 1 个回调触发。

在构造函数中声明您的布尔值：

constructor() {
  super('scene1');
  ...
  this.fadeTriggered = false;
}

然后将您的 touchGoal() 内容包装在布尔检查中：

touchGoal() {
  if (!this.fadeTriggered) {
    this.fadeTriggered = true;
    this.cameras.main.fadeOut(2000, 255, 255, 255, () => {
      this.cameras.main.on('camerafadeoutcomplete', () => {
        this.scene.start('scene2');
      }, this);
    });
  }
}

我没有看到场景之间的黑屏，但是看着你的代码笔（非常有帮助，感谢提供！）这可能是因为两个场景类都有单独的 preload() 方法。如果它是一款包含大量重用资产的小型游戏，我建议创建一个加载场景以在触发 Scene1 开始之前预加载所有重用资产。

Phaser 3：为什么我的 this.cameras.main.fadeOut 效果没有立即开始？

Phaser 3: Why is my this.cameras.main.fadeOut effect not starting immediately?

phaser-framework