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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    t = 0;
    triangle;
    graphics;

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

        this.triangle = new Phaser.Geom.Triangle.BuildRight(300, 360, 300, 300);
    }

    update ()
    {
        this.graphics.clear();

        this.t += 0.01;

        Phaser.Geom.Triangle.Rotate(this.triangle, Math.sin(this.t) * 0.04);

        this.graphics.strokeTriangleShape(this.triangle);
    }
}

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

const game = new Phaser.Game(config);

Создание сцены и инициализация геометрии

В методе create() инициализируются основные объекты для отрисовки и сама геометрическая фигура.

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

Объект Graphics (this.graphics) — это холст для векторной отрисовки. В его конфигурации задается стиль линии: толщина 2 пикселя и желто-зеленый цвет (0xaaaa00).

this.triangle = new Phaser.Geom.Triangle.BuildRight(300, 360, 300, 300);

Здесь создается прямоугольный треугольник с помощью фабричного метода BuildRight. Первые два аргумента (300, 360) — это координаты прямого угла. Последующие аргументы (300, 300) задают длину катетов. В данном случае вертикальный катет имеет длину -60 пикселей (360 - 300), что определяет форму и начальную ориентацию треугольника.

Анимация в игровом цикле

Метод update() вызывается на каждом кадре. Здесь происходит очистка предыдущего кадра, вычисление угла поворота и применение трансформации к фигуре.

this.graphics.clear();

Этот вызов стирает все, что было нарисовано объектом this.graphics на предыдущем кадре. Без него мы бы видели след от всех предыдущих позиций треугольника.

this.t += 0.01;
Phaser.Geom.Triangle.Rotate(this.triangle, Math.sin(this.t) * 0.04);

Переменная this.t — это накопитель времени, увеличивающийся на 0.01 каждый кадр. Ее значение передается в функцию Math.sin(), чтобы получить плавное колебательное движение. Результат синуса (от -1 до 1) умножается на коэффициент 0.04, который определяет максимальную скорость поворота за кадр.

Статический метод Phaser.Geom.Triangle.Rotate() принимает два параметра: экземпляр треугольника (this.triangle) и угол поворота в радианах. Ключевой момент: метод вращает треугольник **вокруг его геометрического центра**, что избавляет разработчика от ручных расчетов.

Визуализация результата

После изменения координат треугольника его нужно отрисовать заново.

this.graphics.strokeTriangleShape(this.triangle);

Метод strokeTriangleShape() объекта Graphics обводит контур переданного ему треугольника, используя заданный в create() стиль линии (желто-зеленый цвет). Таким образом, мы видим анимированную вращающуюся фигуру.

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

Код завершается стандартной для Phaser 3 конфигурацией и созданием экземпляра игры.

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

const game = new Phaser.Game(config);

В объекте config задаются размеры холста (800x600), рендерер (Phaser.AUTO выбирает между WebGL и Canvas), ID родительского HTML-элемента и стартовая сцена (Example). Создание экземпляра Phaser.Game с этой конфигурацией запускает весь игровой цикл.

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

Метод Phaser.Geom.Triangle.Rotate предоставляет простой способ анимировать геометрические примитивы. Для экспериментов попробуйте: изменить центр вращения через Phaser.Geom.Triangle.CenterOn, вращать несколько независимых треугольников, привязать вращение к физическому телу или использовать поворот для расчета траектории снаряда, выпущенного из вершины фигуры.