Создадим менеджер для удобного переключения игровых сцен. Сначала создадим базовый класс сцены:
import * as PIXI from "pixi.js";
import { App } from "./App";
export class Scene {
constructor() {
this.container = new PIXI.Container();
this.container.interactive = true;
this.create();
App.app.ticker.add(this.update, this);
}
create() {}
update() {}
destroy() {}
remove() {
App.app.ticker.remove(this.update, this);
this.destroy();
this.container.destroy();
}
}
Добавим в базовый класс три метода, которые можно переопределить в игровой сцене:
createupdatedestroy
В конструкторе выполним общие действия, нужные каждой сцене игры:
- создадим контейнер сцены
- вызовем
create, который будет переопределён в игровой сцене - добавим ticker
PIXIс методомupdate, чтобы тот вызывался на каждом кадре анимации - добавим метод
remove, вызываемый менеджером при уничтожении сцены, и реализуем в нём удаление ticker
Теперь создадим сам менеджер для управления и переключения сцен:
import * as PIXI from "pixi.js";
import { App } from "./App";
export class ScenesManager {
constructor() {
this.container = new PIXI.Container();
this.container.interactive = true;
this.scene = null;
}
start(scene) {
if (this.scene) {
this.scene.remove();
}
this.scene = new App.config.scenes[scene]();
this.container.addChild(this.scene.container);
}
}
Единственная задача менеджера — запуск сцены. Если какая-то сцена уже запущена, её нужно удалить. Нужную сцену зададим ключом, переданным в start. Какой класс сцены соответствует ключу, укажем в глобальной конфигурации:
// ...
export const Config = {
// ...
scenes: {
"Game": Game
}
};
Доработаем игровую сцену Game, унаследовав её от базового класса сцены:
//...
import { Scene } from "../system/Scene";
export class Game extends Scene {
// ...
}
Остаётся изменить способ запуска сцены в классе приложения App.js:
// ...
import { ScenesManager } from "./ScenesManager";
class Application {
run(config) {
//...
this.scenes = new ScenesManager();
this.app.stage.addChild(this.scenes.container);
}
// ...
start() {
this.scenes.start("Game");
}
}