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

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

Версия 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');

        const emitter1 = particles.createEmitter({
            frame: 'blue',
            x: 400,
            y: 300,
            speed: 200,
            blendMode: 'ADD',
            lifespan: 1000
        });

        const emitter2 = particles.createEmitter({
            frame: 'red',
            x: 400,
            y: 300,
            speed: 200,
            scale: 0.5,
            blendMode: 'ADD',
            lifespan: 2000
        });

        const emitter3 = particles.createEmitter({
            frame: 'yellow',
            x: 400,
            y: 300,
            speed: 200,
            scale: { min: 0, max: 1 },
            blendMode: 'ADD',
            lifespan: 2500
        });

    }
}

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

const game = new Phaser.Game(config);

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

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

В методе preload мы загружаем атлас с именем 'flares'. Этот конкретный атлас содержит разноцветные круги, идеально подходящие для эффектов частиц.

this.load.atlas('flares', 'assets/particles/flares.png', 'assets/particles/flares.json');

Здесь 'flares' — это ключ, по которому мы будем обращаться к атласу. Второй и третий аргументы — пути к файлу изображения и JSON-файлу с данными о расположении каждого фрейма внутри атласа.

Создание менеджера частиц и первого эмиттера

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

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

Затем создаётся первый эмиттер. Эмиттер — это объект, который генерирует частицы с заданными параметрами.

const emitter1 = particles.createEmitter({
    frame: 'blue',
    x: 400,
    y: 300,
    speed: 200,
    blendMode: 'ADD',
    lifespan: 1000
});

Разберём конфигурацию: - frame: 'blue': Использует фрейм с синим кругом из атласа. - x: 400, y: 300: Позиция источника частиц в центре экрана (при разрешении 800x600). - speed: 200: Частицы будут вылетать со скоростью 200 пикселей в секунду во всех направлениях. - blendMode: 'ADD': Режим наложения 'ADD' (сложение) делает яркие частицы ещё ярче при наложении, что идеально для эффектов света, огня или энергии. - lifespan: 1000: Время жизни каждой частицы — 1000 миллисекунд (1 секунда).

Добавление второго и третьего эмиттеров

Сила системы в том, что из одного менеджера particles можно создать множество независимых эмиттеров. Создадим второй, испускающий красные частицы.

const emitter2 = particles.createEmitter({
    frame: 'red',
    x: 400,
    y: 300,
    speed: 200,
    scale: 0.5,
    blendMode: 'ADD',
    lifespan: 2000
});

Ключевое отличие — scale: 0.5. Это делает все красные частицы в два раза меньше исходного размера фрейма. Также увеличено время жизни (lifespan: 2000), поэтому красные частицы будут «жить» 2 секунды, создавая более длинный хвост.

Третий эмиттер добавляет ещё больше вариативности.

const emitter3 = particles.createEmitter({
    frame: 'yellow',
    x: 400,
    y: 300,
    speed: 200,
    scale: { min: 0, max: 1 },
    blendMode: 'ADD',
    lifespan: 2500
});

Здесь параметр scale задан объектом с min и max. Это означает, что каждая жёлтая частица получит случайный начальный масштаб в диапазоне от 0 (полностью невидимая) до 1 (исходный размер). Это создаёт эффект разнообразия и натуральности.

Конфигурация игры

Код завершается стандартной настройкой объекта конфигурации Phaser Game. Важный момент — для корректной работы режима наложения 'ADD' и частиц в целом требуется использовать рендерер WEBGL.

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

const game = new Phaser.Game(config);

Чёрный фон (backgroundColor: '#000') лучше всего контрастирует с яркими, «аддитивными» частицами. Убедитесь, что элемент с id='phaser-example' существует в вашем HTML.

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

Используя несколько эмиттеров из одного менеджера частиц, вы можете легко комбинировать различные текстуры, размеры и свойства для создания богатых визуальных эффектов. Для экспериментов попробуйте: 1. Разнести эмиттеры в пространстве, изменив параметры `xиy`. 2. Заставить эмиттеры следовать за курсором мыши или спрайтом игрока. 3. Поиграть с другими параметрами, например, angle (направление разлёта) или gravityY (симуляция падения). 4. Использовать методы emitter.stop() и emitter.start() для управления эффектами по событию (например, выстрел или взрыв).