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

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

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

Версия 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('grid', 'assets/pics/debug-grid-1920x1920.png');
        this.load.image('arrow', 'assets/sprites/arrow.png');
    }

    create ()
    {
        //  Angle uses degrees instead of radians

        for (let a = 0; a <= 360; a += 45)
        {
            const frame = this.add.image(40 + a * 2, 300, 'arrow').setAngle(a);

            //  You can also do: frame.angle = degrees;
        }
    }
}

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

const game = new Phaser.Game(config);

Загрузка ресурсов и базовая настройка сцены

В методе preload() загружаются необходимые изображения. Одно (grid) служит фоном для отладки, а другое (arrow) — это спрайт стрелки, который мы будем вращать.

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

В методе create() инициализируется логика сцены. Здесь будет происходить создание и вращение стрелок.

Цикл создания и вращения спрайтов

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

for (let a = 0; a <= 360; a += 45)
{
    const frame = this.add.image(40 + a * 2, 300, 'arrow').setAngle(a);
}

Ключевой момент: `a— это угол в градусах, который передаётся напрямую вsetAngle(a). Цикл проходит от 0 до 360 с шагом 45 градусов, создавая стрелки, повёрнутые на 0°, 45°, 90° и так далее. Координата X каждой следующей стрелки смещается (40 + a * 2`), чтобы они не накладывались друг на друга.

Альтернативный способ задания угла

Метод setAngle() — это сеттер. Существует эквивалентный способ задания угла через прямое присваивание свойству .angle. Оба способа делают одно и то же.

//  Вы можете также сделать: frame.angle = degrees;

На практике выбор между setAngle() и прямым присваиванием angle — это вопрос стиля. setAngle() позволяет применять чейнинг (цепочку вызовов), что удобно при инициализации объекта. Прямое присваивание свойству может быть более наглядным при изменении угла в процессе игры, например, в методе update().

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

Использование градусов для вращения в Phaser — это маленькое, но важное удобство, которое ускоряет разработку. Свойство .setAngle() и его аналог .angle позволяют мгновенно ориентировать спрайты в пространстве. Для экспериментов попробуйте изменить шаг цикла, чтобы создать более плавный или, наоборот, более редкий набор вращений, или анимируйте угол стрелки во времени, изменяя его свойство angle внутри update().