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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();

        const triangle = new Phaser.Geom.Triangle.BuildEquilateral(400, 400, 200);

        graphics.lineStyle(2, 0x00aa00);

        graphics.strokeTriangleShape(triangle);

        for (let i = 0; i < 6; i++)
        {
            triangle.bottom -= 64;

            graphics.strokeTriangleShape(triangle);
        }

        graphics.lineStyle(2, 0x00ff00);

        graphics.strokeTriangleShape(triangle);
    }
}

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

const game = new Phaser.Game(config);

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

Класс Phaser.Geom.Triangle предоставляет статические методы для быстрого создания различных типов треугольников. В данном случае используется BuildEquilateral.

const triangle = new Phaser.Geom.Triangle.BuildEquilateral(400, 400, 200);

Этот код создаёт равносторонний треугольник. Первые два аргумента (400, 400) задают координаты центральной точки основания фигуры. Третий аргумент (200) определяет длину стороны. После создания объект triangle содержит свойства для его трёх вершин: x1, y1, x2, y2, x3, y3.

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

Для отрисовки геометрических фигур в Phaser используется объект Graphics. Сначала мы настраиваем стиль линии, а затем рисуем контур (stroke) треугольника.

const graphics = this.add.graphics();
graphics.lineStyle(2, 0x00aa00);
graphics.strokeTriangleShape(triangle);

Метод lineStyle(2, 0x00aa00) задаёт толщину линии в 2 пикселя и зелёный цвет. Метод strokeTriangleShape(triangle) принимает созданный нами геометрический объект и отрисовывает его на сцене.

Изменение свойства bottom

Самая интересная часть примера — изменение треугольника в цикле. У объекта Phaser.Geom.Triangle есть удобные геттеры и сеттеры для работы с вершинами как с единым целым, например, bottom.

for (let i = 0; i < 6; i++)
{
    triangle.bottom -= 64;
    graphics.strokeTriangleShape(triangle);
}

Свойство bottom возвращает или устанавливает наибольшую (нижнюю) координату Y среди всех вершин треугольника. При каждом вычитании 64 пикселя (triangle.bottom -= 64) Phaser автоматически пересчитывает координаты *всех* вершин, сдвигая всю фигуру вверх. Это демонстрирует, как изменение одного абстрактного свойства трансформирует всю геометрическую форму.

Итоговый результат

После цикла мы меняем цвет линии на более яркий зелёный и рисуем финальное состояние треугольника поверх всех предыдущих отрисовок.

graphics.lineStyle(2, 0x00ff00);
graphics.strokeTriangleShape(triangle);

В результате на экране мы увидим "дорожку" из семи треугольников (исходный + шесть сдвинутых), где последний выделен ярким цветом. Это наглядно показывает траекторию изменения свойства bottom.

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

Манипулирование свойствами вроде bottom, top, left или right — мощный и лаконичный способ трансформации фигур. Для экспериментов попробуйте в цикле изменять другие свойства, например triangle.right, или комбинируйте их. Это можно использовать для создания простой анимации "падения" объекта, плавного расширения зоны или генерации последовательности фигур для головоломки.