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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    triangles;
    triangle;
    graphics;

    create ()
    {
        this.graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaaaa00, alpha: 0.6 } });

        this.triangle = new Phaser.Geom.Triangle.BuildEquilateral(200, 50, 200);

        this.triangles = [];
    }

    update ()
    {
        Phaser.Geom.Triangle.Rotate(this.triangle, 0.04);

        this.triangles.push(Phaser.Geom.Triangle.Clone(this.triangle));

        this.graphics.clear();

        this.graphics.strokeTriangleShape(this.triangle);

        for (let i = 0; i < this.triangles.length; i++)
        {
            Phaser.Geom.Triangle.Offset(this.triangles[i], 3, 1.5);

            if (this.triangles[i].left > 800)
            {
                this.triangles.splice(i--, 1);
            }
            else
            {
                this.graphics.strokeTriangleShape(this.triangles[i]);
            }
        }
    }
}

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

const game = new Phaser.Game(config);

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

В методе create() инициализируются основные объекты. Сначала создается графический объект (Graphics) для отрисовки линий. Затем с помощью статического метода Phaser.Geom.Triangle.BuildEquilateral строится равносторонний треугольник с центром в точке (200, 50) и стороной длиной 200 пикселей. Также создается пустой массив triangles, который будет хранить клоны нашего основного треугольника.

this.graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaaaa00, alpha: 0.6 } });
this.triangle = new Phaser.Geom.Triangle.BuildEquilateral(200, 50, 200);
this.triangles = [];

Вращение и клонирование в реальном времени

Каждый кадр в update() основной треугольник вращается вокруг своего центра на 0.04 радиана с помощью Phaser.Geom.Triangle.Rotate. Затем в массив triangles добавляется его точная копия, созданная методом Phaser.Geom.Triangle.Clone. Это ключевой момент: мы сохраняем "снимок" положения треугольника на каждом кадре.

Phaser.Geom.Triangle.Rotate(this.triangle, 0.04);
this.triangles.push(Phaser.Geom.Triangle.Clone(this.triangle));

Отрисовка и анимация шлейфа

Перед отрисовкой графический контекст очищается методом clear(). Затем отрисовывается текущий (вращающийся) треугольник. После этого в цикле обрабатывается массив клонов: каждый из них сдвигается вправо и вниз с помощью Phaser.Geom.Triangle.Offset. Если клон полностью ушел за правую границу экрана (свойство left > 800), он удаляется из массива. В противном случае он также отрисовывается. Постепенный сдвиг всех клонов создает эффект шлейфа.

this.graphics.clear();
this.graphics.strokeTriangleShape(this.triangle);

for (let i = 0; i < this.triangles.length; i++)
{
    Phaser.Geom.Triangle.Offset(this.triangles[i], 3, 1.5);

    if (this.triangles[i].left > 800)
    {
        this.triangles.splice(i--, 1);
    }
    else
    {
        this.graphics.strokeTriangleShape(this.triangles[i]);
    }
}

Настройка игры и конфигурация

Код завершается стандартной для Phaser 3 конфигурацией игры, где задается размер холста, тип рендерера и указывается класс основной сцены.

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

const game = new Phaser.Game(config);

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

Используя методы Clone, Rotate и Offset из геометрического API Phaser, можно легко создавать сложные на вид анимации с минимальным кодом. Для экспериментов попробуйте изменить скорость вращения или смещения, цвет и прозрачность линий, или привяжите точку вращения треугольника к положению курсора мыши. Этот же принцип можно адаптировать для других фигур, например, для создания эффекта "призрачного" движения игрового персонажа.