シーンの切り替え

ゲームがある程度の規模に達すると、シーンを切り替える必要が出てきます。例えば、イントロやメニューからゲームへの切り替えや、あるレベルから別のレベルへの切り替えです。

ここで最も重要な関数は、現在のシーンを置き換える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);
    }
});

シーンの事前ロード

シーンが次のシーンをロード中でも引き続き動作しますが、ロードが開始されてから次のシーンがユーザーに表示されるまでの遅延が発生します。

この遅延を最小限にするには、以下のHTMLタグを<head>やindex.htmlに記述します：

{/*  不要な場合 <link rel="preload" href="First.bin" ... />  */}
<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);
  }