Phaser.js: всё об играх и разработке

О чем этот пример

В Phaser 3 загрузка и переключение сцен — фундаментальные концепции. Хотя фреймворк поддерживает автозапуск через конфигурацию, иногда требуется более тонкий контроль. Этот пример демонстрирует ручную регистрацию и запуск сцены после создания экземпляра игры — подход, полезный для динамической загрузки сцен, предзагрузки общих ресурсов или сложной последовательности инициализации. Понимание этого механизма открывает путь к созданию гибких загрузчиков, управлению состоянием приложения и реализации продвинутых переходов между игровыми разделами.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    constructor ()
    {
        super({ key: "Boot" });
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('face', 'assets/pics/bw-face.png');
    }

    create ()
    {
        this.face = this.add.image(400, 300, 'face');
    }
}


const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600
};

const game = new Phaser.Game(config);

game.scene.add('Boot', Example);
game.scene.start('Boot');

Структура сцены: от класса до ключа

Вся логика отдельной части игры (меню, уровень, загрузочный экран) инкапсулируется в классе, унаследованном от Phaser.Scene. Ключевой момент — передача объекта конфигурации с уникальным key в конструктор родительского класса.

class Example extends Phaser.Scene
{
    constructor ()
    {
        super({ key: "Boot" });
    }

Здесь key: "Boot" — это идентификатор сцены, по которому мы будем ссылаться на неё извне. Этот ключ используется для регистрации сцены в менеджере и её последующего запуска.

Жизненный цикл сцены: preload и create

Phaser вызывает методы сцены в строгом порядке. preload() предназначен для загрузки ассетов (изображений, звуков, данных). В этом примере мы задаём базовый URL и загружаем одно изображение.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('face', 'assets/pics/bw-face.png');
}

Метод create() вызывается один раз после успешной загрузки всех ресурсов, объявленных в preload(). Здесь происходит первоначальная настройка игровых объектов. Мы создаём спрайт изображения и помещаем его в центр.

create ()
{
    this.face = this.add.image(400, 300, 'face');
}

Координаты (400, 300) соответствуют центру холста размером 800x600 пикселей, заданного в конфиге игры.

Создание игры и ручное управление сценами

Конфигурационный объект передаётся в конструктор Phaser.Game. Обратите внимание, что в нём не указано свойство scene, которое обычно используется для автозапуска сцены.

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600
};

const game = new Phaser.Game(config);

После создания экземпляра игры мы вручную регистрируем наш класс сцены в менеджере сцен, используя заранее определённый ключ 'Boot'.

game.scene.add('Boot', Example);

Финальный шаг — явный запуск зарегистрированной сцены по её ключу. На этом этапе Phaser начнёт исполнять её жизненный цикл (preload, create, update).

game.scene.start('Boot');

Этот двухэтапный подход (add, затем start) даёт полный контроль над моментом инициализации.

Что попробовать дальше

Ручная регистрация и запуск сцены — мощный паттерн для сложных сценариев инициализации. Он позволяет, например, сначала создать и запустить сцену-загрузчик, которая загрузит общие ресурсы, а уже потом добавить и переключиться на основную игровую сцену. Поэкспериментируйте: создайте вторую сцену (MainMenu) и переключитесь на неё из сцены Boot по клику на изображение или по таймеру, используя метод this.scene.start('MainMenu').