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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    bg;
    gradient;

    create ()
    {
        // Sneaky background gradient
        this.bg = this.add.gradient({
            repeatMode: 3,
            shapeMode: 1,
            start: { x: 0.5, y: 0.5 },
            shape: { x: 0, y: 0.3 },
            bands: [
                {
                    colorStart: 0x6699bb,
                    colorEnd: 0x996699,
                    colorSpace: 1,
                    interpolation: 2,
                }
            ]
        }, 400, 300, 1400, 800)
        .setRotation(-0.25);

        this.gradient = this.add.gradient({
            shapeMode: 2, // RADIAL
            bands: { colorStart: 0xffffff, colorEnd: 0x000000 },
            start: { x: 0.5, y: 0.5 }, // Start at middle
            shape: { x: 0.5, y: 0 } // Transition towards edge
        }, 400, 300, 400, 400);
    }

    update (time, delta)
    {
        const t = this.game.loop.time;
        this.bg.rotation = 0.25 * Math.sin(t / 3000);
        this.gradient.rotation = 0.03 * Math.sin(t / 1234);
        this.gradient.setPosition(
            400 + 16 * Math.sin(t / 876),
            300 + 16 * Math.sin(t / 765)
        );
    }
}

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

const game = new Phaser.Game(config);

Настройка сцены и создание фонового градиента

В примере мы создаем два градиента: один служит динамическим фоном, а второй — анимированным объектом в центре экрана. Давайте начнем с конфигурации сцены и создания фона.

Конфигурация игры задает базовые параметры, такие как размеры окна и тип рендерера (WebGL необходим для работы с градиентами).

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

const game = new Phaser.Game(config);

Первый градиент (this.bg) создается с помощью метода this.add.gradient(). Обратите внимание на параметр repeatMode: 3, который включает режим зеркального повторения текстуры. Это позволяет создать бесшовный фон большого размера (1400x800) даже на меньшей сцене (800x600). Параметр shapeMode: 1 задает линейную форму градиента, но с вращением он создает интересный диагональный эффект.

this.bg = this.add.gradient({
    repeatMode: 3,
    shapeMode: 1,
    start: { x: 0.5, y: 0.5 },
    shape: { x: 0, y: 0.3 },
    bands: [
        {
            colorStart: 0x6699bb,
            colorEnd: 0x996699,
            colorSpace: 1,
            interpolation: 2,
        }
    ]
}, 400, 300, 1400, 800)
.setRotation(-0.25);

Создание радиального градиента

Второй градиент — это главный объект изучения. Ключевой параметр здесь — shapeMode: 2, который переключает градиент в радиальный режим. В этом режиме цвета растекаются из центральной точки (start) к границам формы (shape).

this.gradient = this.add.gradient({
    shapeMode: 2, // RADIAL
    bands: { colorStart: 0xffffff, colorEnd: 0x000000 },
    start: { x: 0.5, y: 0.5 }, // Start at middle
    shape: { x: 0.5, y: 0 } // Transition towards edge
}, 400, 300, 400, 400);

Параметры start и shape задаются в нормализованных координатах (от 0 до 1) относительно размеров градиента. start: { x: 0.5, y: 0.5 } означает, что градиент начинается точно в центре объекта размером 400x400. shape: { x: 0.5, y: 0 } задает вектор направления перехода цвета: от центра к точке, расположенной на половине ширины (x: 0.5) и в самом верху (y: 0) объекта. Это создает эффект светящейся сферы, которая плавно переходит в черный цвет к краям.

Объект bands определяет полосы градиента. Здесь используется упрощенный синтаксис для одной полосы, где colorStart — начальный цвет (белый), а colorEnd — конечный (черный).

Практическое применение и настройки

Радиальные градиенты — это не просто красивые круги. Вот несколько идей, как их можно использовать в реальных проектах:

* **Энергетические щиты или ауры:** Создайте градиент от яркого цвета в центре к прозрачному на краях (используя colorEnd с альфа-каналом, например, 0x00000000) и анимируйте его масштаб или интенсивность при получении урона. * **Подсветка объектов:** Поместите радиальный градиент с мягкими цветами под важным игровым объектом (ключом, бонусом), чтобы привлечь внимание игрока. * **Эффекты заклинаний:** Комбинируйте несколько градиентов с разными параметрами shape и анимацией вращения для создания вихрей, взрывов или магических порталов.

Важные параметры для экспериментов: - colorSpace и interpolation в объекте bands — управляют математикой смешивания цветов. - repeatMode — контролирует, как текстура градиента будет вести себя за пределами своих исходных размеров. - Векторы start и shape — ключ к управлению формой радиального градиента. Попробуйте сместить start от центра или изменить shape для создания эллиптических или асимметричных переходов.

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

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

  1. Добавить более двух цветов, используя массив bands
  2. Связать параметры shape.x и shape.y с движением мыши для интерактивного эффекта
  3. Использовать градиент в качестве маски для другого графического объекта. Эти техники помогут вам наполнить игру уникальной атмосферой и живыми эффектами