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

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

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

Версия 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('logo', 'assets/sprites/phaser3-logo.png');
    }

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

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

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

const game = new Phaser.Game(config);

Загрузка и создание изображения

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

Затем, в методе create(), мы создаём игровой объект — изображение. Метод this.add.image() принимает координаты X, Y и ключ загруженного изображения. Объект помещается в центр сцены с координатами (400, 300).

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

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

Магия в игровом цикле: метод update()

Настоящая анимация происходит в методе update(). Этот метод вызывается на каждом кадре игры (обычно 60 раз в секунду). Здесь мы напрямую изменяем свойство rotation нашего изображения, добавляя к нему небольшое значение.

Свойство rotation измеряется в радианах. Добавляя 0.01 каждый кадр, мы обеспечиваем плавное непрерывное вращение по часовой стрелке. Это и есть основа анимации в реальном времени.

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

Понимание конфигурации игры

Код вне класса сцены отвечает за настройку и запуск всего приложения Phaser. Объект config определяет основные параметры: тип рендерера, размеры холста, элемент-контейнер на странице и главную сцену.

Конструктор new Phaser.Game(config) принимает эту конфигурацию и инициализирует игровой цикл, который начинает вызывать методы preload(), create(), а затем непрерывно — update().

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

const game = new Phaser.Game(config);

Ключевые свойства и концепции

Работая с вращением, важно помнить о двух вещах: 1. **Точка вращения (origin):** По умолчанию объект вращается вокруг своего центра (origin 0.5). Это поведение можно изменить через свойство setOrigin(). 2. **Углы и радианы:** В Phaser для углов используются радианы. Полный оборот равен Math.PI * 2 (примерно 6.28). Если вам привычнее градусы, можно использовать свойство angle, которое работает с градусами, но внутренне Phaser всё равно конвертирует их в радианы для rotation.

Чтобы вращать объект быстрее или медленнее, просто измените значение, на которое увеличивается rotation в update().

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

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