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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {

        const graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa } });

        const line = new Phaser.Geom.Line(380, 300, 420, 300);

        let length = 40;

        for (let i = 0; i < 30; i++)
        {
            graphics.strokeLineShape(line);

            const normalAngle = Phaser.Geom.Line.NormalAngle(line);

            Phaser.Geom.Line.SetToAngle(line, line.x2, line.y2, normalAngle, length);

            length += 20;
        }

    }
}

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

const game = new Phaser.Game(config);

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

В начале метода create() мы создаем графический объект graphics для рисования и определяем начальную линию.

const graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa } });

const line = new Phaser.Geom.Line(380, 300, 420, 300);

Первая строка настраивает инструмент для рисования с фиолетовым цветом и толщиной в 4 пикселя. Вторая строка создает геометрический объект Line с начальной точкой (x1, y1) в координатах (380, 300) и конечной точкой (x2, y2) в (420, 300). Это горизонтальный отрезок длиной 40 пикселей в центре экрана. Важно понимать, что Phaser.Geom.Line — это объект данных, описывающий отрезок, а не отображаемый спрайт.

Цикл рисования и обновления линии

Спираль рисуется в цикле из 30 итераций. На каждом шаге мы рисуем текущее состояние линии, вычисляем ее нормальный угол и меняем ее положение и длину.

for (let i = 0; i < 30; i++)
{
    graphics.strokeLineShape(line);
    const normalAngle = Phaser.Geom.Line.NormalAngle(line);
    Phaser.Geom.Line.SetToAngle(line, line.x2, line.y2, normalAngle, length);
    length += 20;
}

Метод graphics.strokeLineShape(line) отрисовывает текущий отрезок. Далее, Phaser.Geom.Line.NormalAngle(line) возвращает угол, перпендикулярный текущей линии (нормаль). Это ключевой момент: мы рисуем не просто продолжение линии, а поворачиваем каждый новый отрезок на 90 градусов относительно предыдущего.

Как работает метод SetToAngle

Метод Phaser.Geom.Line.SetToAngle — это сердце алгоритма. Он полностью переопределяет координаты переданной линии.

Phaser.Geom.Line.SetToAngle(line, line.x2, line.y2, normalAngle, length);

Метод принимает пять аргументов: 1. line — объект линии, который будет изменен. 2. line.x2, line.y2 — координаты, которые становятся новой начальной точкой (x1) отрезка. Мы берем последнюю конечную точку предыдущей линии. 3. normalAngle — угол в радианах, под которым будет построена новая линия. 4. length — длина новой линии, которая с каждой итерацией увеличивается на 20 пикселей.

Таким образом, каждый новый отрезок начинается там, где закончился предыдущий, рисуется под прямым углом к нему и имеет большую длину. Эта комбинация и создает спираль Архимеда.

Сборка и запуск приложения

Класс сцены регистрируется в конфигурации игры Phaser. Обратите внимание, что в конфиге не активированы системы физики — они не требуются для работы с чистой геометрией.

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

const game = new Phaser.Game(config);

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

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

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