Phaser.js: всё об играх и разработке

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

Создание динамических геометрических фигур — важный навык для визуализации траекторий, зон поражения или областей эффектов в играх. Встроенный геометрический модуль Phaser позволяет не только создавать статичные объекты, но и легко модифицировать их параметры в реальном времени. В этой статье мы разберем, как с помощью одного метода `setTo` оживить простой круг, превратив его в инструмент для генерации сложных узоров и анимаций, что особенно полезно для отладки игровой логики или создания procedural-графики.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const circle = new Phaser.Geom.Circle(10, 10, 10);

        const graphics = this.add.graphics({ lineStyle: { color: 0x00ff00 } });
        graphics.strokeCircleShape(circle);

        for (let i = 0; i < 38; i++)
        {
            circle.setTo(circle.x + 10, circle.y + 10, circle.radius + 10);
            graphics.strokeCircleShape(circle);
        }
    }
}

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

const game = new Phaser.Game(config);

Создание базовой геометрии

Вся работа начинается с создания экземпляра геометрического объекта. В Phaser для этого используется класс Phaser.Geom.Circle.

const circle = new Phaser.Geom.Circle(10, 10, 10);

Эта строка создает круг с центром в точке (10, 10) и радиусом 10 пикселей. Первые два аргумента — это координаты X и Y центра на плоскости сцены, третий — радиус. На данном этапе круг — это просто математический объект, данные. Чтобы увидеть его на экране, необходимо нарисовать его с помощью графического контекста.

Визуализация с помощью Graphics

Объект Graphics в Phaser — это мощный инструмент для программного рисования. Он работает как холст, на который можно выводить примитивы.

const graphics = this.add.graphics({ lineStyle: { color: 0x00ff00 } });
graphics.strokeCircleShape(circle);

Сначала мы создаем объект graphics, задавая стиль линии зеленого цвета (0x00ff00). Затем метод strokeCircleShape принимает наш геометрический объект circle и рисует на холсте только его контур (заливки не будет). Теперь круг виден на сцене.

Динамическое изменение параметров круга

Вот где начинается самое интересное. Метод setTo объекта Phaser.Geom.Circle позволяет полностью переопределить его свойства, задав новые значения.

circle.setTo(circle.x + 10, circle.y + 10, circle.radius + 10);

Эта строка делает три вещи: 1. Смещает центр круга на 10 пикселей вправо по оси X. 2. Смещает центр круга на 10 пикселей вниз по оси Y. 3. Увеличивает радиус круга на 10 пикселей.

Важно: метод изменяет состояние *существующего* объекта circle, а не создает новый. Это эффективно с точки зрения производительности.

Создание анимации в цикле

Чтобы создать последовательность из нескольких кругов, мы помещаем код изменения и отрисовки в цикл.

for (let i = 0; i < 38; i++)
{
    circle.setTo(circle.x + 10, circle.y + 10, circle.radius + 10);
    graphics.strokeCircleShape(circle);
}

На каждой итерации цикла: 1. Параметры круга обновляются через setTo (центр смещается вниз и вправо, радиус растет). 2. Новое состояние круга сразу же рисуется на том же графическом объекте graphics.

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

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

Весь код должен выполняться в контексте сцены Phaser. Вот стандартная конфигурация для запуска этого примера.

const config = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'phaser-example',
    scene: Example // Наш класс сцены
};

const game = new Phaser.Game(config);

Объект config задает основные параметры игры: размеры холста, способ рендеринга (Phaser.AUTO выбирает между WebGL и Canvas) и корневой класс сцены. Создание экземпляра Phaser.Game с этой конфигурацией инициализирует игровой цикл и запускает сцену.

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

Метод setTo — это ключ к управлению геометрией в реальном времени. Он открывает путь не только для статических построений, но и для анимаций, основанных на изменении параметров. Попробуйте поэкспериментировать: измените шаг приращения координат и радиуса, чтобы получить другие узоры (например, расходящиеся волны). Используйте circle.setTo внутри обработчика события update для создания круга, который "преследует" курсор мыши, постоянно увеличиваясь. Или привяжите изменение радиуса к громкости звука в игре для создания визуализатора.