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

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

Работа с геометрическими объектами — фундаментальный навык в геймдеве. В этой статье мы разберем, как создавать и манипулировать треугольниками в Phaser на примере простого, но наглядного кода. Вы научитесь использовать класс `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, 30, 200);

        graphics.lineStyle(2, 0x00aa00);

        graphics.strokeTriangleShape(triangle);

        for (let i = 0; i < 6; i++)
        {
            triangle.top += 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);

Создание сцены и графического контекста

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

const graphics = this.add.graphics();

Этот объект — наш холст для векторной графики. Далее мы создаем равносторонний треугольник с помощью статического метода BuildEquilateral класса Phaser.Geom.Triangle.

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

Параметры метода: первые два числа (400, 30) — это координаты вершины треугольника, а 200 — длина стороны. Треугольник строится так, что указанная вершина находится наверху (это важно для дальнейшей анимации).

Настройка стиля и первая отрисовка

Перед рисованием нужно задать стиль линии. Мы устанавливаем зеленый цвет (0x00aa00) и толщину в 2 пикселя.

graphics.lineStyle(2, 0x00aa00);

Теперь можно нарисовать контур (stroke) нашего треугольника, передав геометрический объект в метод strokeTriangleShape.

graphics.strokeTriangleShape(triangle);

На этом этапе на экране появится первый зеленый треугольник с вершиной в точке (400, 30).

Анимация через изменение свойства

Самая интересная часть — движение треугольника. В примере используется цикл for, который выполняется 6 раз. На каждой итерации мы увеличиваем свойство top треугольника на 64 пикселя.

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

Свойство top — это Y-координата самой верхней вершины треугольника (в нашем случае — изначально заданной вершины). Изменяя это свойство, мы фактически перемещаем всю фигуру вниз. После каждого изменения позиции треугольник снова рисуется тем же стилем, создавая эффект траектории из нескольких фигур.

Визуальное выделение результата

После цикла мы меняем стиль линии на более яркий зеленый цвет (0x00ff00).

graphics.lineStyle(2, 0x00ff00);

И рисуем треугольник еще один раз, уже с новым цветом.

graphics.strokeTriangleShape(triangle);

Это позволяет визуально отделить итоговое положение треугольника от промежуточных шагов. Итоговый треугольник будет нарисован поверх предыдущих, но ярким контуром.

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

Код завершается стандартной для Phaser 3 конфигурацией. Мы задаем размеры холста, указываем тип рендерера (Phaser.AUTO) и передаем класс нашей сцены.

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

const game = new Phaser.Game(config);

После создания экземпляра игры Phaser автоматически инициализирует сцену и вызовет метод create().

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

Этот пример демонстрирует ключевой принцип работы с геометрией в Phaser: создание объекта, изменение его свойств и перерисовка. Для экспериментов попробуйте изменить свойство left или right вместо top, чтобы двигать треугольник горизонтально. Или используйте triangle.x и triangle.y для смещения всей фигуры. Добавьте в цикл изменение цвета или толщины линии — так вы создадите сложные градиентные эффекты.