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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const rect = new Phaser.Geom.Rectangle(0, 0, 8, 6);

        const graphics = this.add.graphics({ lineStyle: { color: 0x0000ff } });

        graphics.strokeRectShape(rect);

        for (let i = 0; i < 11; i++)
        {
            rect.setTo(rect.centerX, rect.centerY, rect.width * 1.4, rect.height * 1.4);

            graphics.strokeRectShape(rect);
        }
    }
}

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

const game = new Phaser.Game(config);

Создание и первичная отрисовка прямоугольника

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

const rect = new Phaser.Geom.Rectangle(0, 0, 8, 6);
const graphics = this.add.graphics({ lineStyle: { color: 0x0000ff } });
graphics.strokeRectShape(rect);

Первой строкой мы создаем прямоугольник с координатами левого верхнего угла (0, 0), шириной 8 и высотой 6 пикселей. Далее создается объект graphics с синим цветом линии (0x0000ff). Метод strokeRectShape принимает наш прямоугольник rect и рисует его контур на сцене.

Волшебный метод `setTo` и его параметры

Ключевой метод в этом примере — setTo. Он позволяет полностью переопределить свойства прямоугольника за один вызов.

rect.setTo(x, y, width, height);

Метод принимает четыре аргумента: новые координаты X (центр по горизонтали) и Y (центр по вертикали) текущего прямоугольника. Именно эти значения становятся новыми координатами его левого верхнего угла. Таким образом, каждый новый прямоугольник растет из центра предыдущего.

2. Новые размеры: rect.width * 1.4 и rect.height * 1.4. На каждой итерации ширина и высота увеличиваются на 40% относительно размеров предыдущего прямоугольника.

Цикл анимации и визуальный результат

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

for (let i = 0; i < 11; i++)
{
    rect.setTo(rect.centerX, rect.centerY, rect.width * 1.4, rect.height * 1.4);
    graphics.strokeRectShape(rect);
}

На каждой итерации: 1. Метод setTo мгновенно переопределяет свойства текущего объекта rect, используя его же актуальные значения centerX, centerY, width и height. 2. Обновленный прямоугольник сразу же отрисовывается с помощью graphics.strokeRectShape(rect). В результате на экране появляется серия из 11 вложенных прямоугольников, которые постепенно увеличиваются, образуя эффект "расходящихся волн" из одной точки. Это наглядная демонстрация того, как один объект можно последовательно трансформировать для создания сложного визуала.

Практическое применение и вариации

Этот паттерн — изменение объекта в цикле с последующей отрисовкой — крайне полезен в геймдеве.

* **Эффекты удара или взрыва:** Представьте, что это не прямоугольники, а круги (Phaser.Geom.Circle), расходящиеся от точки столкновения. * **Зоны обнаружения:** Можно визуализировать постепенное увеличение радиуса обнаружения для врага или сонара. * **Интерфейсы:** Создание анимации выделения или пульсации элементов UI.

Поэкспериментируйте с логикой внутри setTo:

// Рост не из центра, а из левого верхнего угла
rect.setTo(rect.x, rect.y, rect.width * 1.2, rect.height * 1.2);

// Добавление случайности для "дрожащего" эффекта
rect.setTo(
    rect.centerX + Phaser.Math.Between(-2, 2),
    rect.centerY + Phaser.Math.Between(-2, 2),
    rect.width * 1.3,
    rect.height * 1.3
);

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

Метод setTo — это ваш инструмент для программной и кадр-за-кадром анимации геометрических объектов. Вместо подготовки множества спрайтов вы управляете параметрами одной фигуры, что эффективно с точки зрения производительности и гибко в настройке. Для дальнейших экспериментов попробуйте применить ту же логику к другим геометрическим объектам, например, Phaser.Geom.Circle или Phaser.Geom.Line, или комбинируйте изменение размера с изменением цвета линии в объекте graphics для создания градиентных эффектов.