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

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

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

Живой запуск

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

Исходный код


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

        const graphics = this.add.graphics({ fillStyle: { color: 0xff0000 } });
        graphics.fillCircleShape(circle);

        circle.diameter = circle.radius;

        graphics.fillStyle(0x00ff00);
        graphics.fillCircleShape(circle);

        circle.radius = 10;

        graphics.fillStyle(0x0000ff);
        graphics.fillCircleShape(circle);
    }
}

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

const game = new Phaser.Game(config);

Создание геометрического объекта и его отрисовка

Первым шагом мы создаём объект круга, используя класс Phaser.Geom.Circle. Этот объект является чисто математическим представлением фигуры и не отображается на экране сам по себе. Для визуализации нам нужен объект Graphics.

const circle = new Phaser.Geom.Circle(400, 300, 100);
const graphics = this.add.graphics({ fillStyle: { color: 0xff0000 } });
graphics.fillCircleShape(circle);

Конструктор Circle принимает три аргумента: координаты центра по осям X и Y и начальный радиус. Объект graphics создаётся с помощью фабричного метода this.add.graphics(), и ему задаётся стиль заливки красным цветом. Метод fillCircleShape() использует данные из объекта circle для отрисовки заполненной фигуры на холсте.

Изменение размера через свойство diameter

Одно из ключевых преимуществ объектов геометрии Phaser — их изменяемость. Свойства radius и diameter являются сеттерами. Изменение одного мгновенно влияет на другой, так как диаметр равен удвоенному радиусу.

circle.diameter = circle.radius;
graphics.fillStyle(0x00ff00);
graphics.fillCircleShape(circle);

В этом фрагменте мы устанавливаем diameter равным текущему radius. Поскольку изначально радиус был 100 пикселей, эта операция уменьшает диаметр до 100 пикселей, а радиус — до 50. Затем мы меняем цвет заливки Graphics на зелёный и перерисовываем круг поверх предыдущего. Важно: graphics.fillStyle() изменяет только будущие операции рисования, предыдущее красное изображение остаётся на холсте.

Прямое управление радиусом

Для более тонкого контроля можно напрямую задавать радиус. Это особенно полезно для анимации постепенного увеличения или уменьшения объекта.

circle.radius = 10;
graphics.fillStyle(0x0000ff);
graphics.fillCircleShape(circle);

Здесь мы устанавливаем радиус круга в 10 пикселей, что также обновит его диаметр до 20. После смены цвета заливки на синий круг отрисовывается вновь. Все три круга (красный, зелёный и синий) видны на экране, так как каждый вызов fillCircleShape() добавляет новую фигуру, не стирая старые.

Практическое применение и важные детали

Описанный подход — основа для многих игровых механик: * **Анимация:** В update()-цикле можно плавно изменять circle.radius для создания эффектов пульсации или взрыва. * **Расчёты:** Объект Circle можно использовать для проверки попадания точки (circle.contains(x, y)) без его отрисовки. * **Коллайдеры:** Геометрические объекты часто используются для задания зон физических взаимодействий.

Важно помнить: объект Phaser.Geom.Circle не имеет собственной позиции в дереве отображения (Display List). Это просто контейнер для данных. Для его отображения, как показано в примере, всегда требуется объект Graphics или другие методы (например, маски).

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

Манипулирование свойствами radius и diameter объекта Phaser.Geom.Circle — это простой, но мощный инструмент. Для экспериментов попробуйте анимировать круг, изменяя его радиус в зависимости от времени или ввода пользователя, или используйте несколько кругов для создания сложных составных фигур и геометрических паттернов.