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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('metal', 'assets/textures/alien-metal.jpg');
        this.load.image('bunny', 'assets/sprites/bunny.png');
    }

    create ()
    {
        const graphics = this.add.graphics();

        graphics.lineStyle(50, 0xffffff);

        graphics.beginPath();
        graphics.arc(400, 300, 200, Phaser.Math.DegToRad(0), Phaser.Math.DegToRad(360), false, 0.01);
        graphics.strokePath();
        graphics.closePath();

        graphics.beginPath();
        graphics.lineStyle(40, 0xff00ff);
        graphics.arc(400, 300, 200, Phaser.Math.DegToRad(0), Phaser.Math.DegToRad(360), true, 0.01);
        graphics.strokePath();
        graphics.closePath();
    }
}

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

const game = new Phaser.Game(config);

Создание и настройка Graphics

Объект Graphics является контейнером для векторных команд рисования. Прежде чем рисовать, нужно задать стиль линии.

const graphics = this.add.graphics();
graphics.lineStyle(50, 0xffffff);

Метод lineStyle принимает два ключевых аргумента: толщину линии в пикселях (здесь 50) и цвет в HEX-формате (0xffffff — белый). Все последующие операции рисования будут использовать эти настройки, пока стиль не будет изменен.

Рисование дуги: beginPath, arc и strokePath

Рисование любой сложной фигуры в Graphics состоит из трех этапов: начало пути, определение геометрии и отрисовка.

graphics.beginPath();
graphics.arc(400, 300, 200, Phaser.Math.DegToRad(0), Phaser.Math.DegToRad(360), false, 0.01);
graphics.strokePath();
graphics.closePath();

1. beginPath() — начинает новый контур. 2. arc() — определяет дугу. Ее параметры: * 400, 300 — координаты X и Y центра. * 200 — радиус дуги. * Phaser.Math.DegToRad(0), Phaser.Math.DegToRad(360) — начальный и конечный угол в радианах. Здесь мы преобразуем 0 и 360 градусов, чтобы нарисовать полный круг. * false — направление отрисовки против часовой стрелки. * 0.01 — разрешение (сегментность) кривой. Меньшее значение — более гладкая кривая. 3. strokePath() — выполняет отрисовку контура текущего пути, используя заданный lineStyle. 4. closePath() — формально закрывает путь. Хотя для полной дуги это необязательно, это хорошая практика.

Изменение стиля и обратное направление

Вы можете изменить стиль линии в любой момент для последующих фигур. Также параметр направления в arc влияет на визуальный результат, особенно при использовании градиентов или текстур для обводки, но в данном примере он меняет порядок отрисовки сегментов.

graphics.beginPath();
graphics.lineStyle(40, 0xff00ff);
graphics.arc(400, 300, 200, Phaser.Math.DegToRad(0), Phaser.Math.DegToRad(360), true, 0.01);
graphics.strokePath();
graphics.closePath();

Здесь мы меняем стиль на линию толщиной 40px цвета magenta (0xff00ff). Ключевое изменение — пятый аргумент arc установлен в true, что означает отрисовку по часовой стрелке. Так как эта линия рисуется поверх предыдущей (белой) и имеет меньшую толщину, мы получаем эффект контурного кольца с белой подложкой и цветной внутренней границей.

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

Код примера использует базовую конфигурацию Phaser Game. Обратите внимание, что для Graphics предпочтительнее использовать рендерер WEBGL, так как он обеспечивает более высокую производительность при отрисовке множества векторных объектов.

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

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

Объект Graphics — мощный инструмент для динамического создания векторной графики в Phaser. Используя методы arc и strokePath, вы можете рисовать не только статические круги, но и анимированные индикаторы загрузки, сектора радаров или плавно меняющиеся орбиты. Для экспериментов попробуйте: анимировать конечный угол дуги для создания эффекта заполнения; применить текстуру к линии с помощью setStrokeStyle; или использовать fillPath и fillStyle для создания залитых сегментов круговой диаграммы.