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

Работа с геометрией — основа для множества игровых механик: от столкновений до построения траекторий. Класс `Phaser.Geom.Line` предоставляет не только координаты концов отрезка, но и удобные свойства для его границ. Эта статья на практическом примере покажет, как использовать свойства `x1`, `y1`, `x2`, `y2`, `left`, `right`, `top`, `bottom` для визуализации и отладки. Вы научитесь точно определять, где находятся края вашей линии, что особенно полезно при расчете попаданий или выравнивании объектов.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const line = new Phaser.Geom.Line(100, 500, 700, 100);

        const graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa } });
        graphics.strokeLineShape(line);

        graphics.lineStyle(2, 0x00aa00);

        graphics.beginPath();
        graphics.moveTo(line.left, line.top);
        graphics.lineTo(line.right, line.top);
        graphics.lineTo(line.right, line.bottom);
        graphics.lineTo(line.left, line.bottom);
        graphics.lineTo(line.left, line.top);
        graphics.strokePath();

        graphics.lineStyle(2, 0xaa0000);

        graphics.lineBetween(line.x1, line.y1 + 10, line.x2, line.y1 + 10);

        graphics.lineBetween(line.x1 - 10, line.y1, line.x1 - 10, line.y2);

    }
}

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

const game = new Phaser.Game(config);

Создание линии и первичная отрисовка

В примере создается объект линии с помощью конструктора Phaser.Geom.Line. Первые два аргумента — координаты начальной точки (x1, y1), следующие два — координаты конечной точки (x2, y2).

Сразу после создания линия отрисовывается фиолетовым цветом с помощью Graphics. Это наш основной объект для изучения.

const line = new Phaser.Geom.Line(100, 500, 700, 100);

const graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa } });
graphics.strokeLineShape(line);

Свойства left, right, top, bottom — прямоугольник линии

Ключевой момент: линия, как геометрический объект, имеет ограничивающий прямоугольник (bounding box). Свойства left, right, top, bottom автоматически рассчитываются на основе координат x1, x2, y1, y2, где left — меньшее значение по X, а right — большее. Аналогично, top — меньшее значение по Y, bottom — большее.

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

graphics.lineStyle(2, 0x00aa00);

graphics.beginPath();
graphics.moveTo(line.left, line.top);
graphics.lineTo(line.right, line.top);
graphics.lineTo(line.right, line.bottom);
graphics.lineTo(line.left, line.bottom);
graphics.lineTo(line.left, line.top);
graphics.strokePath();

Прямой доступ к координатам: x1, y1, x2, y2

Свойства x1, y1, x2, y2 хранят исходные координаты концов линии, какими они были заданы при создании. Они не меняются в зависимости от того, какая точка левее или выше.

В примере с их помощью рисуются две красные вспомогательные линии: 1. Горизонтальная черта на уровне y1 + 10, от x1 до x2. 2. Вертикальная черта на уровне x1 - 10, от y1 до y2.

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

graphics.lineStyle(2, 0xaa0000);

graphics.lineBetween(line.x1, line.y1 + 10, line.x2, line.y1 + 10);

graphics.lineBetween(line.x1 - 10, line.y1, line.x1 - 10, line.y2);

Практическое применение в играх

Понимание разницы между x1 и left критически важно для игровой логики.

* **Расчет столкновений:** Свойства left, right, top, bottom позволяют быстро проверить, пересекаются ли ограничивающие прямоугольники двух линий (или линии и спрайта) по принципу AABB (Axis-Aligned Bounding Box), что намного быстрее точного расчета пересечения отрезков. * **Выравнивание:** Если вам нужно расположить спрайт у «левого края» линии, используйте line.left. Если же нужно привязаться именно к первой заданной точке, используйте line.x1. * **Отладка:** Визуализация bounding box, как в примере, — отличный способ отладки геометрических расчетов в реальном времени.

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

Свойства объекта Phaser.Geom.Line делятся на две группы: исходные координаты (x1, y1, x2, y2) и вычисленные границы (left, right, top, bottom). Использование правильных свойств в нужном контексте упрощает код и предотвращает ошибки. Для экспериментов попробуйте: изменить координаты линии так, чтобы она была горизонтальной или вертикальной, и понаблюдайте за изменением bounding box; написать функцию, которая проверяет, находится ли точка внутри этого прямоугольника; использовать line.getPointA() и line.getPointB() для получения объектов точек.