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

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

Версия 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(350, 250, 100, 100);

        const text = this.add.text(100, 100, '');

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

            rect.width = Phaser.Math.FloorTo((pointer.x - 400) * 2, 1, 25);
            rect.height = Phaser.Math.FloorTo((pointer.y - 300) * 2, 1, 25);

            Phaser.Geom.Rectangle.CenterOn(rect, 400, 300);

            text.setText(`Perimeter : ${Phaser.Geom.Rectangle.Perimeter(rect)}`);

            redraw();

        });

        redraw();

        function redraw ()
        {
            graphics.clear();

            graphics.strokeRectShape(rect);
        }
    }
}

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

const game = new Phaser.Game(config);

Создание графики и прямоугольника

В методе create() сцены мы создаем основные объекты для отображения и вычислений.

Первым шагом создается объект Graphics, который будет рисовать контуры. Для него задается стиль линии: толщина 2 пикселя и цвет 0x0000aa (темно-синий).

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

Затем создается геометрический прямоугольник (Phaser.Geom.Rectangle) с начальными координатами (350, 250) и размерами 100x100 пикселей. Этот объект хранит только данные о форме, без визуального представления в сцене.

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

Также создается текстовый объект (text) для вывода вычисленного периметра. Он будет размещен в точке (100, 100).

const text = this.add.text(100, 100, '');

Обработка движения мыши и изменение прямоугольника

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

Внутри обработчика события сначала вычисляются новые ширина и высота прямоугольника. Они зависят от положения курсора относительно точки (400, 300). Функция Phaser.Math.FloorTo округляет значение до целого числа и гарантирует, что размеры будут не меньше 1 и не больше 25 пикселей.

rect.width = Phaser.Math.FloorTo((pointer.x - 400) * 2, 1, 25);
rect.height = Phaser.Math.FloorTo((pointer.y - 300) * 2, 1, 25);

После изменения размеров прямоугольник центрируется на точке (400, 300) с помощью метода Phaser.Geom.Rectangle.CenterOn. Это обеспечивает, что прямоугольник всегда будет рисоваться вокруг этой центральной точки, независимо от своих размеров.

Phaser.Geom.Rectangle.CenterOn(rect, 400, 300);

Затем вычисляется периметр прямоугольника с помощью функции Phaser.Geom.Rectangle.Perimeter и результат выводится в текстовый объект.

text.setText(`Perimeter : ${Phaser.Geom.Rectangle.Perimeter(rect)}`);

После всех вычислений вызывается функция redraw() для обновления графики на экране.

Функция redraw() и конфигурация игры

Функция redraw() отвечает за очистку предыдущего рисунка и отрисовку нового состояния прямоугольника.

function redraw ()
{
    graphics.clear();
    graphics.strokeRectShape(rect);
}

Она вызывается после каждого движения мыши и один раз при создании сцены для первоначального отображения.

Конфигурация игры (config) задает стандартные параметры: размеры окна 800x600, автоматический выбор рендера (Phaser.AUTO) и указание родительского элемента в HTML. Создается экземпляр игры с этой конфигурацией и нашей сценой Example.

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

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

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

  1. заменить прямоугольник на другую геометрическую фигуру (например, круг) и вычислять ее параметры (длину окружности)
  2. добавить цветовое изменение линии при достижении периметра определенного значения
  3. интегрировать эту логику в систему коллизий, где размер объекта влияет на его физические свойства