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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.atlas('flares', 'assets/particles/flares.png', 'assets/particles/flares.json');
    }

    create ()
    {
        const hsv = Phaser.Display.Color.HSVColorWheel();

        const color = hsv.map(entry => entry.color);

        const emitter = this.add.particles(100, 300, 'flares',
        {
            frame: 'white',
            color,
            lifespan: 4000,
            angle: { min: -20, max: 20 },
            speed: 200,
            frequency: 150,
            quantity: 2,
            blendMode: 'ADD'
        });

        window.emma = emitter;
    }
}

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

const game = new Phaser.Game(config);

Подготовка ассетов: атлас частиц

Первым шагом всегда является загрузка необходимых ресурсов. В данном примере используется атлас — единое изображение, содержащее несколько спрайтов (фреймов), и JSON-файл с данными об их расположении. Это эффективно для производительности.

В методе preload мы указываем базовый URL для загрузки и загружаем атлас с ключом 'flares'.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.atlas('flares', 'assets/particles/flares.png', 'assets/particles/flares.json');
}

Генерация цветовой палитры HSV

Сердце примера — создание плавного цветового градиента. Phaser предоставляет утилиту Phaser.Display.Color.HSVColorWheel(), которая возвращает массив из 360 объектов. Каждый объект соответствует одному градусу цветового круга HSV (оттенок, насыщенность, значение) и содержит готовый цвет в формате, понятном для рендерера.

Мы преобразуем этот массив, извлекая только числовое представление цвета для каждого элемента.

const hsv = Phaser.Display.Color.HSVColorWheel();
const color = hsv.map(entry => entry.color);

Теперь переменная color является массивом из 360 числовых значений цвета, который мы передадим эмиттеру.

Настройка и создание эмиттера частиц

Эмиттер создается с помощью метода this.add.particles. Первые два аргумента — это начальные координаты (X=100, Y=300). Третий аргумент — ключ загруженного текстураталаса ('flares'). Четвертый аргумент — объект конфигурации.

Ключевой параметр здесь — color. Мы передаем ему не один цвет, а целый массив color, полученный на предыдущем шаге. Эмиттер будет циклически перебирать этот массив, присваивая каждому новой частице следующий цвет из спектра.

Остальные параметры определяют поведение: - frame: 'white' — использует конкретный фрейм (белую вспышку) из атласа. - lifespan: 4000 — время жизни частицы в миллисекундах. - angle: { min: -20, max: 20 } — разброс направления вылета. - speed: 200 — начальная скорость. - frequency: 150 — интервал между испусканием групп частиц. - quantity: 2 — количество частиц в одной группе. - blendMode: 'ADD' — режим наложения, который делает светлые частицы ярче при наложении.

const emitter = this.add.particles(100, 300, 'flares',
{
    frame: 'white',
    color,
    lifespan: 4000,
    angle: { min: -20, max: 20 },
    speed: 200,
    frequency: 150,
    quantity: 2,
    blendMode: 'ADD'
});

Строка window.emma = emitter; — это "лазейка" для отладки, позволяющая исследовать объект эмиттера в консоли браузера.

Конфигурация игры и запуск

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

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

const game = new Phaser.Game(config);

После создания экземпляра Phaser.Game с этой конфигурацией автоматически запускается жизненный цикл сцены (preload, create и т.д.).

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

Вы освоили мощный прием: использование динамически сгенерированной палитры HSV для создания цветового потока в системе частиц. Это гораздо гибче, чем статичные текстуры. Для экспериментов попробуйте: изменить blendMode на 'NORMAL' или 'MULTIPLY'; использовать не весь массив из 360 цветов, а выбранный сегмент (например, hsv.slice(0, 60).map(...) для теплых оттенков); анимировать позицию эмиттера (emitter.setPosition(x, y)) для создания цветного шлейфа за движущимся объектом.