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

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

Версия 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('bg', 'assets/tweens/sky.png');
        this.load.atlas('match3', 'assets/atlas/match3.png', 'assets/atlas/match3.json');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

        this.add.particles(0, 0, 'match3', {
            frame: 'Match3_Icon_04',
            scale: { start: 0.3, end: 0 },
            x: { min: 100, max: 700 },
            y: { start: 100, end: 500, ease: 'bounce.out' },
            lifespan: 2000
        });
    }
}

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

const game = new Phaser.Game(config);

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

В примере эмиттер частиц создаётся в методе create() сцены. Ключевую роль здесь играет метод this.add.particles(). Первые два аргумента (0, 0) задают исходную позицию самого эмиттера, но, как мы увидим, это не всегда финальная позиция частиц.

this.add.particles(0, 0, 'match3', {
    frame: 'Match3_Icon_04',
    scale: { start: 0.3, end: 0 },
    x: { min: 100, max: 700 },
    y: { start: 100, end: 500, ease: 'bounce.out' },
    lifespan: 2000
});

Метод принимает ключ атласа 'match3' в качестве текстуры и объект конфигурации, который определяет поведение всех испускаемых частиц. Свойство frame указывает, какой именно кадр из атласа использовать в качестве текстуры для частицы.

Управление масштабом: от появления до исчезновения

Свойство scale в конфигурации позволяет анимировать размер частицы от момента её рождения (start) до смерти (end). Это идеально подходит для эффектов, где частицы должны плавно растворяться или, наоборот, внезапно появляться.

scale: { start: 0.3, end: 0 }

В данном коде каждая частица появляется с масштабом 0.3 (30% от исходного размера текстуры) и постепенно уменьшается до 0 в течение своей жизни, создавая эффект плавного исчезновения. Если бы значение end было больше start, частицы, наоборот, увеличивались бы.

Случайное и анимированное движение по осям

Конфигурация позиции частицы демонстрирует два разных подхода для горизонтальной (X) и вертикальной (Y) осей.

Для оси X используется случайное распределение. Частица в момент создания получает случайную координату X в заданном диапазоне. Это создаёт эффект разлёта или рассеивания.

x: { min: 100, max: 700 }

Для оси Y применяется анимация (твининг). Частица начинает движение с координаты start и за время жизни перемещается к координате end. Параметр ease задаёт функцию плавности 'bounce.out', которая создаёт эффект отскока в конечной точке.

y: { start: 100, end: 500, ease: 'bounce.out' }

Важно: координаты X и Y здесь — это свойства самой частицы, а не эмиттера. Эмиттер, созданный в точке (0, 0), лишь является их источником.

Жизненный цикл и производительность

Свойство lifespan — это фундаментальный параметр, определяющий время жизни частицы в миллисекундах. От него напрямую зависит, как долго будут воспроизводиться анимации scale и `y`.

lifespan: 2000

Здесь каждая частица живёт ровно 2 секунды (2000 мс), после чего автоматически уничтожается. Правильная настройка этого параметра критически важна для производительности. Слишком большое значение при активном испускании может привести к накоплению тысяч невидимых частиц в памяти. Всегда соизмеряйте lifespan с частотой испускания (frequency или quantity), если вы её задаёте.

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

Используя объекты конфигурации для свойств вроде scale и позиции, вы получаете прямой контроль над анимацией каждой частицы от начала и до конца её пути. Это основа для создания сложных эффектов, управляемых данными. Для экспериментов попробуйте изменить функцию плавности (ease) на 'sine.inOut' или 'back.out', задать для scale значение end большее, чем start, чтобы частицы росли, или добавить свойство alpha для управления прозрачностью: { start: 1, end: 0 }.