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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics({ lineStyle: { width: 3, color: 0xff00ff }, fillStyle: { color: 0x00ff00 } });

        const circle = new Phaser.Geom.Circle(40, 575, 25);

        function drawCircle ()
        {
            const circumference = Phaser.Geom.Circle.Circumference(circle);

            graphics.lineBetween(circle.right + 5, circle.bottom, circle.right + 5, circle.bottom - circumference);
            graphics.fillCircleShape(circle);
        }

        drawCircle(graphics, circle);

        circle.setTo(175, 550, 50);
        drawCircle(graphics, circle);

        circle.setTo(360, 525, 75);
        drawCircle(graphics, circle);

        circle.setTo(595, 500, 100);
        drawCircle(graphics, circle);
    }
}

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

const game = new Phaser.Game(config);

Создание сцены и графического объекта

Вся визуализация в примере происходит внутри метода create сцены. Первым делом мы создаем графический объект (Graphics), который будет рисовать линии и залитые фигуры. Его стили задаются сразу при создании.

const graphics = this.add.graphics({
    lineStyle: { width: 3, color: 0xff00ff },
    fillStyle: { color: 0x00ff00 }
});

Здесь lineStyle определяет параметры линий (толщина 3 пикселя, цвет magenta), а fillStyle — цвет заливки (зеленый). Этот объект graphics будет использоваться для всех последующих операций рисования.

Работа с геометрическим кругом (Phaser.Geom.Circle)

Круг описывается объектом Phaser.Geom.Circle. Он не является игровым объектом (Sprite, Image), а представляет собой математическое описание фигуры: координаты центра (x, y) и радиус.

const circle = new Phaser.Geom.Circle(40, 575, 25);

В этом коде создается круг с центром в точке (40, 575) и радиусом 25 пикселей. Важно понимать, что этот объект — просто контейнер для данных. Его можно перемещать и масштабировать методом setTo, что и происходит далее в примере.

Функция для рисования и вычисления длины окружности

Ключевая логика вынесена в функцию drawCircle. Её задача — вычислить длину окружности для текущего состояния объекта circle и нарисовать сам круг вместе с визуальным представлением его периметра.

function drawCircle() {
    const circumference = Phaser.Geom.Circle.Circumference(circle);
    graphics.lineBetween(circle.right + 5, circle.bottom, circle.right + 5, circle.bottom - circumference);
    graphics.fillCircleShape(circle);
}

1. **Вычисление:** Phaser.Geom.Circle.Circumference(circle) — статический метод, который принимает объект круга и возвращает число (float) — длину его окружности по формуле 2 * π * радиус. Использовать готовый API надежнее и читаемее, чем писать формулу вручную. 2. **Визуализация периметра:** graphics.lineBetween рисует вертикальную линию справа от круга. Длина этой линии в точности равна вычисленной длине окружности. Это наглядная демонстрация результата. 3. **Рисование круга:** graphics.fillCircleShape(circle) заливает зеленым цветом сам круг, используя его геометрические данные.

Многократное использование с разными параметрами

Сила подхода в его переиспользуемости. Мы меняем параметры исходного круга и снова вызываем ту же функцию рисования.

circle.setTo(175, 550, 50);
drawCircle(graphics, circle);

Метод circle.setTo переопределяет свойства круга: новые координаты центра и новый радиус. После каждого изменения вызывается drawCircle, которая вычисляет новую длину окружности и рисует обновленную сцену. Таким образом, одним блоком кода мы генерируем несколько наглядных примеров с разным масштабом.

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

Phaser предоставляет удобные и производительные методы для работы с геометрией. Использование Phaser.Geom.Circle.Circumference — это лучшая практика для получения длины окружности, которую можно применить, например, для расчета пути катящегося шара или определения зоны действия заклинания. Для экспериментов попробуйте динамически менять радиус круга в ответ на действия игрока и выводить числовое значение длины окружности на экран с помощью текстового объекта.