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

Градиенты — мощный инструмент для создания визуальных эффектов в играх. В Phaser 3.60 появилась поддержка расширенных режимов повторения градиентов, включая режим `TRUNCATE`. Эта статья покажет, как и зачем его использовать, чтобы контролировать отображение градиента за пределами его базовой области, создавая чистые и предсказуемые визуальные переходы.

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

Живой запуск

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

Исходный код


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

        // Highlight central gradient unit.
        this.add.rectangle(400, 300, 400, 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);

Что такое режим TRUNCATE?

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

В этом режиме цвета градиента не повторяются циклически. Вместо этого, за пределами определенной области градиент «обрывается» — конечный цвет (на 100% позиции) просто растягивается на все оставшееся пространство. Это полезно, когда вам нужен плавный переход от одного цвета к другому без резких скачков или повторяющихся паттернов.

Разбор примера кода

Давайте рассмотрим ключевые части предоставленного примера. Основная логика находится в методе create сцены.

Создается градиентный объект с помощью метода this.add.gradient(). Конфигурация передается первым аргументом.

this.add.gradient({
    repeatMode: 1, // TRUNCATE
    start: { x: 0.25, y: 0.5 },
    shape: { x: 0.5, y: 0 }
}, 400, 300, 800, 400);
Параметры метода:
1.  **Конфигурационный объект:**
    *   `repeatMode: 1` — включает режим `TRUNCATE`.
    *   `start: { x: 0.25, y: 0.5 }` — определяет начальную точку градиента в относительных координатах (от 0 до 1) внутри области градиента. Здесь `x: 0.25` означает 25% от ширины области.
    *   `shape: { x: 0.5, y: 0 }` — задает вектор направления и длины градиента. `x: 0.5` означает, что градиент растягивается горизонтально на 50% от ширины своей области.
2.  **`400, 300`** — координаты X и Y центра градиента на игровом холсте.
3.  **`800, 400`** — ширина и высота области отрисовки градиента.

Затем для наглядности добавляется красная рамка, которая показывает границы одной «единицы» градиента (его базовой области).

this.add.rectangle(400, 300, 400, 400).setStrokeStyle(1, 0xff0000, 0.5);

Почему именно TRUNCATE? Практическое применение

Режим TRUNCATE идеален для ситуаций, где градиент должен служить фоном или крупным элементом, а не текстурой.

* **Фоны для меню или HUD:** Создайте плавный переход от темного цвета сверху к светлому снизу для панели. С TRUNCATE этот переход будет однократным и четким, даже если панель будет очень высокой. * **Эффекты затемнения/осветления:** Например, для создания эффекта «тумана войны» или постепенного ухода в темноту по краям экрана. Конечный цвет (черный) равномерно заполнит всё остальное пространство. * **Создание масок свечения:** Градиент от яркого цвета к прозрачному в режиме TRUNCATE создаст область свечения, которая мягко растворяется, не образуя резких границ или повторяющихся полос.

Без использования repeatMode: 1 (или с repeatMode: 0 — REPEAT) тот же градиент начал бы зацикливаться, создавая полосатый эффект, что часто выглядит как нежелательный артефакт.

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

Пример использует стандартную конфигурацию игры Phaser. Важные для рендеринга градиентов моменты:

const config = {
    type: Phaser.WEBGL, // Важно! Градиенты требуют WebGL-рендерера.
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

Ключевой параметр — type: Phaser.WEBGL. Градиенты, созданные через this.add.gradient(), поддерживаются только в контексте WebGL. Попытка использовать их с Phaser.CANVAS приведет к ошибке или отсутствию отображения.

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

Режим repeatMode: 1 (TRUNCATE) — это простой, но эффективный способ контролировать поведение градиентов в Phaser, обеспечивая чистые, непрерывные цветовые переходы. Он отлично подходит для создания фонов, масок и крупномасштабных визуальных эффектов. **Идеи для экспериментов:** 1. Измените вектор shape на { x: 0, y: 0.7 }, чтобы создать вертикальный градиент, и посмотрите, как TRUNCATE влияет на его отображение. 2. Сравните визуальный результат с repeatMode: 0 (по умолчанию) и repeatMode: 1 на объекте, который значительно больше базовой области градиента. 3. Попробуйте применить градиент в режиме TRUNCATE к Graphics объекту для создания динамических эффектов затемнения.