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

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

Версия 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: 'red',
            x: 200, y: 150,
            lifespan: 1000,
            angle: { start: 0, end: 360, steps: 32 },
            speed: 200,
            quantity: 16,
            scale: { start: 0.3, end: 0 },
            frequency: 64,
            blendMode: 'ADD'
        });

        particles.createEmitter({
            frame: 'yellow',
            x: 600, y: 150,
            lifespan: 800,
            angle: { start: 360, end: 0, steps: 32 },
            speed: 200,
            quantity: 1,
            scale: { start: 0.8, end: 0 },
            frequency: 40,
            blendMode: 'ADD'
        });

        particles.createEmitter({
            frame: 'blue',
            x: 200, y: 450,
            lifespan: 1000,
            angle: { start: 0, end: 360, steps: 360 },
            speed: 200,
            quantity: 8,
            scale: { start: 0.4, end: 0 },
            blendMode: 'ADD'
        });

        particles.createEmitter({
            frame: 'green',
            x: 600, y: 450,
            lifespan: { min: 600, max: 800 },
            angle: { start: 0, end: 360, steps: 64 },
            speed: 200,
            quantity: 64,
            scale: { start: 0.2, end: 0.1 },
            frequency: 32,
            blendMode: 'ADD'
        });
    }
}

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

const game = new Phaser.Game(config);

Магия параметра `steps` в конфигурации `angle`

Ключ к созданию структурированных эффектов лежит в использовании объекта для настройки угла испускания. Вместо одного числа мы передаём объект со свойствами start, end и steps. Это позволяет разбить диапазон углов на дискретные шаги.

angle: { start: 0, end: 360, steps: 32 }

Здесь start и end задают начальный и конечный угол в градусах (0 — направо, 90 — вниз). Параметр steps определяет, на сколько равных частей разбивается этот диапазон. Частицы будут испускаться не случайным образом в пределах угла, а строго по этим заданным направлениям. Например, при steps: 32 и диапазоне 360° частицы будут вылетать по 32 фиксированным лучам, равномерно распределённым по кругу.

От лучей к кольцам: Анализ примеров

Давайте разберём четыре эмиттера из исходного кода, чтобы увидеть разницу в применении.

Первый эмиттер создаёт плотный круг из красных частиц. Большое количество частиц за раз (quantity: 16) и высокая частота (frequency: 64) при 32 шагах угла создают эффект сплошного вращающегося кольца.

particles.createEmitter({
    frame: 'red',
    x: 200, y: 150,
    lifespan: 1000,
    angle: { start: 0, end: 360, steps: 32 },
    speed: 200,
    quantity: 16,
    scale: { start: 0.3, end: 0 },
    frequency: 64,
    blendMode: 'ADD'
});

Второй эмиттер (жёлтый) — полная противоположность. Он испускает всего одну частицу за раз, но угол меняется с 360° до 0° с теми же 32 шагами. Это создаёт эффект медленного, последовательного «прорисовывания» круга против часовой стрелки.

angle: { start: 360, end: 0, steps: 32 }

Сплошной круг и хаотичное кольцо

Третий эмиттер (синий) демонстрирует предельный случай. Количество шагов угла равно 360 — по одному на каждый градус. Это создаёт иллюзию идеально гладкого, сплошного круга, особенно при достаточно большом количестве частиц, испускаемых за один выброс (quantity: 8). Обратите внимание, у этого эмиттера нет параметра frequency, поэтому частицы испускаются только один раз при создании.

angle: { start: 0, end: 360, steps: 360 },
quantity: 8,
// frequency не задан

Четвёртый эмиттер (зелёный) комбинирует техники. Он использует 64 шага для угла и выбрасывает сразу 64 частицы, заполняя все направления одновременно. Однако добавление случайности к времени жизни частиц (lifespan: { min: 600, max: 800 }) и небольшое изменение масштаба (scale: { start: 0.2, end: 0.1 }) вносят лёгкую неравномерность, делая кольцо более «живым» и динамичным.

Практические советы по настройке

Чтобы эффективно использовать эту технику, запомните несколько правил:

1. **quantity и steps:** Количество частиц, испускаемых за один выброс (quantity), должно быть кратно или равно числу шагов (steps), чтобы все лучи были равномерно заполнены. Если quantity меньше steps, некоторые направления останутся пустыми. 2. **Направление движения:** Изменяя порядок start и end, вы управляете направлением последовательного испускания. start: 0, end: 360 — по часовой стрелке, start: 360, end: 0 — против. 3. **Узкие лучи:** Чтобы создать луч, а не круг, сузьте диапазон угла. Например, angle: { start: 80, end: 100, steps: 5 } создаст веер частиц в секторе 20 градусов. 4. **Комбинация с frequency:** Для непрерывно работающего эффекта (как у красного или зелёного эмиттеров) обязательно задавайте параметр frequency. Для одноразового выброса (как у синего) — опускайте его.

// Пример: Создание узкого конусообразного выхлопа
angle: { start: 70, end: 110, steps: 8 },
speed: { min: 250, max: 350 }, // Добавляем случайность скорости
quantity: 8,
frequency: 100

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

Параметр steps в настройке угла превращает Particle Emitter из генератора хаоса в точный инструмент для создания геометрических фигур из частиц. Вы можете легко создавать лучи, сектора, кольца и идеальные круги, управляя всего несколькими числами. **Идеи для экспериментов:** 1. Свяжите свойство angle.start с положением курсора мыши, чтобы луч следовал за игроком. 2. Создайте «спиральный» эффект, анимируя (увеличивая или уменьшая) свойства angle.start и angle.end с течением времени с помощью Scenes.Events.UPDATE. 3. Скомбинируйте несколько эмиттеров с разным цветом (frame) и небольшим смещением угла, чтобы получить сложные многослойные эффекты.