Переключение сцен

Когда ваша игра достигает определенного размера, вы захотите начать переключаться между сценами. Это может быть переход от вступления или меню в саму игру или от одного уровня к другому.

Наиболее важная функция, которую нужно знать здесь, это 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);
  }