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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    image;

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

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

    update ()
    {
        this.image.rotation += 0.01;
    }
}

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

const game = new Phaser.Game(config);

Структура сцены и предзагрузка

В Phaser работа с контентом организована через сцены (Scene). Класс сцены содержит ключевые методы жизненного цикла: preload, create и update.

Метод preload предназначен для загрузки всех необходимых медиафайлов (изображений, звуков, спрайтшитов) в кеш игры до начала её отрисовки. Это гарантирует, что в момент создания объектов в памяти уже будут нужные данные. В примере мы настраиваем базовый URL для загрузки и указываем загрузить одно изображение с ключом 'einstein'.

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

Создание игрового объекта Image

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

Объект изображения (Image) — это простейший игровой объект для отображения статичной текстуры. Мы создаём его с помощью фабричного метода this.add.image(x, y, texture). Первые два аргумента — это координаты центра изображения на экране. Третий аргумент — текстовый ключ, под которым ресурс был загружен в preload. Ссылка на созданный объект сохраняется в свойстве класса this.image для дальнейшего доступа.

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

Простая анимация в реальном времени

Метод update вызывается на каждом кадре игры (обычно 60 раз в секунду). Это место для любого кода, который должен обновляться непрерывно: движения, проверки столкновений, интерактивности.

В данном примере мы используем update для реализации плавного вращения изображения. Каждый кадр мы увеличиваем свойство rotation объекта this.image на небольшое значение (0.01 радиана). Так как это происходит постоянно, пользователь видит плавную анимацию вращения. Это наглядный пример того, как изменять свойства игровых объектов в реальном времени.

update ()
{
    this.image.rotation += 0.01;
}

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

Экземпляр игры Phaser создаётся один раз, и в его конфигурационном объекте задаются основные параметры. Ключевые из них: * type: Рендерер (например, Phaser.WEBGL или Phaser.CANVAS). * width и height: Размер игрового холста. * backgroundColor: Цвет фона в шестнадцатеричном формате. * parent: ID HTML-элемента, в который будет встроен canvas. * scene: Класс или массив классов сцен, с которых начнётся игра.

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

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

const game = new Phaser.Game(config);

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

Вы освоили базовый паттерн Phaser: загрузить (preload), создать (create) и анимировать (update). Для экспериментов попробуйте: изменить координаты в create, чтобы переместить изображение; увеличить или уменьшить скорость вращения в update; добавить второе изображение и заставить их вращаться в разные стороны; использовать другие свойства объекта Image, например scaleX и scaleY для масштабирования.