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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    starGraphics;

    create ()
    {
        this.starGraphics = this.add.graphics({x: 400, y: 300});
        this.drawStar(this.starGraphics, 0, 0, 5, 100, 50, 0xFFFF00, 0xFF0000);
    }

    update ()
    {
        this.starGraphics.rotation += 0.01;
        this.starGraphics.scaleX = 0.8 + Math.abs(Math.sin(this.starGraphics.rotation));
        this.starGraphics.scaleY = 0.8 + Math.abs(Math.sin(this.starGraphics.rotation));
    }

    drawStar (graphics, cx, cy, spikes, outerRadius, innerRadius, color, lineColor)
    {
        let rot = Math.PI / 2 * 3;
        let x = cx;
        let y = cy;
        const step = Math.PI / spikes;
        graphics.lineStyle(10, lineColor, 1.0);
        graphics.fillStyle(color, 1.0);
        graphics.beginPath();
        graphics.moveTo(cx, cy - outerRadius);
        for (let i = 0; i < spikes; i++)
        {
            x = cx + Math.cos(rot) * outerRadius;
            y = cy + Math.sin(rot) * outerRadius;
            graphics.lineTo(x, y);
            rot += step;

            x = cx + Math.cos(rot) * innerRadius;
            y = cy + Math.sin(rot) * innerRadius;
            graphics.lineTo(x, y);
            rot += step;
        }
        graphics.lineTo(cx, cy - outerRadius);
        graphics.closePath();
        graphics.fillPath();
        graphics.strokePath();
    }
}

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

const game = new Phaser.Game(config);

Инициализация объекта Graphics

Вся работа с векторной графикой начинается с создания объекта Graphics. Его можно представить как холст для рисования.

В методе create() мы создаём экземпляр и сохраняем ссылку на него в свойстве класса для дальнейшего использования. Конструктор принимает объект с начальными координатами `xиy`, которые задают позицию всей фигуры на сцене.

this.starGraphics = this.add.graphics({x: 400, y: 300});

После создания объекта мы сразу вызываем пользовательский метод drawStar(), передавая ему необходимые параметры для отрисовки фигуры в точке (0, 0) относительно позиции самого graphics-объекта.

Алгоритм рисования звезды

Метод drawStar реализует классический алгоритм построения звезды с заданным количеством лучей. Он использует тригонометрические функции для расчёта вершин.

Перед началом рисования необходимо задать стили для контура и заливки с помощью lineStyle() и fillStyle(). После этого последовательность команд beginPath(), moveTo(), lineTo() и closePath() определяет форму. Фигура завершается вызовами fillPath() и strokePath().

graphics.lineStyle(10, lineColor, 1.0);
graphics.fillStyle(color, 1.0);
graphics.beginPath();
graphics.moveTo(cx, cy - outerRadius);
// ... цикл для расчёта вершин
graphics.closePath();
graphics.fillPath();
graphics.strokePath();

Ключевая логика в цикле: сначала вычисляется вершина внешнего радиуса, затем — внутреннего. Угол rot увеличивается на фиксированный шаг (step) после каждой вершины, что обеспечивает равномерное распределение лучей.

Динамическая анимация в update()

Настоящая сила объекта Graphics раскрывается в возможности динамически изменять его свойства. В методе update(), который вызывается каждый кадр, мы анимируем нашу звезду.

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

this.starGraphics.rotation += 0.01;

Для создания эффекта пульсации мы меняем масштаб объекта (scaleX и scaleY). Значение масштаба привязывается к синусу от текущего угла вращения, что создаёт ритмичное сжатие и расширение.

this.starGraphics.scaleX = 0.8 + Math.abs(Math.sin(this.starGraphics.rotation));
this.starGraphics.scaleY = 0.8 + Math.abs(Math.sin(this.starGraphics.rotation));

Важно: так как sin() возвращает значения от -1 до 1, мы используем Math.abs() для получения только положительных величин, чтобы звезда не отображалась инвертированной.

Гибкость подхода: от звезды к чему угодно

Представленный подход универсален. Изменив алгоритм в методе drawStar, вы можете рисовать любые многоугольники, спирали или абстрактные формы.

Основные преимущества Graphics перед спрайтами: * **Производительность для простых форм:** Не требует загрузки текстур. * **Полный контроль:** Форма, цвет и стиль контура могут меняться в реальном времени. * **Лёгкость модификации:** Параметры фигуры (как радиусы звезды) легко вынести в переменные и менять в процессе игры.

Например, чтобы звезда меняла цвет, можно перерисовывать её каждый кадр с новыми параметрами, предварительно очистив старый рисунок:

// В update()
this.starGraphics.clear();
let newColor = 0xFF0000 + Math.floor(Math.sin(time) * 0xFFFF);
this.drawStar(this.starGraphics, 0, 0, 5, 100, 50, newColor, 0x0000FF);

Однако частое использование clear() и перерисовка могут быть затратными, поэтому для простых трансформаций (вращение, масштаб) лучше менять свойства объекта, как в нашем примере.

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

Объект Graphics в Phaser 3 — это ваш прямой доступ к low-level отрисовке, открывающий двери для создания уникальных процедурных эффектов. Начните экспериментировать: попробуйте менять количество лучей звезды в зависимости от очков игрока, сделать внутренний радиус анимированным для эффекта «взрыва» или скомбинировать несколько Graphics-объектов для создания сложного составного индикатора. Помните, что для статичных сложных форм иногда эффективнее заранее отрендерить их в текстуру, но для динамики и простых фигур Graphics остаётся идеальным выбором.