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

Визуализация — основа игрового мира. Помимо спрайтов и текстур, часто требуются примитивы для отладки, интерфейсов или стилизованной графики. Метод `this.add.line()` в Phaser 3 позволяет рисовать отрезки прямо в сцене, задавая их координаты, цвет и толщину. Эта статья разберет его работу на конкретном примере и покажет, как управлять началом и концом линии как вектором от точки её размещения.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        this.add.line(100, 100, 100, 100, 400, 300, 0x00ff00);
        
        this.add.text(100, 100, 'Hello World', { fontFamily: 'Arial', fontSize: 32, color: '#00ff00' });

        this.add.line(400, 300, 100, 100, -200, 150, 0x00ff00);
    }
}

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

const game = new Phaser.Game(config);

Анатомия метода add.line()

Метод this.add.line() создает объект линии (Phaser.GameObjects.Line) и добавляет его в сцену. Его сигнатура выглядит так:

this.add.line(x, y, x1, y1, x2, y2, fillColor)

Параметры: - x, y — мировые координаты точки, относительно которой строятся концы линии. Это точка «привязки» или «начала отсчета». По умолчанию она же является и геометрическим центром линии. - x1, y1 — координаты начальной точки линии **относительно** точки (x, y). - x2, y2 — координаты конечной точки линии **относительно** точки (x, y). - fillColor — числовой код цвета линии (например, 0x00ff00 для зеленого).

Ключевой нюанс: координаты (x1, y1) и (x2, y2) задаются не в абсолютных мировых координатах, а как вектор смещения от точки (x, y). Это позволяет легко перемещать, вращать и масштабировать всю линию как единый игровой объект, меняя лишь её позицию (x, y).

Разбор примера: первая линия

Рассмотрим первую строку из примера:

this.add.line(100, 100, 100, 100, 400, 300, 0x00ff00);

Что происходит: 1. Линия будет «привязана» к точке с мировыми координатами (100, 100). 2. Начало линии вычисляется как (100 + 100, 100 + 100) = (200, 200). 3. Конец линии вычисляется как (100 + 400, 100 + 300) = (500, 400). 4. Цвет линии — зеленый (0x00ff00).

Фактически на сцене будет нарисован зеленый отрезок от точки (200, 200) до точки (500, 400). Точка привязки (100, 100) сама по себе на линии не находится — она служит лишь опорной точкой для расчётов.

Разбор примера: вторая линия и работа с векторами

Третья строка кода демонстрирует более осмысленное использование относительных координат:

this.add.line(400, 300, 100, 100, -200, 150, 0x00ff00);

Здесь: 1. Точка привязки линии — (400, 300). 2. Начало линии: (400 + 100, 300 + 100) = (500, 400). 3. Конец линии: (400 + (-200), 300 + 150) = (200, 450).

Обратите внимание: координата x2 имеет отрицательное значение (-200). Это абсолютно валидно и означает, что конец линии будет смещен от точки привязки на 200 пикселей влево. Такой подход позволяет мыслить линию как вектор, исходящий из точки (x, y). Вы можете легко представить направление и длину, просто глядя на разницу между (x1, y1) и (x2, y2).

Практические советы и свойства объекта Line

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

const line = this.add.line(100, 100, 0, 0, 150, 0, 0xff0000);
После создания вы можете изменить:
- `line.setLineWidth(5)` — толщину линии.
- `line.setOrigin(0, 0)` — точку привязки (origin) внутри самого объекта. По умолчанию `(0.5, 0.5)` — центр.
- `line.x = 300; line.y = 200;` — переместить всю линию, сохраняя её относительную форму.
- `line.rotation = Phaser.Math.DEG_TO_RAD * 45;` — повернуть линию вокруг её точки привязки.

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

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

Метод this.add.line() — это мощный и гибкий инструмент для рисования векторных отрезков. Его основное преимущество — относительная система координат, которая превращает линию в полноценный игровой объект, поддающийся трансформациям. Для экспериментов попробуйте

  1. анимировать координаты x2, y2, чтобы линия «росла» из точки
  2. рисовать сетку или лучи для эффектов освещения, используя циклы
  3. соединять линии в ломаную для визуализации пути ИИ