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

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

Работа с геометрией — основа для многих игровых механик: коллизии, зоны взаимодействия, расчёт областей. Часто нужно не просто нарисовать фигуру, а динамически изменить её размер. Метод `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(200, 200, 128, 128);

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

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

        //  Draw the now inflated 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). Мы создаём графический объект (Graphics) для рисования примитивов и определяем начальный прямоугольник.

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

const rect = new Phaser.Geom.Rectangle(200, 200, 128, 128);

Объект graphics настроен на рисование зелёных контуров (lineStyle) и красной заливки (fillStyle). Прямоугольник rect создаётся с координатами левого верхнего угла (200, 200), шириной и высотой по 128 пикселей. Это наша исходная фигура.

Отрисовка исходной фигуры

Прежде чем изменять прямоугольник, стоит его визуализировать. Для этого используется метод strokeRectShape(), который обводит контур переданного геометрического объекта.

graphics.strokeRectShape(rect);

На этом этапе на экране появится зелёный квадрат. Метод strokeRectShape — часть Graphics API и работает с любым объектом, у которого есть свойства `x,y,width,height`.

Ключевой шаг: увеличение прямоугольника

Самый важный момент — применение статического метода Inflate класса Phaser.Geom.Rectangle. Он изменяет исходный прямоугольник, а не создаёт новый.

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

Метод принимает три аргумента: сам объект прямоугольника, величину увеличения по ширине и по высоте. Важно: прямоугольник увеличивается во все стороны от своего центра. То есть его ширина и высота увеличатся на удвоенные переданные значения (по 128 пикселей с каждой стороны). После вызова rect.width станет равным 384 (128 + 128*2).

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

Чтобы увидеть разницу, нужно нарисовать изменённый прямоугольник другим цветом. Сначала меняем стиль линии у нашего графического объекта.

graphics.lineStyle(2, 0xffff00);
graphics.strokeRectShape(rect);

Первой строкой мы задаём новый стиль контура: толщина 2 пикселя, жёлтый цвет (0xffff00). Второй строкой снова вызываем strokeRectShape для того же объекта rect, который уже был изменён методом Inflate. На экране поверх зелёного квадрата появится жёлтый, втрое больший по площади.

Конфигурация и запуск игры

Код сцены нужно передать в основной конфигурационный объект игры (Game), чтобы Phaser мог её запустить.

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

const game = new Phaser.Game(config);

В объекте config задаются базовые параметры: размеры холста, тип рендерера (Phaser.AUTO выбирает между WebGL и Canvas), ID HTML-контейнера и класс основной сцены. Создание экземпляра new Phaser.Game(config) инициализирует всю игровую систему.

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

Метод Phaser.Geom.Rectangle.Inflate() — это мощный и простой инструмент для работы с прямоугольными областями. Он модифицирует объект на месте, что эффективно для производительности. Поэкспериментируйте: попробуйте передавать отрицательные значения для уменьшения прямоугольника, используйте изменённый rect для расчёта коллизий с помощью Phaser.Geom.Rectangle.Contains() или анимируйте его размер в цикле обновления сцены (update), чтобы создать эффект пульсирующей зоны.