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

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

При создании игр часто возникает задача отрисовки простых форм для коллайдеров, зон взаимодействия или визуальной разметки. Phaser предоставляет для этого мощный, но простой геометрический модуль `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.BuildRight(200, 400, 300, 200);

        graphics.strokeTriangleShape(triangle);
    }
}

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

const game = new Phaser.Game(config);

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

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

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

Эта строка создает новый графический объект и добавляет его на сцену. Параметр lineStyle задает стиль линий: толщину в 2 пикселя и зеленый цвет (шестнадцатеричный код 0x00ff00). Этот объект (graphics) мы будем использовать для отрисовки.

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

Phaser упрощает создание стандартных геометрических фигур. Для построения прямоугольного треугольника используется статический метод Phaser.Geom.Triangle.BuildRight.

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

Метод принимает четыре числовых аргумента: 1. `x` (200) – Координата X первой точки (прямого угла). 2. `y` (400) – Координата Y первой точки (прямого угла). 3. width (300) – Длина катета, идущего вправо от точки (x, y). Ширина может быть отрицательной для построения влево. 4. height (200) – Длина катета, идущего вверх от точки (x, y). Высота может быть отрицательной для построения вниз.

В результате создается объект Phaser.Geom.Triangle, содержащий координаты трех вершин.

Отрисовка треугольника на экране

Созданный геометрический объект сам по себе не виден. Чтобы он появился на экране, необходимо его нарисовать с помощью ранее созданного графического контекста.

graphics.strokeTriangleShape(triangle);

Метод strokeTriangleShape() принимает объект типа Phaser.Geom.Triangle и рисует его контур (заливки не происходит), используя заданный нами стиль линии (lineStyle). Фигура отображается в координатах мира игры.

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

Весь код примера должен быть помещен в работающую конфигурацию игры Phaser. Это стандартный шаблон.

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

const game = new Phaser.Game(config);

В объекте config задается базовый холст размером 800x600 пикселей. Свойство type определяет рендерер (WebGL или Canvas), Phaser.AUTO позволяет движку выбрать лучший из доступных. Ключевой параметр scene указывает на наш класс Example, который будет запущен как первая и единственная сцена игры.

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

Использование Phaser.Geom.Triangle.BuildRight – это самый быстрый способ добавить в проект прямоугольный треугольник. Такой подход идеален для создания статичных коллайдеров сложной формы или визуальных маркеров. Для экспериментов попробуйте: 1. Изменить аргументы BuildRight на отрицательные, чтобы треугольник «смотрел» в другие стороны. 2. Использовать метод fillTriangleShape для заливки фигуры цветом, предварительно задав fillStyle у объекта graphics. 3. Анимировать треугольник, изменяя его координаты в методе update() и перерисовывая графику.