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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const rect = new Phaser.Geom.Rectangle(250, 200, 250, 200);

        const graphics = this.add.graphics({ fillStyle: { color: 0x0000aa } });
        graphics.fillRectShape(rect);

        graphics.lineStyle(2, 0xaa0000);

        graphics.lineBetween(rect.x, rect.y - 10, rect.x + rect.width, rect.y - 10);

        graphics.lineBetween(rect.x - 10, rect.y, rect.x - 10, rect.y + rect.height);

        graphics.lineBetween(rect.left, rect.top, rect.right, rect.bottom);

        graphics.lineBetween(rect.centerX - 10, rect.centerY, rect.centerX + 10, rect.centerY);
        graphics.lineBetween(rect.centerX, rect.centerY - 10, rect.centerX, rect.centerY + 10);
    }
}

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

const game = new Phaser.Game(config);

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

Вся работа начинается с создания экземпляра прямоугольника. Конструктор Phaser.Geom.Rectangle принимает четыре аргумента: координаты левого верхнего угла по осям X и Y, ширину и высоту.

Затем, чтобы увидеть прямоугольник на сцене, используется объект Graphics. Он позволяет рисовать фигуры, включая залитые цветом.

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

const graphics = this.add.graphics({ fillStyle: { color: 0x0000aa } });
graphics.fillRectShape(rect);

Рисование линий с помощью базовых свойств

Прямоугольник хранит свои базовые параметры в свойствах `x,y,widthиheight`. Используя их, можно вычислить любую точку на его границе.

В примере сначала задается стиль линии для последующего рисования. Затем рисуется горизонтальная линия над прямоугольником, используя rect.x и rect.width для вычисления координат.

graphics.lineStyle(2, 0xaa0000);

graphics.lineBetween(rect.x, rect.y - 10, rect.x + rect.width, rect.y - 10);

Аналогичным образом, используя rect.y и rect.height, рисуется вертикальная линия слева от прямоугольника.

graphics.lineBetween(rect.x - 10, rect.y, rect.x - 10, rect.y + rect.height);

Использование свойств-сокращений для углов

Для удобства Phaser.Geom.Rectangle предоставляет свойства, которые сразу возвращают вычисленные координаты углов: - left — эквивалентно `x`. - right — равно x + width. - top — эквивалентно `y`. - bottom — равно y + height.

С их помощью можно, например, нарисовать диагональ прямоугольника от левого верхнего до правого нижнего угла одной строкой.

graphics.lineBetween(rect.left, rect.top, rect.right, rect.bottom);

Эти свойства делают код более читаемым и позволяют избежать ручных вычислений.

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

Еще одна полезная группа свойств — координаты центра фигуры: centerX и centerY. Они автоматически вычисляются как x + width / 2 и y + height / 2 соответственно.

Эти свойства идеально подходят для рисования меток, перекрестий или позиционирования объектов относительно центра области. В примере с их помощью рисуется маленький крестик в центре синего прямоугольника.

graphics.lineBetween(rect.centerX - 10, rect.centerY, rect.centerX + 10, rect.centerY);
graphics.lineBetween(rect.centerX, rect.centerY - 10, rect.centerX, rect.centerY + 10);

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

Свойства Phaser.Geom.Rectangle — это мощный инструмент для абстракции геометрических расчетов. Используя left, right, centerX и другие, вы пишете чистый и надежный код для позиционирования. Для экспериментов попробуйте: создать прямоугольник, который следует за курсором мыши, используя его свойства для отрисовки «прицела»; реализовать простую проверку столкновения «прямоугольник-в-прямоугольнике», используя сравнение свойств left, right, top, bottom; или анимировать изменение width и height, наблюдая за автоматическим пересчетом centerX и centerY.