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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00ff00 } });

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

        graphics.strokeTriangleShape(triangle);
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и графики

Первым делом в методе create() мы создаем объект Graphics. Это специальный дисплейный объект в Phaser, предназначенный для программной отрисовки примитивов: линий, фигур и заливок.

В конструктор graphics мы передаем объект стиля линии. Это определяет, как будет выглядеть контур нашей будущей фигуры.

const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00ff00 } });

Здесь мы задаем зеленый цвет (0x00ff00) и толщину линии в 2 пикселя. Объект graphics теперь готов к рисованию.

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

Для создания геометрических фигур в Phaser используется модуль Phaser.Geom. У каждой фигуры есть свой статический класс-помощник (Builder). Для треугольника это Phaser.Geom.Triangle.

Метод BuildEquilateral — это фабричная функция, которая создает и возвращает новый экземпляр Phaser.Geom.Triangle с заданными параметрами.

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

Функция принимает три аргумента: 1. `x` (400) — Координата X верхней вершины треугольника. 2. `y` (200) — Координата Y верхней вершины треугольника. 3. length (200) — Длина стороны треугольника.

Метод автоматически вычисляет координаты двух оставшихся вершин так, чтобы все стороны и углы были равны. Возвращаемый объект triangle содержит свойства x1, y1, x2, y2, x3, y3 с координатами этих вершин.

Отрисовка фигуры на экране

Объект Phaser.Geom.Triangle сам по себе является лишь контейнером для данных (координат). Чтобы увидеть его на экране, необходимо передать эти данные объекту для отрисовки.

Именно для этого у объекта graphics есть метод strokeTriangleShape.

graphics.strokeTriangleShape(triangle);

Этот метод берет геометрический объект triangle и рисует его контур, используя стиль линии, который мы задали на первом шаге. Если бы мы хотели залить треугольник цветом, нам пришлось бы сначала задать fillStyle с помощью graphics.fillStyle(...), а затем использовать метод fillTriangleShape.

Таким образом, graphics выступает в роли «кисти», а triangle — в роли «трафарета» с координатами.

Конфигурация и запуск игры

Код сцены должен быть передан в экземпляр игры Phaser.Game. Это происходит в конфигурационном объекте, который определяет основные параметры приложения.

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

const game = new Phaser.Game(config);

Здесь мы создаем игровое поле размером 800x600 пикселей. Ключ type: Phaser.AUTO позволяет Phaser самому выбрать лучший способ рендеринга (WebGL или Canvas). Ключ parent указывает ID HTML-элемента, в который будет встроен canvas. Наконец, в свойстве scene регистрируется наш класс Example. После создания экземпляра game Phaser автоматически инициализирует рендерер и запустит сцену, вызвав ее метод create().

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

Всего в несколько строк кода мы создали и отрисовали точную геометрическую фигуру, используя встроенные возможности Phaser. Это гораздо эффективнее, чем рассчитывать вершины вручную или использовать растровые изображения для статичных форм. **Идеи для экспериментов:** 1. Анимируйте треугольник, изменяя его координаты или длину стороны в методе update(). 2. Создайте не одну, а сетку из треугольников, используя циклы. 3. Используйте triangle не только для рисования, но и как область для проверки столкновений (Phaser.Geom.Triangle.Contains) или для генерации случайных точек внутри себя (Phaser.Geom.Triangle.Random). 4. Попробуйте другие фабричные методы, например, BuildRight для построения прямоугольного треугольника.