切换场景

当你的游戏发展到一定规模时，你会想要开始在不同的场景间切换。这可能是从介绍或菜单切换到游戏中，或者从一个关卡切换到另一个。

这里最重要的函数是engine.loadMainScene()，它将使用你传递的.bin文件名或URL替换当前场景并进行加载。

以下是一个示例组件，它在一定时间后切换到另一个场景：

import {Component, Property} from '@wonderlandengine/api';

export class LoadAfterDelay extends Component {
    static TypeName = 'load-after-delay';
    static Properties = {
        sceneFile: Property.string("AnotherScene.bin"),
        delaySeconds: Property.float(10),
    };

    start() {
        setTimeout(() => {
            this.engine.loadMainScene({ file: this.sceneFile });
        }, this.delaySeconds*1000);
    }
});

预加载场景

虽然当前场景在加载下一个场景时会继续运行，但从加载开始到用户看到下一个场景之间仍会有延迟。

为了减少这种延迟，你可以在index.html的<head>中放置以下HTML标签：

<link rel="preload" href="Next.bin" as="fetch" crossorigin async />
<link rel="preload" href="Last.bin" as="fetch" crossorigin async />

你也可以通过JavaScript动态添加这些标签。

注意事项

加载一个场景不会自动清除事件监听器，这包括DOM元素上的事件监听器和添加到发射器的回调。你需要负责移除事件监听器。最佳实践是在组件的onDeactivate中完成此操作。

onDeactivate在onDestroy之前被调用。两者在场景卸载时都会被调用。

  keyUpHandler = e => { /* ... */ };

  onActivate() { /* 或 start() */
    this.engine.canvas.addEventListener('keyup', this.keyUpHandler);
  }

  onDeactivate() {
      /* 移除监听器以便重新加载场景，否则按键会被多次处理或在下一个场景中被处理 */
      this.engine.canvas.removeEventListener('keyup', keyUpHandler);
  }