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

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

Версия 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, который выступает в роли холста для рисования. Это делается с помощью фабричного метода this.add.graphics(). В примере мы создаем графический объект и сразу позиционируем его в центре экрана, передав начальные координаты в объекте конфигурации.

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

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

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

Основная логика рисования заключена в методе drawStar. Он использует низкоуровневые команды рисования контура и заливки, доступные у объекта Graphics. Алгоритм последовательно соединяет точки, рассчитанные с помощью тригонометрии, чтобы получить форму звезды с заданным количеством лучей (spikes).

Перед началом рисования задаются стили линии и заливки с помощью 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();

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

Вся магия динамики происходит в методе update, который вызывается на каждом кадре игры. Здесь мы напрямую изменяем свойства созданного графического объекта starGraphics.

Свойство rotation увеличивается каждым кадром, что заставляет звезду плавно вращаться. Масштаб по осям X и Y (scaleX, scaleY) привязывается к синусу от текущего угла вращения, создавая эффект пульсации. Использование Math.abs() гарантирует, что масштаб всегда будет положительным.

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));

Конфигурация игры и запуск сцены

Код завершается стандартной для Phaser конфигурацией игры. Ключевой момент — указание нашего класса Example в качестве основной сцены (scene). Тип рендерера Phaser.CANVAS гарантирует, что рисование через Graphics будет работать.

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

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

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

Объект Graphics открывает путь к созданию легковесной и полностью управляемой кодом графики. Вы научились создавать контекст, рисовать в нем сложные фигуры и анимировать их свойства. Для экспериментов попробуйте: изменить алгоритм drawStar для генерации других форм (спиралей, многоугольников), анимировать не только масштаб и вращение, но и цвет или толщину линии в update, либо создать несколько независимых Graphics объектов для составной анимации.