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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0xaaaa00 } });

        const triangle = new Phaser.Geom.Triangle.BuildEquilateral(400, 25, 300);

        const points = Phaser.Geom.Triangle.Decompose(triangle);

        let angle = 0;

        while (angle < Math.PI * 2)
        {
            Phaser.Geom.Triangle.Offset(triangle, Math.cos(angle) * 15, Math.sin(angle) * 15);

            Phaser.Geom.Triangle.Rotate(triangle, Math.PI / 20);

            Phaser.Geom.Triangle.Decompose(triangle, points);

            angle += Math.PI / 20;
        }

        graphics.strokePoints(points);

    }
}

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: 2, color: 0xaaaa00 } });

const triangle = new Phaser.Geom.Triangle.BuildEquilateral(400, 25, 300);

Метод BuildEquilateral принимает координаты верхней вершины (x, y) и длину стороны. Здесь треугольник создается в верхней центральной части экрана. Объект graphics настроен на рисование линий толщиной 2 пикселя золотистым цветом.

Разложение фигуры и подготовка массива точек

Ключевой метод Decompose преобразует треугольник (три вершины) в массив из шести точек (координаты x и y каждой вершины последовательно). Этот плоский массив — именно тот формат, который ожидает метод strokePoints для отрисовки ломаной линии.

const points = Phaser.Geom.Triangle.Decompose(triangle);

Изначально в массив points записываются координаты вершин исходного треугольника. Важно, что этот массив будет переиспользоваться далее, что экономит ресурсы.

Цикл анимации: смещение, вращение и обновление точек

Основная логика заключена в цикле while. На каждом шаге мы выполняем три действия с треугольником и обновляем массив точек для отрисовки.

let angle = 0;

while (angle < Math.PI * 2)
{
    Phaser.Geom.Triangle.Offset(triangle, Math.cos(angle) * 15, Math.sin(angle) * 15);

    Phaser.Geom.Triangle.Rotate(triangle, Math.PI / 20);

    Phaser.Geom.Triangle.Decompose(triangle, points);

    angle += Math.PI / 20;
}

1. Offset — смещает весь треугольник. Смещение зависит от текущего angle, создавая круговое движение центра фигуры. 2. Rotate — поворачивает треугольник вокруг его центра (который изменился после смещения) на фиксированный угол (Math.PI / 20 радиан). 3. Decompose — заново разлагает уже измененный треугольник, перезаписывая новыми координатами существующий массив points. Цикл выполняется до тех пор, пока angle не совершит полный оборот (2π).

Финальная отрисовка результата

После выхода из цикла мы имеем массив points, который содержит координаты всех вершин треугольника на каждом шаге его трансформации. Метод strokePoints соединяет эти точки одной непрерывной линией, создавая замысловатый узор.

graphics.strokePoints(points);

Именно этот вызов рисует на экране итоговую картину. Все промежуточные состояния треугольника не отрисовываются по отдельности — виден только конечный "след" его движения.

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

Пример наглядно демонстрирует, как комбинация простых геометрических операций — разложения, смещения и вращения — рождает сложный визуальный паттерн. Для экспериментов попробуйте изменить шаг угла или множитель смещения в цикле, заменить равносторонний треугольник на произвольный с помощью Phaser.Geom.Triangle, или применить цветовой градиент к объекту graphics, чтобы узор менял цвет вдоль своей длины.