相位器3:为什么我的this.camera.main.fadeOut效果没有立即开始?

Question

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

我正在使用重叠检查来查看玩家是否正在触摸目标，然后我有一个对"touchGoal"函数的回调。根据文档，我认为这是正确的方法，但也许我错过了一些东西？

这是我的重叠检查：

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);
});
}

我还创建了一个代码笔，以便您可以看到它的实际效果： 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);
});
}
}

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