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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    rectangles = [];
    seedRect;
    graphics;

    create ()
    {
        this.graphics = this.add.graphics({ lineStyle: { color: 0x0000aa }, fillStyle: { color: 0x0000aa } });

        this.seedRect = new Phaser.Geom.Rectangle(400, 300, 30, 30);

        this.input.on('pointermove', pointer =>
        {

            Phaser.Geom.Rectangle.CenterOn(this.seedRect, pointer.x, pointer.y);

        });
    }

    update ()
    {
        const clone = Phaser.Geom.Rectangle.Clone(this.seedRect);

        this.rectangles.push(clone);

        this.graphics.clear();

        for (let i = 0; i < this.rectangles.length; i++)
        {
            const rect = this.rectangles[i];

            Phaser.Geom.Rectangle.Inflate(rect, rect.width * 0.05, rect.height * 0.05);

            if (rect.width > 1600)
            {
                this.rectangles.splice(i--, 1);
            }
            else
            {
                this.graphics.strokeRectShape(rect);
            }
        }
    }
}

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

const game = new Phaser.Game(config);

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

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

this.graphics = this.add.graphics({ lineStyle: { color: 0x0000aa }, fillStyle: { color: 0x0000aa } });

Здесь создается объект Graphics с настройками синего цвета для обводки и заливки.

this.seedRect = new Phaser.Geom.Rectangle(400, 300, 30, 30);

Создается исходный прямоугольник с центром в точке (400, 300) и размерами 30x30 пикселей.

this.input.on('pointermove', pointer => {
    Phaser.Geom.Rectangle.CenterOn(this.seedRect, pointer.x, pointer.y);
});

Обработчик события pointermove вызывает статический метод Phaser.Geom.Rectangle.CenterOn, который перемещает центр seedRect в координаты указателя. Это делает прямоугольник "привязанным" к курсору мыши.

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

В методе update(), который выполняется каждый кадр, происходит клонирование исходного прямоугольника и добавление клона в массив для последующей отрисовки.

const clone = Phaser.Geom.Rectangle.Clone(this.seedRect);
this.rectangles.push(clone);

Метод Phaser.Geom.Rectangle.Clone создает новый объект прямоугольника, полностью копируя свойства seedRect. Это важно, так как мы не хотим изменять исходный шаблон при дальнейших операциях с клонами. Каждый новый клон добавляется в массив rectangles.

this.graphics.clear();

Перед каждой перерисовкой холст очищается, чтобы удалить предыдущие кадры и создать анимацию.

Трансформация прямоугольников и условное удаление

Далее в цикле происходит обработка каждого прямоугольника из массива: его размер увеличивается, и проверяется условие для удаления.

Phaser.Geom.Rectangle.Inflate(rect, rect.width * 0.05, rect.height * 0.05);

Статический метод Phaser.Geom.Rectangle.Inflate равномерно увеличивает ширину и высоту прямоугольника на 5% от его текущих размеров. Изменения применяются непосредственно к объекту rect.

if (rect.width > 1600) {
    this.rectangles.splice(i--, 1);
}

Если ширина прямоугольника превышает 1600 пикселей, он удаляется из массива с помощью splice. Уменьшение счетчика i-- компенсирует сдвиг индексов после удаления элемента, чтобы не пропустить следующий прямоугольник.

else {
    this.graphics.strokeRectShape(rect);
}

Если прямоугольник не удален, он отрисовывается на холсте с помощью метода strokeRectShape, который принимает объект геометрии и рисует его контур.

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

Использование методов Clone, CenterOn и Inflate из Phaser.Geom.Rectangle позволяет легко управлять геометрией для создания динамических эффектов. Этот паттерн можно адаптировать для генерации следов за движущимся объектом, простых взрывов или волновых эффектов. Попробуйте изменить коэффициент увеличения, добавить изменение цвета в зависимости от размера или использовать другие фигуры, например, эллипсы, для создания разнообразных визуализаций.