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

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

Версия 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: 'yellow',
            radial: false,
            x: 100,
            y: { start: 0, end: 560, steps: 256 },
            lifespan: 2000,
            speedX: { min: 200, max: 400 },
            quantity: 4,
            gravityY: -50,
            scale: { start: 0.6, end: 0, ease: 'Power3' },
            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 для этого часто используют атласы — изображения, содержащие несколько кадров (спрайтов) в одном файле.

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

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() происходит основная настройка эффекта. Сначала создается менеджер частиц (Particle Emitter Manager), который будет управлять всеми эмиттерами, использующими загруженный атлас.

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

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

    particles.createEmitter({
        // Параметры эмиттера будут здесь
    });
}

Разбор конфигурации эмиттера

Давайте подробно разберем каждый параметр, который делает наши частицы похожими на огненные шары.

* frame: 'yellow': Указывает, какой кадр из атласа 'flares' использовать. В данном случае — желтый круг. * radial: false: Отключает радиальное испускание. Частицы будут лететь в одном направлении (по оси X), а не во все стороны. * x: 100: Фиксированная координата X, откуда будут появляться частицы (100 пикселей от левого края). * y: { start: 0, end: 560, steps: 256 }: Координата Y будет меняться. Это свойство — объект Ease, который плавно меняет значение от 0 до 560 за 256 шагов. Таким образом, источник огня будет перемещаться сверху вниз по экрану.

{
    frame: 'yellow',
    radial: false,
    x: 100,
    y: { start: 0, end: 560, steps: 256 },
    // ...
}

Физика и внешний вид частиц

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

*   `lifespan: 2000`: Время жизни частицы в миллисекундах (2 секунды).
*   `speedX: { min: 200, max: 400 }`: Скорость движения по оси X задается случайным значением в диапазоне от 200 до 400 пикселей в секунду. Частицы будут лететь вправо с разной скоростью.
*   `quantity: 4`: Количество частиц, испускаемых за один выпуск (эмиттер испускает их постоянно).
*   `gravityY: -50`: Отрицательное значение силы тяжести по оси Y. Это заставляет частицы лететь не только вправо, но и вверх, создавая дугообразную траекторию, как у подброшенного шара.
*   `scale: { start: 0.6, end: 0, ease: 'Power3' }`: Масштаб частицы плавно уменьшается от 0.6 до 0 за время ее жизни, создавая эффект затухания. Функция плавности `'Power3'` задает нелинейное изменение.
*   `blendMode: 'ADD'`: Режим наложения `ADD` (сложение) делает яркие частицы еще ярче при наложении друг на друга, что идеально для эффектов огня и свечения.
{
    // ...
    lifespan: 2000,
    speedX: { min: 200, max: 400 },
    quantity: 4,
    gravityY: -50,
    scale: { start: 0.6, end: 0, ease: 'Power3' },
    blendMode: 'ADD'
}

Инициализация игры

Код завершается стандартной конфигурацией объекта Phaser.Game. Обратите внимание на параметр type: Phaser.WEBGL. Для корректной работы режимов наложения, таких как 'ADD', необходим WebGL-рендерер.

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

const game = new Phaser.Game(config);

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

Вы создали эффект летящих огненных шаров, разобрав ключевые свойства Particle Emitter в Phaser 3. Основная сила системы частиц — в гибкости. Экспериментируйте: измените frame на 'red' или 'white', задайте эмиттеру движение по сложной траектории с помощью follow, измените gravityY на положительное значение, чтобы шары падали, или добавьте accelerationX для их разгона. Комбинируя несколько эмиттеров с разными настройками, можно создавать сложные эффекты вроде взрывов или магических аурит.