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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    image2;
    image1;

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

        this.load.image('arrow', 'assets/sprites/arrow.png');

    }

    create ()
    {

        this.image1 = this.add.image(300, 300, 'arrow');
        this.image2 = this.add.image(400, 300, 'arrow');

        this.image1.name = 'bill';
        this.image2.name = 'ben';

    }

    update ()
    {

        this.image1.rotation += 0.01;
        this.image2.rotation -= 0.01;

    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и загрузка ассетов

Класс Example наследуется от Phaser.Scene. В методе preload() мы загружаем изображение. Важно: this.load.setBaseURL() задает базовый путь для всех последующих загрузок. Это удобно, если все ваши ассеты лежат в одной папке.

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

Здесь загружается изображение стрелки с ключом 'arrow'. Ключ — это внутреннее имя ассета, по которому мы будем создавать игровые объекты.

Создание и настройка игровых объектов

Метод create() запускается один раз после загрузки ресурсов. Здесь мы создаем два изображения (this.add.image) на сцене, используя загруженный ключ 'arrow'. Первые два аргумента метода — это координаты X и Y.

create ()
{
    this.image1 = this.add.image(300, 300, 'arrow');
    this.image2 = this.add.image(400, 300, 'arrow');
    this.image1.name = 'bill';
    this.image2.name = 'ben';
}

Оба изображения создаются из одного и того же ассета, но это два независимых объекта. Свойство name — это необязательная пользовательская метка для удобства отладки.

Анимация вращения в игровом цикле

Сердце любого движения в Phaser — метод update(), который вызывается на каждом кадре. Чтобы объект вращался, мы изменяем его свойство rotation. Оно принимает значение в радианах.

update ()
{
    this.image1.rotation += 0.01;
    this.image2.rotation -= 0.01;
}

Здесь this.image1 вращается по часовой стрелке (значение увеличивается), а this.image2 — против часовой (значение уменьшается). Скорость вращения (0.01 радиана за кадр) определяет плавность анимации.

Инициализация игры: конфигурация

Для запуска игры необходим объект конфигурации config. В нем мы указываем тип рендерера (Phaser.CANVAS), родительский HTML-элемент и класс нашей сцены.

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    scene: Example
};
const game = new Phaser.Game(config);

После создания экземпляра Phaser.Game Phaser автоматически управляет жизненным циклом сцены, вызывая preload(), create() и update() в нужное время.

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

Вращение объектов в Phaser сводится к изменению свойства rotation в методе update(). Это простая, но мощная механика. Для экспериментов попробуйте изменить скорость вращения, привязать ее к времени кадра (this.time.delta), вращать объекты вокруг другой точки с помощью setOrigin() или заставить объект вращаться в сторону курсора мыши.