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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    ellipses;
    graphics;

    create ()
    {
        this.graphics = this.add.graphics({ lineStyle: { color: 0x00aaaa } });

        let ellipse = new Phaser.Geom.Ellipse(400, 300, 0, 0);

        this.ellipses = [ ellipse ];

        for (let i = 0; i < 80; i++)
        {
            ellipse = Phaser.Geom.Ellipse.Clone(ellipse);
            ellipse.width += 1.5;
            ellipse.height += 0.7;

            Phaser.Geom.Ellipse.CircumferencePoint(ellipse, i / 20 * Phaser.Math.PI2, ellipse);

            this.ellipses.push(ellipse);
        }
    }

    update ()
    {
        this.graphics.clear();

        for (let i = 0; i < this.ellipses.length; i++)
        {
            this.ellipses[i].width += 1.5;
            this.ellipses[i].height += 0.7;

            if (this.ellipses[i].width > 800)
            {
                this.ellipses[i].width = 0;
                this.ellipses[i].height = 0;
            }

            this.graphics.strokeEllipseShape(this.ellipses[i]);
        }
    }
}

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

const game = new Phaser.Game(config);

Инициализация сцены и объектов

В методе create() инициализируются основные объекты: Graphics для рисования и массив ellipses для хранения эллипсов. Создается исходный эллипс с нулевыми размерами в центре экрана.

this.graphics = this.add.graphics({ lineStyle: { color: 0x00aaaa } });
let ellipse = new Phaser.Geom.Ellipse(400, 300, 0, 0);
this.ellipses = [ ellipse ];

Клонирование и модификация эллипсов

В цикле создаются копии исходного эллипса с помощью статического метода Phaser.Geom.Ellipse.Clone(). Каждый новый эллипс увеличивается в размерах, а его позиция смещается по точке на окружности предыдущего эллипса с помощью Phaser.Geom.Ellipse.CircumferencePoint(). Это создает спиралевидное расположение.

for (let i = 0; i < 80; i++)
{
    ellipse = Phaser.Geom.Ellipse.Clone(ellipse);
    ellipse.width += 1.5;
    ellipse.height += 0.7;
    Phaser.Geom.Ellipse.CircumferencePoint(ellipse, i / 20 * Phaser.Math.PI2, ellipse);
    this.ellipses.push(ellipse);
}

Анимация в реальном времени

Метод update() отвечает за анимацию. Каждый кадр все эллипсы в массиве увеличиваются, а когда их ширина превышает 800 пикселей, сбрасываются к нулю. Графический контекст очищается и перерисовывает все эллипсы заново.

this.graphics.clear();
for (let i = 0; i < this.ellipses.length; i++)
{
    this.ellipses[i].width += 1.5;
    this.ellipses[i].height += 0.7;
    if (this.ellipses[i].width > 800)
    {
        this.ellipses[i].width = 0;
        this.ellipses[i].height = 0;
    }
    this.graphics.strokeEllipseShape(this.ellipses[i]);
}

Конфигурация игры

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

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

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

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