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

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

Версия 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 rect = new Phaser.Geom.Rectangle(100, 100, 600, 400);

        particles.createEmitter({
            frame: [ 'red', 'yellow', 'green' ],
            x: 400, y: 300,
            lifespan: 4000,
            speed: { min: 100, max: 250 },
            scale: { start: 0.4, end: 0 },
            gravityY: 150,
            bounce: 0.8,
            bounds: rect,
            blendMode: 'ADD'
        });

        particles.createEmitter({
            frame: 'blue',
            lifespan: 1000,
            scale: { start: 0.4, end: 0 },
            emitZone: { type: 'edge', source: rect, quantity: 60 }
        });
    }
}

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

const game = new Phaser.Game(config);

Создание эмиттера с ограничивающим прямоугольником

Первый эмиттер в примере использует параметр bounds, чтобы ограничить движение частиц прямоугольной областью. Это означает, что частицы не смогут вылететь за его пределы, а при столкновении с границей будут отскакивать.

Ключевой объект здесь — Phaser.Geom.Rectangle. Он создает прямоугольник, который затем передается в конфигурацию эмиттера.

const rect = new Phaser.Geom.Rectangle(100, 100, 600, 400);

Этот прямоугольник задает область от точки (100, 100) шириной 600 пикселей и высотой 400 пикселей. Теперь создадим эмиттер, который будет использовать этот прямоугольник как границу.

particles.createEmitter({
    frame: [ 'red', 'yellow', 'green' ],
    x: 400, y: 300,
    lifespan: 4000,
    speed: { min: 100, max: 250 },
    scale: { start: 0.4, end: 0 },
    gravityY: 150,
    bounce: 0.8,
    bounds: rect,
    blendMode: 'ADD'
});

Параметр bounds: rect привязывает эмиттер к нашей геометрической области. Частицы рождаются в точке (400, 300) — внутри прямоугольника. Параметр bounce: 0.8 определяет коэффициент упругости: при ударе о границу частица теряет 20% скорости (отскакивает с 80% от исходной). Гравитация (gravityY: 150) тянет их вниз, создавая дугообразные траектории, ограниченные прямоугольником. Режим наложения 'ADD' делает цвета ярче при смешивании.

Эмиссия частиц по краям фигуры с помощью `emitZone`

Второй эмиттер демонстрирует принципиально иной подход: частицы не рождаются в одной точке, а испускаются по всему краю (edge) заданной фигуры. Это идеально для создания контурных эффектов, например, свечения вокруг объекта.

Здесь используется тот же прямоугольник rect, но уже как источник (source) для зоны испускания.

particles.createEmitter({
    frame: 'blue',
    lifespan: 1000,
    scale: { start: 0.4, end: 0 },
    emitZone: { type: 'edge', source: rect, quantity: 60 }
});

Конфигурация emitZone указывает, что зона имеет type: 'edge'. Это означает, что точки рождения частиц будут равномерно распределены по периметру фигуры-источника (source: rect). Параметр quantity: 60 задает общее количество этих точек испускания на краю. Частицы (синие 'blue' вспышки) будут появляться одновременно на всех этих точках, создавая мгновенное свечение по контуру прямоугольника. У них короткое время жизни (lifespan: 1000), и они исчезают, уменьшаясь до нуля (scale: ... end: 0).

Сравнение подходов: `bounds` против `emitZone`

Важно понимать фундаментальную разницу между этими двумя параметрами, так как они решают разные задачи.

* **bounds** — это *ограничитель движения*. Эмиттер имеет точку или область рождения частиц (здесь это x: 400, y: 300). Частицы двигаются свободно, но не могут покинуть заданную область. Это физическое ограничение. * **emitZone** — это *определитель места рождения*. Он напрямую говорит эмиттеру, *где* создавать каждую новую частицу. В режиме 'edge' источником координат становится сама геометрическая фигура.

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

Эти параметры можно комбинировать. Например, эмиттер с emitZone также может иметь bounds, чтобы частицы, рожденные на краю, далее двигались в ограниченной области.

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

Чтобы эффекты выглядели убедительно, обратите внимание на следующие детали конфигурации из примера.

**Скорость и гравитация:**

speed: { min: 100, max: 250 },
gravityY: 150

Случайная скорость в диапазоне создает естественную вариативность. Положительная гравитация по оси Y имитирует притяжение, заставляя частицы падать и сталкиваться с нижней границей bounds.

**Время жизни и масштаб:**

lifespan:的首要4000,
scale: { start: 0.4, end: 0 }

Длительное время жизни (4000 мс) позволяет частицам долго существовать и перемещаться. Параметр масштаба делает частицу крупной в начале и полностью исчезающей к концу жизни, создавая плавное затухание.

**Режим наложения:**

blendMode: 'ADD'

Режим 'ADD' (аддитивное смешивание) складывает цвета частиц и фона. На темном фоне это дает яркое, светящееся свечение. Для других эффектов можно использовать 'NORMAL', 'MULTIPLY' или 'SCREEN'.

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

Использование bounds и emitZone открывает тонкий контроль над поведением системы частиц в Phaser. bounds — это физическая клетка для частиц, а emitZone — их фабрика на заданной геометрии. Для экспериментов попробуйте

  1. Заменить Rectangle на Circle или Ellipse в emitZone
  2. Использовать emitZone с типом 'random' для заполнения всей площади фигуры
  3. Добавить вращение (rotate) частицам внутри ограниченных bounds
  4. Создать эмиттер, где emitZone и bounds — это разные фигуры, например, рождать на краю круга, но ограничивать движение прямоугольником