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

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

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

Версия 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.image('brush', 'assets/sprites/brush1.png');
    }

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

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

        const emitter = this.add.particles(400, 100, 'brush', {
            speedX: 200,
            lifespan: 2000,
            tint
        });

        this.tweens.add({
            targets: emitter,
            particleY: 400,
            speedX: -200,
            duration: 1500,
            ease: 'sine.inout',
            yoyo: true,
            repeat: -1
        });
    }
}

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

const game = new Phaser.Game(config);

Подготовка палитры: цветовой круг HSV

Перед созданием эмиттера необходимо сгенерировать палитру цветов. Phaser предоставляет удобную статическую функцию Phaser.Display.Color.HSVColorWheel(), которая возвращает массив из 360 объектов. Каждый объект соответствует одному градусу цветового круга в модели HSV (Hue, Saturation, Value) и содержит числовое представление цвета в формате RGB.

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

Полученный массив hsv содержит объекты со свойствами color (число) и `h` (оттенок). Для передачи в эмиттер нам нужен именно массив числовых значений цвета.

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

Метод .map() проходит по всему массиву hsv и создает новый массив tint, состоящий только из значений entry.color. Теперь у нас есть массив из 360 различных цветов, готовый к использованию.

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

Эмиттер создается с помощью метода this.add.particles(). Ключевой параметр для рандомизации цвета — это tint. Если передать в него массив (как наш tint), Phaser будет случайным образом выбирать значение из этого массива для каждой новой создаваемой частицы.

const emitter = this.add.particles(400, 100, 'brush', {
    speedX: 200,
    lifespan: 2000,
    tint // Сокращенная запись от tint: tint
});

Здесь: - 400, 100 — начальные координаты эмиттера. - 'brush' — ключ текстуры частицы (простая кисть). - speedX: 200 — начальная горизонтальная скорость частиц. - lifespan: 2000 — время жизни частицы в миллисекундах (2 секунды). - tint — массив цветов. Каждая частица при рождении получит случайный цвет из этого массива.

Анимация эмиттера с помощью твинов

Чтобы эффект не был статичным, добавим анимацию самому эмиттеру с помощью системы твинов this.tweens.add(). Мы заставим эмиттер двигаться вверх-вниз и менять направление разлета частиц.

this.tweens.add({
    targets: emitter,
    particleY: 400,
    speedX: -200,
    duration: 1500,
    ease: 'sine.inout',
    yoyo: true,
    repeat: -1
});

Этот твин анимирует свойства самого объекта emitter: - targets: emitter — объект для анимации. - particleY: 400 — конечное значение вертикальной координаты для новых частиц. - speedX: -200 — конечное значение горизонтальной скорости (частицы полетят влево). - duration: 1500 — длительность одного цикла анимации. - ease: 'sine.inout' — плавная синусоидальная функция easing. - yoyo: true — после завершения анимация пойдет в обратном порядке. - repeat: -1 — бесконечное повторение.

В результате эмиттер будет плавно "раскачиваться", создавая разноцветный фонтан частиц, меняющий направление.

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

Использование массива в свойстве tint — простой и мощный способ добавить цветовое разнообразие частицам. Вы можете экспериментировать: создавать палитру не из всего цветового круга, а только из теплых или холодных оттенков, менять массив tint динамически в зависимости от игровых событий или комбинировать этот подход с другими параметрами частиц, такими как scale или alpha, для создания сложных эффектов вроде северного сияния или разноцветного дыма.