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

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

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

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

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: 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 particles = this.add.particles('flares');

        particles.createEmitter({
            frame: 'white',
            x: 400,
            y: 300,
            speed: 100,
            tint: [ 0xffff00, 0xff0000, 0x00ff00, 0x0000ff ],
            lifespan: 2000,
            frequency: 50,
            blendMode: 'ADD'
        });
    }
}

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

const game = new Phaser.Game(config);

Загрузка атласа частиц

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

В методе preload() мы задаем базовый URL для загрузки и загружаем атлас с ключом 'flares'. В качестве текстуры используется изображение flares.png, а данные о кадрах берутся из flares.json.

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() мы создаем менеджер частиц и сразу на нем — эмиттер. Ключевой параметр frame указывает, какой конкретный кадр из атласа 'flares' использовать для всех частиц этого эмиттера. В нашем случае это белая текстура ('white'), которую мы будем окрашивать.

Координаты `xиyзадают точку испускания частиц.speedопределяет их начальную скорость.lifespan— время жизни частицы в миллисекундах, аfrequency` — интервал между испусканием новых частиц (чем меньше число, тем чаще они появляются).

const particles = this.add.particles('flares');

particles.createEmitter({
    frame: 'white',
    x: 400,
    y: 300,
    speed: 100,
    lifespan: 2000,
    frequency: 50,
    blendMode: 'ADD'
});

Параметр blendMode: 'ADD' устанавливает режим наложения цвета частиц на фон. Режим ADD (сложение) делает яркие частицы еще ярче, создавая эффект свечения, что идеально подходит для огня, света или магии.

Магия свойства tint: градиент цвета

Самая интересная часть — массив tint. Именно он превращает однотонные белые частицы в разноцветный поток. Свойство tint применяет цветовой оттенок к текстуре частицы.

Если передать массив из нескольких цветов в шестнадцатеричном формате (например, 0xffff00 — желтый), Phaser будет случайным образом выбирать один из этих цветов для каждой вновь созданной частицы.

В нашем примере палитра состоит из желтого, красного, зеленого и синего цветов. Это создает эффект радуги или конфетти.

tint: [ 0xffff00, 0xff0000, 0x00ff00, 0x0000ff ]

Важно помнить, что tint работает с исходной текстурой частицы. Поэтому выбран белый кадр ('white') — он лучше всего подходит для тонирования, так как не искажает итоговый цвет.

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

Финальный шаг — создание экземпляра игры с конфигурационным объектом. В нем мы указываем тип рендерера (WEBGL необходим для корректной работы режимов наложения, таких как ADD), размеры холста, цвет фона и класс главной сцены.

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

const game = new Phaser.Game(config);

Черный фон ('#000') выбран для наилучшего контраста с яркими, цветными частицами.

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

Использование массива tint — простой и мощный способ добавить визуальное разнообразие системе частиц. Вы можете экспериментировать: попробуйте создать несколько эмиттеров с разными палитрами tint и позициями, измените blendMode на NORMAL или MULTIPLY, чтобы увидеть, как это влияет на смешивание с фоном. Также попробуйте анимировать изменение цвета, динамически модифицируя массив tint у уже работающего эмиттера через его свойства.