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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();

        graphics.lineStyle(4, 0xff00ff, 1);

        //  Without this the arc will appear closed when stroked
        graphics.beginPath();

        // arc (x, y, radius, startAngle, endAngle, anticlockwise)
        graphics.arc(400, 300, 200, Phaser.Math.DegToRad(90), Phaser.Math.DegToRad(180), true);

        //  Uncomment this to close the path before stroking
        // graphics.closePath();

        graphics.strokePath();
    }
}

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

const game = new Phaser.Game(config);

Настройка сцены и объекта Graphics

Вся отрисовка в Phaser происходит внутри сцены (Scene). Мы создаем класс сцены, а в его методе create инициализируем графику.

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();
    }
}

Ключевой объект graphics — это наш холст. Сначала нужно задать стиль линии: толщину, цвет в HEX-формате и альфа-канал (прозрачность).

graphics.lineStyle(4, 0xff00ff, 1);

Здесь `4— толщина линии в пикселях,0xff00ff— пурпурный цвет,1` — полная непрозрачность.

Начало пути и метод arc

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

graphics.beginPath();

Метод arc рисует дугу окружности. Его параметры: - `x,y` — координаты центра окружности. - radius — её радиус. - startAngle, endAngle — начальный и конечный угол в радианах. - anticlockwise — направление рисования (true — против часовой стрелки).

Phaser предоставляет удобный конвертер Phaser.Math.DegToRad.

graphics.arc(400, 300, 200, Phaser.Math.DegToRad(90), Phaser.Math.DegToRad(180), true);

Этот код рисует дугу от 90 до 180 градусов (от направления «вверх» до «влево») против часовой стрелки радиусом 200 пикселей от центра (400, 300).

Обводка пути и замыкание

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

graphics.strokePath();

Важный нюанс: путь, созданный arc, по умолчанию считается незамкнутым. Если вызвать strokePath(), мы увидим чистую дугу. Однако если раскомментировать closePath(), графическая система соединит начальную и конечную точки дуги прямой линией, превратив её в сегмент круга.

//  Uncomment this to close the path before stroking
// graphics.closePath();

Это поведение критично при рисовании сложных фигур из нескольких дуг или когда нужна именно замкнутая область (например, для последующей заливки методом fillPath).

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

Код сцены необходимо передать в основной объект игры Phaser.Game через конфигурацию.

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

const game = new Phaser.Game(config);

Здесь мы задаем размеры холста, используем WEBGL-рендерер для производительности, указываем ID HTML-элемента для вставки игры (parent) и передаём наш класс сцены. После создания экземпляра game Phaser автоматически вызывает метод create сцены Example и начинает игровой цикл.

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

Объект Graphics — мощный инструмент для программной отрисовки. Понимание работы с путями (beginPath, closePath, strokePath) — основа для создания динамической графики. Для экспериментов попробуйте: 1. Анимировать дугу, меняя endAngle в update, чтобы создать индикатор загрузки. 2. Скомбинировать несколько дуг для рисования сложных узоров или «щитов» вокруг персонажа. 3. Использовать fillPath после closePath для создания закрашенных сегментов круга.