О чем этот пример
Правильное размещение источника частиц — ключ к созданию сложных визуальных эффектов, таких как следы от заклинаний, энергетические щиты или контуры объектов. Встроенные в Phaser зоны эмиссии `RandomZone` и `EdgeZone` позволяют легко привязать частицы к геометрической кривой, открывая новые возможности для визуализации. Эта статья разберет практический пример, показывающий три разных способа испускания частиц из точек кривой, и объяснит, когда использовать каждый из них для достижения нужного визуального результата.
Версия 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 curve = new Phaser.Curves.Spline([ 50, 300, 164, 246, 274, 342, 412, 257, 522, 341, 664, 264 ]);
const particles = this.add.particles('flares');
// Here is a RandomZone by way of comparison
particles.createEmitter({
y: -200,
frame: { frames: [ 'red', 'green', 'blue' ], cycle: true },
scale: { start: 0.5, end: 0 },
blendMode: 'ADD',
emitZone: { type: 'random', source: curve, quantity: 48 }
});
// An EdgeZone without using yoyo
particles.createEmitter({
frame: { frames: [ 'red', 'green', 'blue' ], cycle: true },
scale: { start: 0.5, end: 0 },
blendMode: 'ADD',
emitZone: { type: 'edge', source: curve, quantity: 48, yoyo: false }
});
// An EdgeZone with yoyo
particles.createEmitter({
y: 200,
frame: { frames: [ 'red', 'green', 'blue' ], cycle: true },
scale: { start: 0.5, end: 0 },
blendMode: 'ADD',
emitZone: { type: 'edge', source: curve, quantity: 48, yoyo: true }
});
}
}
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
backgroundColor: '#000',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Создание кривой-источника
В основе всех трех эффектов лежит одна кривая, которая будет служить источником для эмиттеров. Мы создаем плавную кривую Spline, передавая конструктору массив координат точек [x, y]. Эта кривая рисуется через заданные точки и становится нашим виртуальным «путем» для частиц.
const curve = new Phaser.Curves.Spline([ 50, 300, 164, 246, 274, 342, 412, 257, 522, 341, 664, 264 ]);Также создается общий менеджер частиц ParticleEmitterManager, который будет управлять всеми эмиттерами и их текстурным атласом.
const particles = this.add.particles('flares');Случайная зона (RandomZone)
Первый эмиттер использует RandomZone. Частицы появляются в случайных точках по всей длине кривой. Это самая простая и хаотичная форма распределения. Эмиттер расположен выше по оси Y (y: -200), чтобы визуально отделить его эффект от других.
Ключевой параметр emitZone:
- type: 'random' указывает тип зоны.
- source: curve задает кривую как источник.
- quantity: 48 определяет количество точек на кривой, из которых случайным образом будут выбираться места появления. Чем больше значение, тем равномернее может быть распределение.
particles.createEmitter({
y: -200,
frame: { frames: [ 'red', 'green', 'blue' ], cycle: true },
scale: { start: 0.5, end: 0 },
blendMode: 'ADD',
emitZone: { type: 'random', source: curve, quantity: 48 }
});Используйте RandomZone для эффектов дыма, тумана или звездного скопления вокруг невидимого контура.
Зона по краю без отскока (EdgeZone, yoyo: false)
Второй эмиттер демонстрирует EdgeZone в своем базовом режиме. Частицы последовательно появляются вдоль кривой, от начала до конца, а затем цикл начинается заново с первой точки. Это создает эффект непрерывного «пробегания» импульса или энергии по заданной траектории.
Параметр yoyo: false отключен по умолчанию, но указан явно для наглядности. Это означает, что после достижения конца кривой, следующая частица появится снова в ее начале.
particles.createEmitter({
frame: { frames: [ 'red', 'green', 'blue' ], cycle: true },
scale: { start: 0.5, end: 0 },
blendMode: 'ADD',
emitZone: { type: 'edge', source: curve, quantity: 48, yoyo: false }
});Такой режим идеален для анимации циркулирующей энергии по проводам, замкнутому контуру щита или бегущему огню.
Зона по краю с отскоком (EdgeZone, yoyo: true)
Третий эмиттер, смещенный вниз (y: 200), показывает поведение EdgeZone с включенным режимом yoyo. В этом случае частицы движутся от начала кривой к концу, а затем в обратном порядке — от конца к началу, создавая эффект «маятника» или «дыхания».
particles.createEmitter({
y: 200,
frame: { frames: [ 'red', 'green', 'blue' ], cycle: true },
scale: { start: 0.5, end: 0 },
blendMode: 'ADD',
emitZone: { type: 'edge', source: curve, quantity: 48, yoyo: true }
});Параметр quantity здесь определяет, на сколько сегментов разбивается кривая для расчета позиций. Режим yoyo: true отлично подходит для эффектов сканирования (как в радаре), двустороннего тока или пульсирующего контура объекта.
Настройка внешнего вида частиц
Все три эмиттера используют одинаковые настройки для визуала, что позволяет сосредоточиться на сравнении их поведения.
- **Кадры (frame)**: Частицы циклически меняют цвет с красного на зеленый и синий, что делает движение вдоль кривой более наглядным.
frame: { frames: [ 'red', 'green', 'blue' ], cycle: true }- **Масштаб (scale)**: Частицы появляются с размером 0.5 и плавно исчезают, уменьшаясь до 0.
scale: { start: 0.5, end: 0 }- **Режим наложения (blendMode)**: Режим 'ADD' складывает цвета частиц с фоном, создавая яркие, светящиеся эффекты, которые не затемняются, а усиливаются при наложении.
Эти параметры легко адаптировать под нужды конкретного эффекта.
Что попробовать дальше
Phaser предоставляет мощные и гибкие инструменты для привязки систем частиц к геометрии. Используйте RandomZone для объемных, хаотичных эффектов вокруг контура. Выбирайте EdgeZone для упорядоченного движения вдоль пути, а параметр yoyo позволит легко переключаться между циклическим и возвратным движением.
Для экспериментов попробуйте: заменить Spline на Ellipse или Line; анимировать саму кривую-источник и наблюдать за движением частиц; комбинировать несколько эмиттеров с разными EdgeZone на одной кривой для сложных композитных эффектов.