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

Геометрия — основа игровой логики, физики и визуализации. В Phaser класс `Phaser.Geom.Triangle` предоставляет удобные инструменты для работы с треугольниками. В этой статье мы разберем, как получить каждую сторону треугольника в виде отдельного объекта линии (`Phaser.Geom.Line`) и визуализировать их. Этот навык полезен для создания собственных систем коллизий, геометрических построений или стильной векторной графики в вашей игре.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const triangle = new Phaser.Geom.Triangle(400, 250, 300, 350, 500, 350);

        const graphics = this.add.graphics();

        graphics.lineStyle(3, 0xaa0000);
        graphics.strokeLineShape(triangle.getLineA());

        graphics.lineStyle(3, 0x00aa00);
        graphics.strokeLineShape(triangle.getLineB());

        graphics.lineStyle(3, 0x0000aa);
        graphics.strokeLineShape(triangle.getLineC());
    }
}

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

const game = new Phaser.Game(config);

Создание треугольника

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

const triangle = new Phaser.Geom.Triangle(400, 250, 300, 350, 500, 350);

В данном примере создается треугольник с вершинами в точках (400, 250), (300, 350) и (500, 350). Первая точка — условная вершина A, вторая — B, третья — C. Порядок важен для корректной работы методов получения сторон.

Получение сторон как линий

Объект треугольника имеет три метода для получения его сторон. Каждый метод возвращает новый объект типа Phaser.Geom.Line, который описывается координатами начала и конца.

const lineA = triangle.getLineA(); // Линия из точки A в точку B
const lineB = triangle.getLineB(); // Линия из точки B в точку C
const lineC = triangle.getLineC(); // Линия из точки C в точку A

Эти методы (getLineA, getLineB, getLineC) не изменяют исходный треугольник, а создают независимые объекты линий. Это позволяет, например, отдельно работать с каждой стороной: проверять пересечения, вычислять длину или, как в нашем примере, рисовать их разными стилями.

Визуализация с помощью Graphics

Для отрисовки геометрических фигур в Phaser используется объект Graphics. Мы создаем его и затем, используя метод strokeLineShape, рисуем каждую полученную линию с уникальным стилем.

const graphics = this.add.graphics();

graphics.lineStyle(3, 0xaa0000); // Красный цвет для линии A
graphics.strokeLineShape(triangle.getLineA());

graphics.lineStyle(3, 0x00aa00); // Зеленый цвет для линии B
graphics.strokeLineShape(triangle.getLineB());

graphics.lineStyle(3, 0x0000aa); // Синий цвет для линии C
graphics.strokeLineShape(triangle.getLineC());

Ключевой момент: метод lineStyle задает стиль (толщину и цвет) для всех последующих операций рисования линий. Поэтому перед отрисовкой каждой стороны мы вызываем его заново, чтобы задать новый цвет. Метод strokeLineShape принимает объект линии и рисует его в соответствии с текущим стилем.

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

Вы научились декомпозировать треугольник на отдельные линии, что открывает путь к более сложным геометрическим операциям. Для экспериментов попробуйте: анимировать изменение цвета сторон, сделать стороны динамическими (чтобы треугольник менялся при клике) или использовать полученные линии для проверки пересечения с другими объектами игры с помощью Phaser.Geom.Intersects.LineToLine.