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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    singleImage;
    atlasFrame;

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

        this.load.image('atari', 'assets/sprites/atari130xe.png');
        this.load.atlas('atlas', 'assets/atlas/megaset-0.png', 'assets/atlas/megaset-0.json');

    }

    create ()
    {

        this.atlasFrame = this.add.image(300, 100, 'atlas', 'dragonwiz');
        this.singleImage = this.add.image(300, 300, 'atari');

    }

    update ()
    {

        this.atlasFrame.rotation += 0.01;
        this.singleImage.rotation += 0.01;

    }
}

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

const game = new Phaser.Game(config);

Загрузка ресурсов: подготовка к работе

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

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

this.load.image('atari', 'assets/sprites/atari130xe.png');
this.load.atlas('atlas', 'assets/atlas/megaset-0.png', 'assets/atlas/megaset-0.json');

Первая строка задаёт базовый URL для всех загружаемых файлов, что упрощает указание путей. Далее, метод this.load.image() регистрирует в кеше игры изображение с ключом 'atari'. Метод this.load.atlas() загружает атлас: файл изображения (megaset-0.png) и файл с JSON-данными о координатах каждого фрейма внутри него (megaset-0.json). Ключ 'atlas' будет использоваться для доступа ко всему атласу, а конкретный фрейм выбирается по имени, например, 'dragonwiz'.

Создание объектов: размещаем спрайты на сцене

После загрузки ресурсов в методе create() мы создаём два видимых игровых объекта — спрайта. Это момент, когда графика появляется на экране.

this.atlasFrame = this.add.image(300, 100, 'atlas', 'dragonwiz');
this.singleImage = this.add.image(300, 300, 'atari');

Оба спрайта создаются с помощью метода this.add.image(). Первые два аргумента — это координаты X и Y центра спрайта на сцене. Третий аргумент — ключ загруженного ресурса. Для спрайта из атласа (this.atlasFrame) требуется четвёртый аргумент — имя конкретного фрейма внутри атласа ('dragonwiz'). Одиночное изображение (this.singleImage) создаётся только по ключу 'atari'. Оба объекта сохраняются в свойства класса (this.atlasFrame, this.singleImage), чтобы мы могли изменять их свойства в следующих кадрах.

Анимация вращения: "оживляем" спрайты

Сердце любой динамики в игре — метод update(). Он вызывается на каждом кадре (обычно 60 раз в секунду). Именно здесь мы меняем свойства спрайтов, чтобы создать иллюзию движения.

this.atlasFrame.rotation += 0.01;
this.singleImage.rotation += 0.01;

Ключевое свойство для вращения — .rotation. Оно хранит текущий угол поворота объекта в радианах. Прибавляя к нему небольшое значение (0.01) на каждом кадре, мы плавно увеличиваем угол, что и воспринимается как непрерывное вращение по часовой стрелке. Важно: это свойство есть у любого объекта Image в Phaser, независимо от того, создан ли он из атласа или одиночной текстуры. Аналогичный принцип работает для других трансформаций, например, изменения масштаба через свойство .scale.

Конфигурация игры: точка входа

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

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

const game = new Phaser.Game(config);

В конфигурации: - type: Указывает рендерер (Phaser.AUTO позволяет движку выбрать WebGL или Canvas автоматически). - parent: ID HTML-элемента, в который будет встроен холст игры. - scene: Класс нашей основной сцены (Example). Именно его методы preload(), create() и update() будут вызваны движком в нужный момент. Эта структура стандартна для большинства небольших проектов на Phaser 3.

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

Как видите, реализация плавного вращения в Phaser 3 укладывается всего в две строчки кода, работающие в игровом цикле. Это демонстрирует мощь и простоту API движка. Для экспериментов попробуйте изменить скорость вращения (значение, прибавляемое к rotation), заставить спрайты вращаться в разные стороны или вращать только один из объектов. В качестве следующего шага изучите свойство .angle, которое работает с градусами, или анимируйте вращение с помощью твинов (this.tweens.add) для более сложных сценариев.