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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const ellipse = new Phaser.Geom.Ellipse(400, 300);

        const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00aaaa } });

        for (let i = 0; i < 26; i++)
        {
            ellipse.setSize(i * 32, i * 24);

            // stroke with increasing smoothness
            graphics.strokeEllipseShape(ellipse, 32 + i);
        }
    }
}

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

const game = new Phaser.Game(config);

Создание эллипса и графического контекста

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

Сначала создается экземпляр эллипса. Первые два аргумента конструктора Phaser.Geom.Ellipse — это координаты центра (x, y). Третий и четвертый аргументы (ширина и высота) не указаны, поэтому по умолчанию они равны нулю.

Для отображения фигуры используется объект Graphics. В его конфигурации задается стиль линии: толщина и цвет в шестнадцатеричном формате.

const ellipse = new Phaser.Geom.Ellipse(400, 300);
const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00aaaa } });

Динамическое изменение размера методом setSize

Метод setSize() класса Phaser.Geom.Ellipse — это ключевой инструмент для изменения фигуры. Он принимает два аргумента: ширину (width) и высоту (height) эллипса. После вызова метода внутренние свойства объекта обновляются, но на экране ничего не меняется, пока не будет вызвана команда отрисовки.

В примере используется цикл, где на каждой итерации размер увеличивается. Ширина и высота вычисляются на основе индекса `i`, что создает равномерное масштабирование. Центр эллипса (заданный при создании) остается неизменным.

for (let i = 0; i < 26; i++)
{
    ellipse.setSize(i * 32, i * 24);
}

Отрисовка с увеличением плавности

Чтобы увидеть изменения, нужно нарисовать эллипс. Метод strokeEllipseShape() объекта Graphics обводит контур фигуры. Первый аргумент — сам объект эллипса, второй — необязательный параметр smoothness (плавность).

Параметр smoothness определяет количество сегментов, из которых состоит контур эллипса. Чем выше значение, тем более гладкой выглядит кривая, но и тем больше вычислительная нагрузка. В примере плавность увеличивается с каждой новой фигурой, начиная с 32. Это создает визуальный эффект, где внешние, большие эллипсы выглядят более отполированными.

Важно: strokeEllipseShape не очищает предыдущие рисунки. Поэтому все 26 эллипсов отображаются на экране одновременно, создавая концентрическую композицию.

graphics.strokeEllipseShape(ellipse, 32 + i);

Полный код сцены и конфигурация игры

Весь код должен быть помещен в метод create() сцены, который выполняется один раз при ее создании. Конфигурация игры (config) задает базовые параметры, такие как размер холста и тип рендерера. Ключевой момент — указание нашего класса Example в свойстве scene.

class Example extends Phaser.Scene
{
    create ()
    {
        // ... весь код из примеров выше
    }
}

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

const game = new Phaser.Game(config);

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

Метод setSize() — это простой и эффективный способ анимировать изменение формы эллипса, а параметр плавности отрисовки позволяет контролировать качество контура. Для экспериментов попробуйте

  1. Изменять размер эллипса в реальном времени в ответ на действия игрока (например, при наведении курсора)
  2. Использовать fillEllipseShape для заливки цветом и менять его в зависимости от размера
  3. Привязать размер эллипса к здоровью персонажа, создавая динамический индикатор
  4. Создать эффект "ударной волны", очищая холст (graphics.clear()) перед каждой новой отрисовкой в цикле