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

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

Градиенты — мощный инструмент для создания атмосферы и глубины в 2D-играх. Phaser 3 предоставляет гибкую систему их генерации, включая различные режимы повторения. В этой статье мы разберем режим `repeatMode: 0` (EXTEND), который позволяет растянуть крайние цвета градиента за пределы его основной области. Это особенно полезно для создания бесшовных фонов, плавных переходов цвета и визуальных эффектов, не требующих текстур.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        this.add.gradient({
            repeatMode: 0, // EXTEND
            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);

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

В Phaser 3 параметр repeatMode объекта градиента определяет, как он будет вести себя за пределами своей нормализованной области (от 0 до 1 по осям X и Y).

Значение `0соответствует константеPhaser.Types.GameObjects.Gradient.GradientRepeatMode.EXTEND`. В этом режиме цвета на краях градиента (начальный и конечный) продолжаются ("растягиваются") бесконечно во всех направлениях за его пределами. Представьте, что вы взяли край градиента и потянули его, заполняя всё пространство этим сплошным цветом.

Создание градиента с EXTEND

Давайте создадим базовый линейный градиент, используя метод this.add.gradient(). Ключевым параметром здесь будет repeatMode.

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

Разберем параметры конфигурационного объекта:
*   `repeatMode: 0` — активирует режим EXTEND.
*   `start: { x: 0.25, y: 0.5 }` — определяет начальную точку градиента в нормализованных координатах (относительно его собственного размера). Здесь X=25%, Y=50%.
*   `shape: { x: 0.5, y: 0 }` — задает вектор направления градиента. Значение `{x: 0.5, y: 0}` означает, что градиент будет горизонтальным, начиная от точки `start` и двигаясь вправо.

Следующие четыре числа — это позиция (X, Y) и размеры (ширина, высота) игрового объекта градиента на экране. В данном случае он центрирован (400, 300) и имеет размер 800x400.

Визуализация области градиента

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

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

Этот код создает прямоугольник Phaser.GameObjects.Rectangle того же размера, что и градиент (800x400), и позиционирует его по тем же координатам. Метод .setStrokeStyle(1, 0xff0000, 0.5) задает стиль обводки: толщина 1 пиксель, красный цвет (0xff0000) с прозрачностью 50% (0.5). Красная рамка покажет вам исходную область градиента. Всё, что за ее пределами, будет заполнено крайними цветами (в данном примере — начальным цветом слева и конечным справа), демонстрируя работу режима EXTEND.

Конфигурация сцены и игры

Для запуска примера необходима стандартная конфигурация Phaser Game.

const config = {
    type: Phaser.WEBGL, // Для градиентов требуется WebGL
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example // Наша сцена с градиентом
};

const game = new Phaser.Game(config);

Важно использовать type: Phaser.WEBGL, так как градиенты в Phaser 3 поддерживаются только в режиме WebGL-рендеринга. Canvas-рендерер их не отрисует.

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

Режим repeatMode: 0 (EXTEND) — это простой и эффективный способ создать градиент, который не повторяется, а плавно переходит в сплошной цвет. Он идеально подходит для фонов, где нужно избежать резких краев или тилевых узоров. **Идеи для экспериментов:** 1. Измените вектор shape, чтобы получить вертикальный или диагональный градиент, и понаблюдайте, как EXTEND работает в новых направлениях. 2. Поэкспериментируйте с другими значениями repeatMode (например, `1` для REPEAT) и сравните результаты. 3. Создайте несколько градиентов с разными режимами и наложениями (setBlendMode) для получения сложных цветовых эффектов. 4. Используйте EXTEND-градиент в качестве маски или слоя поверх игрового мира для создания эффектов заката, тумана или подводного мира.