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

Градиенты в Phaser 3 — мощный инструмент для создания визуальных эффектов без использования тяжелых текстур. В этой статье мы разберем пример создания анимированного «вспышечного» свечения поверх изображения, используя объект Gradient Game Object. Вы научитесь настраивать сложные радиальные градиенты с прозрачностью и анимировать их в реальном времени, что идеально подходит для эффектов ауры, магии, света или энергетических полей в вашей игре.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    gradient;

    preload ()
    {
        
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('zod', 'assets/pics/zod4.png');
    }

    create ()
    {
        const zod = this.add.image(400, 300, 'zod');
        Phaser.Actions.FitToRegion(zod, 1);

        this.gradient = this.add.gradient({
            repeatMode: 1, // TRUNCATE
            start: { x: 0.5, y: 0.5 },
            shape: { x: 0.5, y: 0 },
            shapeMode: 2, // RADIAL
            bands: [
                {
                    colorStart: [ 0.5, 1, 1, 0 ],
                    colorEnd: [ 1, 1, 1, 1 ],
                    interpolation: 4,
                    start: 0.2,
                    end: 0.4
                },
                {
                    colorStart: [ 1, 1, 1, 1 ],
                    colorEnd: [ 1, 0.7, 0.3, 0 ],
                    interpolation: 3,
                    start: 0.4,
                    end: 0.8
                },
                {
                    colorStart: [ 0, 0, 0, 0 ],
                    colorEnd: [ 0, 0, 0, 0 ],
                    start: 0.8,
                    end: 1
                }
            ]
        }, 335, 215, 400, 400);
    }

    update (time)
    {
        this.gradient.offset = 0.03 * Math.sin(time / 1000);
    }
}

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

const game = new Phaser.Game(config);

Основы: Загрузка и подготовка изображения

Первым делом в методе preload мы загружаем изображение, которое будет служить основой для нашего эффекта. Важно установить базовый URL для загрузчика.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('zod', 'assets/pics/zod4.png');
}

В методе create мы добавляем это изображение на сцену. Ключевой момент — использование Phaser.Actions.FitToRegion. Эта функция масштабирует наше изображение (в данном случае — до размера 1x1 пиксель), но это не проблема, так как градиент будет отрисовываться поверх него независимо. Основная цель — просто разместить объект изображения в сцене.

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

Сердце примера — создание объекта градиента с помощью this.add.gradient(). Этот метод принимает объект конфигурации и параметры позиционирования (x, y, width, height).

this.gradient = this.add.gradient({
    repeatMode: 1, // TRUNCATE
    start: { x: 0.5, y: 0.5 },
    shape: { x: 0.5, y: 0 },
    shapeMode: 2, // RADIAL
    bands: [
        {
            colorStart: [ 0.5, 1, 1, 0 ],
            colorEnd: [ 1, 1, 1, 1 ],
            interpolation: 4,
            start: 0.2,
            end: 0.4
        },
        // ... другие bands
    ]
}, 335, 215, 400, 400);

Разберем ключевые параметры: - shapeMode: 2 — задает радиальный тип градиента. - start и shape — определяют центр и форму градиента. Здесь градиент расходится из центра (x:0.5, y:0.5). - bands — массив полос, определяющих цвета. Каждая полоса имеет начальную (colorStart) и конечную (colorEnd) точки цвета в формате RGBA (значения от 0 до 1), а также позиции start и end (от 0 до 1) внутри общего градиента. Параметр interpolation управляет переходом между цветами. В данном примере три полосы создают эффект яркого ядра, переходящего в теплое свечение и затем в полную прозрачность.

Анимация градиента в реальном времени

Чтобы эффект не был статичным, мы анимируем смещение градиента в методе update. Phaser автоматически вызывает этот метод каждый кадр, передавая текущее время.

update (time)
{
    this.gradient.offset = 0.03 * Math.sin(time / 1000);
}

Здесь мы изменяем свойство offset нашего градиента. Используя синусоидальную функцию от времени (time / 1000 переводит миллисекунды в секунды для более плавной анимации), мы создаем циклическое, пульсирующее движение градиента. Множитель 0.03 контролирует амплитуду этого движения. Это простое изменение создает впечатление живого, мерцающего свечения.

Настройка сцены и запуск игры

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

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

const game = new Phaser.Game(config);

Темный фон (#2d2d2d) хорошо контрастирует со светящимся градиентом, делая эффект более выразительным. Класс Example, который мы разобрали, передается как сцена для игры.

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

Объект Gradient в Phaser 3 открывает широкие возможности для создания производительных и красивых динамических эффектов прямо в коде. Вы освоили создание сложных радиальных градиентов с контролем прозрачности и их плавную анимацию. **Идеи для экспериментов:** 1. Измените цвета в массиве bands, чтобы создать ауру другого элемента (ледяную, ядовитую, темную). 2. Поэкспериментируйте с shape и shapeMode, чтобы получить линейные или конические градиенты. 3. Свяжите значение offset или интенсивность цвета с игровой логикой (например, здоровьем персонажа или силой заклинания). 4. Наложите несколько градиентов друг на друга с разными режимами смешивания (blendMode).