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

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

Версия 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.right += 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, который является нашим холстом для рисования примитивов.

Затем, используя фабричный метод Phaser.Geom.Triangle.BuildEquilateral, мы создаем равносторонний треугольник. Этот метод принимает три аргумента: координаты вершины (x, y) и длину стороны.

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

После создания фигуры мы устанавливаем стиль линии для нашего графического контекста и отрисовываем контур треугольника с помощью strokeTriangleShape.

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

Свойство `.right` и цикл смещения

Объекты геометрии в Phaser, такие как Triangle, обладают удобными свойствами для чтения и модификации их границ. Свойство .right возвращает или устанавливает координату X правой крайней точки фигуры.

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

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

Важно понимать, что мы не создаем новые объекты треугольников. Мы модифицируем координаты одного и того же объекта triangle и перерисовываем его на каждой итерации, создавая иллюзию последовательности фигур.

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

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

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

Таким образом, последний (самый правый) треугольник будет обведен линией ярко-зеленого цвета, в то время как вся цепочка, включая его, была нарисована темно-зеленым. Этот прием полезен для отладки или выделения ключевых объектов на сцене.

Настройка игры и конфигурация

Код примера завершается стандартной для Phaser 3 конфигурацией игры. Мы создаем конфигурационный объект, указываем в нем размеры canvas, тип рендерера, родительский HTML-элемент и класс нашей сцены.

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

const game = new Phaser.Game(config);

Инициализация игры с этим конфигом автоматически создаст canvas и запустит сцену Example, выполнив весь наш код отрисовки.

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

Пример наглядно показывает, как просто управлять геометрическими объектами в Phaser, используя их встроенные свойства. Модификация .right — лишь один из многих способов. Экспериментируйте: попробуйте в цикле изменять другие свойства, например .y или .left, чтобы двигать фигуры по вертикали или от центра. Используйте разные цвета и стили линий для каждого шага цикла, чтобы создать градиентный эффект. Это основа для создания анимаций следов, сеток, сложных паттернов или даже простейшего редактора уровней.