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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();

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

        graphics.lineStyle(2, 0x00aa00);

        graphics.strokeTriangleShape(triangle);

        for (let i = 0; i < 6; i++)
        {
            triangle.left += 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();
const triangle = new Phaser.Geom.Triangle.BuildEquilateral(200, 200, 200);

Метод Phaser.Geom.Triangle.BuildEquilateral — это фабрика, которая сразу возвращает готовый треугольник. Его параметры: X и Y координаты первой вершины (в данном случае, условно верхней), а затем длина стороны. Фигура создается в памяти, но пока не отрисована на экране.

Первая отрисовка и настройка стиля

Чтобы фигура появилась на экране, нужно задать стиль линии и выполнить отрисовку. Объект graphics содержит методы для управления стилями и рисования примитивов.

graphics.lineStyle(2, 0x00aa00);
graphics.strokeTriangleShape(triangle);

lineStyle(2, 0x00aa00) устанавливает толщину линии в 2 пикселя и зеленый цвет (#00aa00). Метод strokeTriangleShape(triangle) принимает наш геометрический объект и обводит его контур согласно заданному стилю. Теперь на холсте появился первый зеленый треугольник.

Ключевой прием: движение через свойство `left`

Самое интересное начинается в цикле. Мы используем свойство left геометрического треугольника, которое представляет собой X-координату самой левой точки фигуры. Изменяя это свойство, мы сдвигаем весь треугольник.

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

На каждой итерации цикла мы увеличиваем triangle.left на 64 пикселя. Это перемещает всю фигуру вправо. После каждого сдвига мы снова вызываем strokeTriangleShape, что рисует новый треугольник на новом месте, не стирая предыдущие. В результате получается серия из шести смещающихся треугольников.

Визуальный акцент: выделение конечного результата

После цикла мы меняем цвет линии, чтобы визуально выделить итоговое положение фигуры, и рисуем треугольник最后一次.

graphics.lineStyle(2, 0x00ff00);
graphics.strokeTriangleShape(triangle);

Установка lineStyle(2, 0x00ff00) меняет цвет на более яркий зеленый (#00ff00). Последний вызов strokeTriangleShape рисует поверх последнего треугольника из цикла новую обводку, но уже ярким цветом. Это создает эффект "подсветки" конечной позиции.

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

Свойство left — это удобный шорткат для управления положением геометрического объекта. Вместо пересчета координат всех трех вершин вручную, мы двигаем фигуру как единое целое. Для экспериментов попробуйте изменить шаг сдвига, использовать свойство top для вертикального движения, анимацию в update, или создавать целые композиции из разных фигур, двигающихся синхронно.