Источник частиц: точка, зона, путь

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

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

Источник частиц: точка

Точечный источник (Point Source) представляет собой фиксированное положение на сцене, где частицы появляются из одной точки. Он используется для эффектов, где нужно, чтобы все частицы начинали движение из одной координаты, например:

const particles = this.add.particles('spark');
const emitter = particles.createEmitter({
    x: 400,
    y: 300,
    speed: { min: 100, max: 200 },
    angle: { min: 0, max: 360 },
    lifespan: 1000,
    quantity: 5
});

Ключевые параметры точечного источника:

  • x, y — координаты появления частиц.
  • speed — диапазон скорости частиц.
  • angle — направление движения. Для полного круга указываются 0–360 градусов.
  • lifespan — время жизни частицы в миллисекундах.
  • quantity — количество частиц за один тик эмиттера.

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

Источник частиц: зона

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

Пример использования прямоугольной зоны:

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

const emitter = particles.createEmitter({
    speed: 100,
    lifespan: 2000,
    quantity: 2,
    emitZone: { type: 'random', source: zone }
});

Параметры зоны:

  • type — метод генерации: random (случайные точки), edge (только границы), onEnter (при входе в зону).
  • source — объект зоны (Rectangle, Circle, Ellipse, Polygon).
  • quantity — число частиц за тик.
  • stepRate — для равномерного распределения вдоль границы.

Особенности: Частицы могут появляться равномерно по всей зоне или только на границе, что позволяет создавать разнообразные эффекты: градиентное появление дыма или эффект дождя из облака.

Источник частиц: путь

Путь (Path Source) задаёт траекторию, по которой частицы появляются или движутся. Это особенно полезно для визуализации магических линий, следов движения объектов или лазеров. В Phaser путь создаётся через объекты Phaser.Curves.Path, которые поддерживают линии, кривые Безье и сплайны.

Пример кривой Безье:

const path = this.add.path(100, 300);
path.cubicBezierTo(200, 100, 400, 500, 600, 300);

const emitter = particles.createEmitter({
    speed: 150,
    lifespan: 3000,
    follow: path,
    quantity: 1
});

Особенности пути:

  • follow — указывает путь, вдоль которого частицы будут перемещаться.
  • t — параметр пути для расчёта позиции частицы (от 0 до 1).
  • rotateToDirection — при true частица будет поворачиваться по направлению движения по кривой.
  • spacing — шаг между частицами вдоль пути.

Использование пути позволяет создавать динамичные и контролируемые эффекты, например, след за персонажем, огненные траектории, водяные струи и закрученные магические эффекты.

Настройка смешанных источников

Phaser позволяет комбинировать источники для создания сложных эффектов:

  • Точка + зона: основной взрыв из центра с рассеиванием по области.
  • Зона + путь: частицы начинают из области и следуют определённой кривой.
  • Точка + путь: частицы из фиксированной точки движутся по заранее заданной траектории.

Пример комбинированного эффекта:

const path = this.add.path(400, 300);
path.lineTo(600, 300);

const emitter = particles.createEmitter({
    speed: 200,
    lifespan: 1500,
    emitZone: { type: 'random', source: new Phaser.Geom.Circle(400, 300, 50) },
    follow: path,
    quantity: 3
});

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

Управление параметрами частиц

Каждый источник частиц можно гибко настраивать:

  • Размер (scale) — случайный или динамический рост/уменьшение частицы.
  • Прозрачность (alpha) — плавное исчезновение или мерцание.
  • Цвет (tint) — изменение оттенка частиц.
  • Скорость (speed) и ускорение (acceleration) — движение в выбранном направлении.
  • Вращение (angle, rotate) — добавление реалистичности при вращении частиц.

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

Применение на практике

  • Взрывы и вспышки — точечный источник с высокой скоростью и коротким временем жизни.
  • Дым и туман — зональный источник с медленным движением и изменением прозрачности.
  • Следы и лазеры — путь с вращением частиц и постепенным исчезновением.
  • Магические заклинания — комбинированные источники, изменяющие цвет, скорость и масштаб частиц по кривой траектории.

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

Оглавление