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

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

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

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

Живой запуск

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

Исходный код

class MyScene extends Phaser.Scene {

    constructor (config)
    {
        super(config);
    }

    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.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: MyScene
};

const game = new Phaser.Game(config);

Структура класса сцены

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

Ключевой момент — вызов super(config) в конструкторе. Это передаёт конфигурацию родительскому классу Phaser, инициализируя сцену корректно.

class MyScene extends Phaser.Scene {
    constructor (config)
    {
        super(config);
    }
}

Метод preload: загрузка ресурсов

Жизненный цикл сцены начинается с метода preload(). Он вызывается автоматически один раз и предназначен для предварительной загрузки всех необходимых ресурсов: изображений, звуков, данных. Загрузка в этом методе гарантирует, что к моменту создания сцены все ассеты будут готовы.

В примере мы сначала задаём базовый URL для загрузчиков с помощью this.load.setBaseURL(), а затем добавляем в очередь загрузки одно изображение с ключом 'face'.

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

Метод create: создание игровых объектов

Следующий этап — метод create(). Он вызывается после успешного завершения preload(). Здесь происходит основная настройка сцены: создание спрайтов, текстур, настройка физики, ввод данных и т.д.

В нашем случае мы создаём объект изображения (Image) и помещаем его в центр экрана с координатами (400, 300), используя ранее загруженный ключ 'face'. Ссылка на объект сохраняется в свойстве сцены this.face для возможного дальнейшего доступа.

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

Конфигурация игры и запуск

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

Обратите внимание на поле scene: MyScene. Именно здесь мы указываем класс нашей сцены. Phaser сам создаст её экземпляр при запуске игры. Константа game хранит ссылку на основной экземпляр игры.

const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: MyScene
};

const game = new Phaser.Game(config);

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

Вы создали свою первую функциональную сцену в Phaser 3, используя ES6 класс. Это база для любой игры. Для экспериментов попробуйте: загрузить и отобразить несколько разных изображений, изменить их позицию, добавить простую анимацию через свойство this.face.setScale() или this.face.setAlpha(), а также создать вторую сцену и переключаться между ними с помощью this.scene.start().