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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x0000aa } });

        const rect = new Phaser.Geom.Rectangle(0, 290, 20, 20);

        for (let angle = 0; rect.x < 800; angle += Math.PI / 18)
        {

            graphics.strokeRectShape(rect);

            Phaser.Geom.Rectangle.Offset(rect, 20, Math.cos(angle) * 40);
        }
    }
}

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

const game = new Phaser.Game(config);

Суть метода Phaser.Geom.Rectangle.Offset

Метод Phaser.Geom.Rectangle.Offset — это статическая функция, которая сдвигает заданный прямоугольник на указанные значения по осям X и Y. Он модифицирует исходный объект прямоугольника, а не создает новый.

Основная сигнатура метода выглядит так:

Phaser.Geom.Rectangle.Offset(rect, x, y);

Где rect — это объект Phaser.Geom.Rectangle, а `xиy` — величины смещения. Это мощный инструмент для итеративного построения траекторий в цикле.

Анализ исходного кода

Давайте построчно разберем пример. Сначала в сцене создается объект graphics для отрисовки линий.

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

Затем создается исходный прямоугольник с координатами (0, 290), шириной и высотой по 20 пикселей.

const rect = new Phaser.Geom.Rectangle(0, 290, 20, 20);

Далее запускается цикл for. Его условие продолжения — rect.x < 800, то есть пока прямоугольник не уйдет за правую границу холста шириной 800 пикселей.

for (let angle = 0; rect.x < 800; angle += Math.PI / 18)

В каждой итерации происходит две ключевые операции.

Движение по синусоиде

Внутри цикла сначала отрисовывается текущее положение прямоугольника с помощью graphics.strokeRectShape.

graphics.strokeRectShape(rect);

Затем вызывается метод Offset. Значение смещения по X постоянно и равно 20, что обеспечивает равномерное движение вправо. А вот смещение по Y вычисляется по формуле Math.cos(angle) * 40.

Phaser.Geom.Rectangle.Offset(rect, 20, Math.cos(angle) * 40);

Использование косинуса от угла (angle) дает волнообразное движение. Угол увеличивается на Math.PI / 18 (10 градусов) каждый шаг, создавая плавную периодическую функцию. Множитель 40 определяет амплитуду волны. Таким образом, прямоугольник движется вправо, одновременно колеблясь вверх и вниз.

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

Код примера завершается стандартной для Phaser 3 конфигурацией игры. Обратите внимание, что ширина холста (width: 800) напрямую связана с условием выхода из цикла rect.x < 800.

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

Весь код выполняется один раз в методе create, поэтому на экране мы видим не анимацию в реальном времени, а сразу готовую "дорожку" — след из множества нарисованных прямоугольников.

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

Метод Phaser.Geom.Rectangle.Offset — это простой и эффективный способ программно задавать смещение геометрической фигуры. Показанный пример демонстрирует, как с помощью цикла и тригонометрической функции можно построить сложную траекторию. Для экспериментов попробуйте заменить Math.cos на Math.sin, измените амплитуду или шаг угла. Этот же принцип можно применить не только к отрисовке, но и к позиционированию спрайтов или hit-боксов, создавая, например, движение врага по волнообразной траектории.