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

В игровой разработке часто нужно работать с геометрическими формами и их свойствами. Знание точных размеров объекта — ключ к расчёту столкновений, позиционированию UI-элементов или динамическому изменению уровня. В этой статье разберём пример, который показывает, как получить размер прямоугольника в виде объекта `Phaser.Math.Vector2` с помощью метода `Phaser.Geom.Rectangle.GetSize()`. Это простой, но мощный инструмент для точного контроля над геометрией в вашей игре.

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

Живой запуск

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

Исходный код


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

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

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

            rect.width = Phaser.Math.FloorTo(pointer.x, 1, 20);
            rect.height = Phaser.Math.FloorTo(pointer.y, 1, 20);

            redraw();

        });

        redraw();

        function redraw ()
        {
            graphics.clear();

            graphics.strokeRectShape(rect);

            graphics.fillPointShape(Phaser.Geom.Rectangle.GetSize(rect), 10);
        }
    }
}

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

const game = new Phaser.Game(config);

Зачем нужен GetSize?

Объект Phaser.Geom.Rectangle хранит свои координаты (x, y) и размеры (width, height) как отдельные числа. Метод Phaser.Geom.Rectangle.GetSize() предоставляет удобный способ получить эти размеры (ширину и высоту) в виде единого объекта — вектора (Phaser.Math.Vector2). Это особенно полезно, когда размеры нужно передать в другую функцию, которая ожидает вектор, или когда вы хотите работать с шириной и высотой как с парой связанных значений.

Вектор — это структура с полями `x(в данном случае хранит ширину) иy` (хранит высоту).

Разбор сцены и создания прямоугольника

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

const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x0000aa }, fillStyle: { color: 0x00aa00 } });
const rect = new Phaser.Geom.Rectangle(0, 0, 100, 100);

Объект graphics отвечает за отрисовку линий и заливку. Прямоугольник rect создаётся с начальными координатами (0, 0) и размером 100x100 пикселей. Обратите внимание: Phaser.Geom.Rectangle — это объект данных, он не отрисовывается сам по себе. Для его визуализации используется graphics.

Динамическое изменение размеров

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

this.input.on('pointermove', pointer => {
    rect.width = Phaser.Math.FloorTo(pointer.x, 1, 20);
    rect.height = Phaser.Math.FloorTo(pointer.y, 1, 20);
    redraw();
});

Функция Phaser.Math.FloorTo округляет координаты указателя вниз с заданным шагом. Параметры: значение, шаг округления и минимальное значение. Так, pointer.x округляется с шагом 1, но не может стать меньше 20. Это гарантирует, что прямоугольник не исчезнет и будет изменяться плавно. После обновления размеров вызывается функция redraw() для перерисовки кадра.

Визуализация и получение размера

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

function redraw ()
{
    graphics.clear();
    graphics.strokeRectShape(rect);
    graphics.fillPointShape(Phaser.Geom.Rectangle.GetSize(rect), 10);
}

Сначала graphics.clear() удаляет всё с предыдущего кадра. Затем graphics.strokeRectShape(rect) рисует контур (синяя линия) текущего прямоугольника.

Самое важное: Phaser.Geom.Rectangle.GetSize(rect) возвращает вектор, где x = rect.width, а y = rect.height. Этот вектор передаётся в graphics.fillPointShape(). Второй аргумент (10) — радиус отрисовки точки. Таким образом, зелёная точка рисуется не в координатах (0,0), а в координатах, равных размеру прямоугольника. Если rect имеет размер 150x80, точка появится на позиции (150, 80) на холсте, наглядно демонстрируя вектор размера.

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

Код завершается стандартной для Phaser 3 конфигурацией игры.

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

Объект config определяет базовые настройки: размер холста 800x600, автоматический выбор WebGL/Canvas, контейнер для рендеринга и нашу сцену Example. Создание экземпляра Phaser.Game с этой конфигурацией инициализирует игровой цикл.

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

Метод GetSize() — это мост между геометрическим объектом и векторной математикой Phaser. Он упрощает код, когда размеры нужно использовать как единое целое. Для экспериментов попробуйте

  1. использовать полученный вектор для расчёта диагонали прямоугольника
  2. передать его в физический движок для задания размеров тела
  3. привязать размер UI-панели к размеру игровой области, полученному этим способом