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

Визуальное оформление — ключевой элемент погружения в игру. Phaser предлагает мощный API для работы с графикой, включая создание сложных градиентов. В этой статье разберем неочевидный, но полезный параметр `repeatMode`, который позволяет создавать зеркальные и треугольные повторения градиента, идеально подходящие для анимированных фонов, эффектов перехода или стилизованных UI-элементов. Вы научитесь управлять паттерном заполнения градиента, выходя за рамки простого линейного или радиального перехода.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        this.add.gradient({
            repeatMode: 3, // TRIANGULAR
            start: { x: 0.25, y: 0.5 },
            shape: { x: 0.25, y: 0 }
        }, 400, 300, 800, 400);

        // Highlight central gradient unit.
        this.add.rectangle(300, 300, 200, 400).setStrokeStyle(1, 0xff0000, 0.5);
    }
}

const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Что такое `repeatMode` и зачем он нужен?

По умолчанию градиент в Phaser рисуется один раз, заполняя заданную область. Но что, если нужно создать повторяющийся узор, например, для бесконечного фона или текстуры? Именно для этого служит параметр repeatMode в методе this.add.gradient().

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

Разбираем пример: треугольный режим

Рассмотрим предоставленный код. В нем создается градиентный прямоугольник и поверх него для наглядности рисуется полупрозрачная красная рамка, выделяющая центральную "единицу" градиента.

Ключевой момент — передача объекта конфигурации в метод this.add.gradient(). Давайте посмотрим на его структуру:

this.add.gradient({
    repeatMode: 3, // TRIANGULAR
    start: { x: 0.25, y: 0.5 },
    shape: { x: 0.25, y: 0 }
}, 400, 300, 800, 400);

Здесь: - repeatMode: 3 — это числовой идентификатор для треугольного режима повторения. - start — точка, от которой начинается градиент (относительные координаты от 0 до 1). - shape — вектор, задающий направление и длину градиента. - Последние четыре аргумента (400, 300, 800, 400) — это координаты X, Y, ширина и высота всего отображаемого градиентного объекта на холсте.

Как работает треугольный режим?

Значение `3дляrepeatModeсоответствует константеPhaser.GameObjects.Gradient.TRIANGULAR`. В этом режиме градиент повторяется не просто копированием, а "отражением".

Представьте центральный отрезок градиента (выделенный красной рамкой в примере). При треугольном повторении, когда алгоритм доходит до конца этого отрезка, он не начинает его заново с начала, а разворачивает направление. Следующий сегмент будет зеркальной копией предыдущего.

Это создает эффект плавной волны или складки, где цветовые переходы идут: от точки A к точке B, затем от точки B обратно к точке A, и так далее. Такой паттерн лишен резких скачков цвета на стыках, что делает его идеальным для создания органичных, непрерывных визуальных эффектов.

// Константы для repeatMode (их можно использовать вместо чисел для читаемости):
// Phaser.GameObjects.Gradient.REPEAT = 1
// Phaser.GameObjects.Gradient.REFLECT = 2
// Phaser.GameObjects.Gradient.TRIANGULAR = 3

Параметры `start` и `shape`

Поведение градиента, особенно в повторяющихся режимах, сильно зависит от точек start и shape. Они задаются не в пикселях, а в относительных единицах (нормализованные координаты) внутри пространства самого градиентного объекта.

- `start: { x: 0.25, y: 0.5 }` означает, что градиент начинается на 25% ширины и 50% высоты области градиента (не всего холста!).
- `shape: { x: 0.25, y: 0 }` задает вектор. Это означает, что градиент будет растягиваться от точки `start` в направлении, заданном смещением на +25% по X и 0% по Y. Длина этого вектора определяет дистанцию полного цветового перехода.

Именно эта дистанция (от start до start + shape) становится тем базовым отрезком, который затем повторяется или отражается в зависимости от repeatMode. Изменяя эти значения, вы можете сжимать, растягивать или наклонять паттерн повторения.

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

Параметр repeatMode — это мощный инструмент для генерации комплексных текстур и фонов прямо во время выполнения игры, без использования внешних изображений. Он отлично работает в связке с таймерами или Tween-анимациями для создания "пульсирующих" световых эффектов, плавно меняющихся небес или динамических энергетических барьеров. **Идеи для экспериментов:** 1. Анимируйте свойство start.x или start.y через this.tweens.add() и наблюдайте, как "бежит" волна градиента. 2. Попробуйте другие режимы: `1(REPEAT) для простого повторения и2` (REFLECT) для зеркального. 3. Создайте несколько градиентов с разными режимами и параметрами shape, наложите их друг на друга с помощью setBlendMode() для получения сложных композиций.