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

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

Каждая игра на Phaser начинается со сцены — основного контейнера для вашего игрового процесса. Понимание жизненного цикла сцены критически важно для управления ресурсами, логикой и отрисовкой. В этой статье мы разберем базовый шаблон сцены, который является отправной точкой для большинства проектов на Phaser, и объясним, как правильно загрузить и отобразить ваши первые игровые объекты.

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

Живой запуск

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

Исходный код

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

    create ()
    {
        console.log(this);

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

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

const game = new Phaser.Game(config);

Структура класса сцены и его методы

В Phaser каждая игровая сцена представлена классом, расширяющим базовый класс Phaser.Scene. Этот класс содержит предопределенные методы, которые движок вызывает в строгом порядке. Два самых важных метода для старта — preload() и create().

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

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

Загрузка ресурсов: метод preload()

Внутри метода preload() мы используем менеджер загрузки, доступный через this.load. В предоставленном примере выполняется две ключевые операции.

Во-первых, устанавливается базовый URL для всех последующих загрузок. Это удобно, если все ваши ресурсы лежат в одной папке на сервере или CDN.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');

Во-вторых, добавляется в очередь загрузки одно изображение. Метод load.image() принимает два строковых аргумента: уникальный ключ (в нашем случае 'face'), по которому вы будете обращаться к ресурсу в коде, и путь к файлу относительно базового URL.

this.load.image('face', 'assets/pics/bw-face.png');

Phaser начнет загрузку изображения сразу после вызова этого метода. Сцена не перейдет к методу create(), пока все такие загрузки не завершатся.

Создание игровых объектов: метод create()

После успешной загрузки ресурсов Phaser вызывает метод create(). В этот момент ключ 'face' уже связан с загруженной в память текстурой.

Первая строка выводит контекст сцены (this) в консоль для отладки. Это полезно, чтобы исследовать все доступные свойства и методы объекта сцены.

console.log(this);

Далее, с помощью фабрики игровых объектов this.add создается и добавляется на сцену спрайт — изображение. Метод add.image() принимает три основных аргумента: координаты X и Y для позиционирования и ключ загруженного ресурса.

this.add.image(400, 300, 'face');

Объект будет отрисован с центром в точке (400, 300). Система координат в Phaser начинается в левом верхнем углу холста.

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

Класс сцены — это лишь шаблон. Чтобы игра заработала, необходимо создать конфигурационный объект и передать его в конструктор Phaser.Game.

Конфигурационный объект определяет базовые параметры рендерера и игры. Самые важные из них: * type: Определяет рендерер (WebGL или Canvas). Phaser.AUTO позволяет движку выбрать лучший доступный вариант. * width и height: Размеры игрового холста в пикселях. * scene: Класс (или массив классов) сцены, который будет запущен сразу после инициализации движка.

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

После создания конфигурации, инстанциируется главный объект игры. Этот вызов инициализирует Phaser, создает холст внутри HTML-элемента с id, указанным в parent, и запускает первую сцену.

const game = new Phaser.Game(config);

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

Вы освоили фундаментальный цикл «загрузить — создать» в Phaser. Это основа для любой сцены. Для экспериментов попробуйте: загрузить несколько изображений с разными ключами и создать из них композицию; использовать метод add.sprite() вместо add.image() для работы с анимациями; или изменить свойства созданного изображения (например, image.setAlpha(0.5)) после его создания в методе create().