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

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

Версия 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.image('bg', 'assets/ui/undersea-bg.png');
        this.load.spritesheet('fish', 'assets/sprites/fish-136x80.png', { frameWidth: 136, frameHeight: 80 });
    }

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

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

        /*
        var emitter = particles.createEmitter({
            frame: 0,
            x: { start: 100, end: 400, randomStart: true },
            y: 300,
            gravityY: [ 10, 20, 30, 40, 50 ],
            active: false
        });
    */

        const emitter = particles.createEmitter({
            frame: [ 0, 1, 2 ],
            x: 300,
            y: 400,
            lifespan: 2000,
            scale: { start: 4, end: 1, random: true },
            alpha: { start: 1, end: 0 },
            particleAngle: { start: 0, end: 360 },
            active: true
        });


        /*
        var emitter = particles.createEmitter({
            frame: 0,
            x: 0,
            y: { start: 100, end: 500, steps: 10 },
            lifespan: 2000,
            speedX: 200
        });

        var emitter2 = particles.createEmitter({
            frame: 1,
            x: 300,
            y: { start: 100, end: 500, steps: 10 },
            lifespan: 2000,
            speedX: 200
        });
    */

        /*
        var emitter = particles.createEmitter({
            frame: 0,
            radial: false,
            x: 200,
            y: 200,
            lifespan: 1000,
            speedY: 200
        });
    */
        console.log(emitter);

        this.input.once('pointerdown', event =>
        {

            emitter.setPosition(400, 200);

        });
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и создание менеджера частиц

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

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bg', 'assets/ui/undersea-bg.png');
    this.load.spritesheet('fish', 'assets/sprites/fish-136x80.png', { frameWidth: 136, frameHeight: 80 });
}

В методе create мы создаем менеджер частиц, который будет управлять всеми эмиттерами, использующими текстуру fish. Менеджер (ParticleEmitterManager) — это контейнер, оптимизированный для рендеринга большого количества одинаковых частиц.

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

Конфигурация основного эмиттера

Создание эмиттера — это вызов метода createEmitter с объектом конфигурации. Давайте разберем активный эмиттер из примера по параметрам.

const emitter = particles.createEmitter({
    frame: [ 0, 1, 2 ],
    x: 300,
    y: 400,
    lifespan: 2000,
    scale: { start: 4, end: 1, random: true },
    alpha: { start: 1, end: 0 },
    particleAngle: { start: 0, end: 360 },
    active: true
});

* frame: Частицы будут случайным образом брать один из трех кадров (0, 1, 2) из спрайтшита. * `x,y`: Фиксированная точка испускания частиц на экране. * lifespan: Время жизни частицы в миллисекундах (2000 мс = 2 секунды). * scale: Размер частицы меняется от 4x к 1x за время её жизни. Параметр random: true означает, что начальный масштаб каждой частицы будет случайным в заданном диапазоне. * alpha: Прозрачность плавно уменьшается от полной видимости (1) до полной прозрачности (0). * particleAngle: Угол поворота каждой частицы изменяется от 0 до 360 градусов за время её жизни, создавая эффект вращения. * active: true: Эмиттер начинает испускать частицы сразу после создания.

Динамическое управление эмиттером

Параметры эмиттера можно менять на лету. В примере по клику мыши позиция испускания частиц мгновенно перемещается в новую точку.

this.input.once('pointerdown', event =>
{
    emitter.setPosition(400, 200);
});

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

Эксперименты с другими конфигурациями (закомментированный код)

В исходном коде есть несколько закомментированных альтернативных конфигураций, которые стоит изучить.

**Вариант с гравитацией и случайным началом по X:**

x: { start: 100, end: 400, randomStart: true },
y: 300,
gravityY: [ 10, 20, 30, 40, 50 ],

Здесь `xзадан как интервал (start,end), аrandomStart: trueозначает, что каждая частица появится в случайной точке этого интервала. МассивgravityY` задаёт силу гравитации: каждая частица получит случайное значение из этого списка, создавая разнообразное падение.

**Вариант с линейным движением и шагами:**

y: { start: 100, end: 500, steps: 10 },
speedX: 200

Параметр steps — мощный инструмент. Частицы будут появляться только в 10 конкретных точках между Y=100 и Y=500, создавая ровные линии или сетку. speedX задаёт горизонтальную скорость.

**Вариант с нерадиальным испусканием:**

radial: false,
speedY: 200

По умолчанию эмиттер радиальный (radial: true), и частицы разлетаются во все стороны. Установка radial: false заставляет частицы двигаться строго по вектору скорости (speedY в данном случае — вниз).

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

Particle Emitter в Phaser 3 — это конструктор визуальных эффектов, где вы контролируете рождение, жизнь и смерть каждой частицы. Начните с базовых параметров (lifespan, scale, alpha), затем добавьте движение через speed, gravity или acceleration. Экспериментируйте: попробуйте создать метель, используя angle и speed с большим разбросом; имитируйте искры от костра с коротким lifespan и высокой frequency; или сделайте фон из пузырьков, задав `yкак интервал сstepsи отрицательнуюspeedY`. Главное — понимать, что каждая частица живёт по заданным вами правилам.