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

Любая игра состоит из объектов: персонажей, врагов, предметов. В 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('bunny', 'assets/sprites/bunny.png');
    }

    create ()
    {
        this.add.sprite(400, 300, 'bunny');
    }
}

const config = {
    type: Phaser.AUTO,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Структура сцены: preload и create

Каждая сцена в Phaser (класс, расширяющий Phaser.Scene) обычно содержит два ключевых метода для начальной настройки: preload() и create(). Их порядок выполнения строго определён движком.

Метод preload() вызывается самым первым. Его задача — загрузить все необходимые медиа-ресурсы (изображения, звуки) в кеш игры до начала какого-либо рендеринга. Это гарантирует, что к моменту создания объектов они будут готовы к использованию.

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

Загрузка ресурсов в preload()

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

Затем с помощью метода .image() в кеш загружается одно изображение. Первый аргумент — это уникальный строковый ключ ('bunny'), по которому мы будем обращаться к ресурсу в дальнейшем. Второй аргумент — путь к файлу относительно базового URL.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('bunny', 'assets/sprites/bunny.png');

Создание и отображение спрайта в create()

После загрузки ресурсов можно создавать игровые объекты. В данном случае создаётся статичный спрайт.

Метод this.add.sprite() создаёт новый спрайт и сразу добавляет его на дисплейный список сцены, что обеспечивает его отрисовку. Фабрика объектов this.add — это основной способ создания визуальных объектов без физического тела.

Метод принимает три основных аргумента: координаты X и Y на холсте (точка, которая будет центром спрайта) и ключ изображения из кеша.

this.add.sprite(400, 300, 'bunny');

В результате по координатам (400, 300) будет отображён загруженный рисунок кролика.

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

Перед созданием экземпляра игры необходимо описать её базовую конфигурацию в объекте config. Это глобальные настройки, не зависящие от конкретной сцены.

Ключевые параметры из примера: * type: Определяет рендерер (WebGL или Canvas). Phaser.AUTO позволяет движку выбрать лучший из доступных. * backgroundColor: Цвет фона холста в шестнадцатеричном формате. * parent: ID HTML-элемента (контейнера), в который будет встроен холст игры. * scene: Класс сцены, которая будет запущена сразу после инициализации игры.

const config = {
    type: Phaser.AUTO,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

Запуск игры осуществляется созданием нового экземпляра класса Phaser.Game с переданной конфигурацией. Этот момент является точкой входа.

const game = new Phaser.Game(config);

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

Вы создали и отобразили первый игровой объект. Это фундамент для всего последующего развития игры. Для экспериментов попробуйте: 1. Изменить координаты спрайта, чтобы переместить его в другой угол экрана. 2. Загрузить и отобразить своё изображение, изменив путь в preload() и ключ в create(). 3. Создать несколько спрайтов с разными изображениями и координатами, чтобы заполнить сцену.