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

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

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

Живой запуск

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

Исходный код


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

        const rect = new Phaser.Geom.Rectangle(100, 100, 400, 400);

        //  The green rectangle is the original one
        graphics.strokeRectShape(rect);

        Phaser.Geom.Rectangle.Inflate(rect, -128, -128);

        //  Draw the now deflated rectangle in yellow
        graphics.lineStyle(2, 0xffff00);

        graphics.strokeRectShape(rect);
    }
}

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

const game = new Phaser.Game(config);

Создание сцены и графики

В Phaser вся отрисовка происходит внутри сцены (Scene). В методе create мы инициализируем графический объект, который будет использоваться для рисования.

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

Здесь this.add.graphics создаёт холст для рисования примитивов. Мы задаём стиль линии: толщина 2 пикселя и зелёный цвет (0x00ff00), а также красный цвет заливки (0xff0000). Этот объект будет использоваться для отображения прямоугольников.

Инициализация и отрисовка прямоугольника

Создадим прямоугольник с помощью встроенного класса Phaser.Geom.Rectangle. Его конструктор принимает координаты левого верхнего угла (x, y), ширину и высоту.

const rect = new Phaser.Geom.Rectangle(100, 100, 400, 400);

Теперь мы можем нарисовать контур этого прямоугольника на графическом объекте.

graphics.strokeRectShape(rect);

Метод strokeRectShape обводит переданную геометрическую фигуру (в нашем случае rect) линией с заданным ранее стилем. На экране появится зелёный квадрат размером 400x400 пикселей.

Изменение размера прямоугольника

Ключевой метод в этом примере — Phaser.Geom.Rectangle.Inflate. Он изменяет размеры прямоугольника, смещая его стороны относительно центра.

Phaser.Geom.Rectangle.Inflate(rect, -128, -128);

Первый аргумент — это целевой прямоугольник, который будет изменён. Второй и третий аргументы — это значения, на которые увеличивается (или уменьшается) ширина и высота соответственно. Важно: эти значения применяются к каждой стороне. Так, -128 уменьшит ширину на 256 пикселей (по 128 слева и справа), а высоту — также на 256 пикселей (по 128 сверху и снизу). В результате прямоугольник сожмётся, сохранив свой центр.

Визуализация результата

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

graphics.lineStyle(2, 0xffff00);

Здесь мы устанавливаем толщину линии 2 пикселя и жёлтый цвет (0xffff00). Затем рисуем контур изменённого прямоугольника.

graphics.strokeRectShape(rect);

На экране поверх зелёного квадрата появится жёлтый квадрат меньшего размера, наглядно демонстрируя эффект сжатия. Исходный объект rect теперь хранит новые размеры.

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

Метод Inflate — это мощный инструмент для работы с прямоугольными областями в Phaser. Вы можете использовать его для создания динамических хитбоксов, зон приближения камеры или визуальных эффектов сжатия. Попробуйте поэкспериментировать: примените сжатие к прямоугольнику, который следует за курсором мыши, или используйте положительные значения аргументов для увеличения области. Это откроет новые возможности в управлении игровым пространством.