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

Работа с графикой — фундамент для создания интерфейсов, визуальных эффектов и отладки в игровых движках. В Phaser за это отвечает мощный объект `Graphics`. В этой статье мы разберем, как рисовать дуги (`arc`) с обводкой (`stroke`), управлять их направлением и толщиной линии. Это знание пригодится для создания индикаторов прогресса, круговых шкал здоровья или просто для понимания низкоуровневого рендеринга в вашей игре.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    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.02);
        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.02);
        graphics.strokePath();
        graphics.closePath();
    }
}

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

const game = new Phaser.Game(config);

Создание объекта Graphics и настройка стиля линии

Вся работа начинается с создания объекта Graphics. Это ваш холст для векторного рисования. Первым делом мы задаем стиль линии для будущих фигур.

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

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

Рисование дуги с помощью метода arc

Метод arc — ключевой инструмент для рисования дуг и окружностей. Его параметры определяют форму и положение.

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

Разберем аргументы по порядку: 1. **400, 300**: Координаты X и Y центра дуги. 2. **200**: Радиус дуги. 3. **Phaser.Math.DegToRad(0)**: Начальный угол. Мы используем вспомогательную функцию для конвертации градусов в радианы. 0° — это правая точка окружности. 4. **Phaser.Math.DegToRad(360)**: Конечный угол. 360° создает полную окружность. 5. **false**: Направление рисования. false означает рисование по часовой стрелке. 6. **0.02**: Сглаживание (segments). Определяет, из скольких сегментов состоит дуга. Чем больше значение, тем более гладкой будет кривая, но выше нагрузка на рендеринг. Для полной окружности количество сегментов будет равно 360 * 0.02 = 7.2, что округляется до 7.

Обводка пути и смена стиля

После определения пути командой arc его нужно отрисовать. Для этого используется strokePath. Важно помнить, что lineStyle задает стиль для всего пути, который будет обведен следующей командой strokePath.

graphics.strokePath();
graphics.closePath();

// Меняем стиль для следующей дуги
graphics.beginPath();
graphics.lineStyle(40, 0xff00ff);

closePath() формально завершает текущий контур. После этого мы начинаем новый путь (beginPath) и **обязательно задаем новый стиль линии** — пурпурный цвет и толщину 40 пикселей. Если не вызвать lineStyle снова, будет использован предыдущий стиль (белый, 50px).

Обратное направление и наложение линий

Вторая дуга демонстрирует разницу в направлении рисования.

graphics.arc(400, 300, 200, Phaser.Math.DegToRad(0), Phaser.Math.DegToRad(360), true, 0.02);
graphics.strokePath();
graphics.closePath();

Ключевой параметр здесь — true. Он задает направление рисования **против часовой стрелки**. Поскольку координаты центра, радиус и углы идентичны первой дуге, мы рисуем поверх неё вторую окружность, но в обратном направлении. Из-за того, что вторая линь тоньше (40px против 50px), мы видим белую окантовку вокруг пурпурной линии — это часть первой, более толстой линии, которая осталась неперекрытой.

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

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