Phaser.js: всё об играх и разработке

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

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

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

Живой запуск

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

Исходный код

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

        const triangle = new Phaser.Geom.Triangle(400, 100, 100, 500, 700, 500);

        // graphics.strokeTriangleShape(triangle);

        graphics.fillTriangleShape(triangle);
    }
}

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

const game = new Phaser.Game(config);

Создание контекста рисования (Graphics)

В Phaser для рисования примитивов, линий и фигур используется объект Graphics. Его можно представить как холст для векторной графики, который мы добавляем на сцену. При создании объекта сразу задаются стили для контура и заливки, которые будут применены ко всем последующим операциям рисования, пока стили не изменятся.

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

В этом коде: - lineStyle определяет стиль контура: толщина 2 пикселя и зеленый цвет (0x00ff00). - fillStyle определяет стиль заливки: красный цвет (0xff0000). Объект graphics автоматически добавляется на сцену и становится ее дочерним элементом.

Определение геометрии треугольника

Для работы с треугольниками в Phaser есть отдельный класс Phaser.Geom.Triangle. Он представляет собой математическое описание фигуры и сам по себе ничего не рисует. Треугольник создается по координатам трех его вершин на плоскости сцены.

const triangle = new Phaser.Geom.Triangle(400, 100, 100, 500, 700, 500);

Здесь мы создаем треугольник с вершинами в точках: - A: x=400, y=100 (вершина сверху). - B: x=100, y=500 (нижний левый угол). - C: x=700, y=500 (нижний правый угол). Эти координаты задаются в пикселях относительно верхнего левого угла сцены. Таким образом, мы определили равнобедренный треугольник.

Визуализация треугольника на холсте

После создания геометрического объекта и контекста рисования необходимо передать фигуру для отображения. Объект Graphics предоставляет для этого два основных метода: strokeTriangleShape() для отрисовки контура и fillTriangleShape() для заливки фигуры.

// graphics.strokeTriangleShape(triangle); // Закомментированный вызов для контура
graphics.fillTriangleShape(triangle);

В примере закомментирован вызов метода для рисования контура, а используется метод fillTriangleShape(). Он берет ранее созданный объект triangle и заполняет его внутреннюю область красным цветом, как было задано в fillStyle. Если бы мы раскомментировали первую строку, то увидели бы зеленый контур треугольника поверх заливки. Методы принимают именно объект формы (Shape), поэтому в названии присутствует постфикс Shape.

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

Весь код выполняется внутри сцены (Scene) Phaser. Чтобы игра запустилась, необходимо создать конфигурационный объект и инстанс игры.

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

const game = new Phaser.Game(config);

В конфигурации: - width и height задают размеры игрового холста. - type определяет рендерер (WebGL или Canvas). Phaser.AUTO позволяет движку выбрать лучший из доступных. - parent — это ID HTML-элемента, в который будет встроен canvas. - scene указывает класс сцены, которая будет запущена сразу. В данном случае это наш класс Example, где определен метод create().

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

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