Библиотека Phaser предоставляет гибкую систему
частиц, которая позволяет создавать визуально динамичные эффекты для игр
и интерактивных приложений. Два ключевых режима работы эмиттеров частиц
— flow и explode — определяют принцип
генерации и распределения частиц.
Эмиттер в Phaser создается через объект ParticleEmitter.
Основные параметры:
Пример создания эмиттера:
const particles = this.add.particles('star');
const emitter = particles.createEmitter({
x: 400,
y: 300,
speed: { min: 100, max: 200 },
lifespan: 2000,
quantity: 10
});
Flow — это режим непрерывной генерации частиц. Частицы создаются с постоянной скоростью в течение заданного времени или до тех пор, пока эмиттер активен. Такой режим идеально подходит для эффектов огня, дождя, облаков и потоков энергии.
Ключевые свойства для flow:
frequency — интервал между генерацией частиц в
миллисекундах.quantity — количество частиц, создаваемых за один
цикл.maxParticles — ограничение на количество одновременно
активных частиц.follow — объект, за которым эмиттер будет следовать
(опционально).Пример эмиттера в режиме flow:
const emitter = particles.createEmitter({
x: 400,
y: 300,
speed: { min: 50, max: 150 },
lifespan: 3000,
quantity: 5,
frequency: 200
});
Особенности поведения:
alpha, scale
и tint для динамичного изменения частиц.Использование анимации:
emitter.setAlpha({ start: 1, end: 0 });
emitter.setScale({ start: 0.5, end: 1.5 });
emitter.setTint([0xff0000, 0xffff00, 0xffffff]);
Такое сочетание позволяет создать плавное растворение и изменение размера частиц.
Explode — это разовый выброс частиц, который создаёт эффект мгновенного взрыва или разлета объектов. Все частицы создаются одновременно, после чего эмиттер останавливается до следующего запуска.
Ключевые свойства для explode:
quantity — количество частиц, создаваемых за один
взрыв.speed — диапазон скорости движения частиц.angle — направление движения (может быть
диапазоном).gravityY — гравитация, влияющая на частицы после
генерации.Пример разового выброса:
emitter.explode(50, 400, 300);
Здесь создается 50 частиц в координатах (400, 300) с текущими настройками скорости и направления.
Особенности поведения:
angle: { min: 0, max: 360 }).Настройка движения и визуальных эффектов:
emitter.setSpeed({ min: 100, max: 300 });
emitter.setGravityY(200);
emitter.setAlpha({ start: 1, end: 0 });
emitter.setScale({ start: 1, end: 0 });
Такой подход создаёт эффект взрыва с падением частиц под действием гравитации и постепенным исчезновением.
| Характеристика | Flow | Explode |
|---|---|---|
| Время генерации | Непрерывно | Однократно |
| Количество частиц | Регулируется циклически | Все сразу |
| Эффект | Поток / движение | Взрыв / разлет |
| Использование | Дождь, огонь, энергия | Взрывы, магические эффекты |
| Настройка направления | Случайное или фиксированное | Случайное или фиксированное |
Для сложных эффектов часто используют комбинацию обоих режимов.
Например, flow для постоянного потока огня и
explode для разовых вспышек при столкновениях. Это
позволяет создавать более динамичные сцены без необходимости ручного
управления каждой частицей.
Пример сочетания:
const fireEmitter = particles.createEmitter({
x: 400,
y: 500,
speed: { min: 50, max: 100 },
lifespan: 2000,
quantity: 2,
frequency: 100
});
this.input.on('pointerdown', (pointer) => {
particles.createEmitter({
x: pointer.x,
y: pointer.y,
speed: { min: 100, max: 300 },
lifespan: 1000,
quantity: 20
}).explode(20, pointer.x, pointer.y);
});
В этом примере поток огня создается непрерывно, а при клике генерируется взрыв частиц в месте взаимодействия.
maxParticles предотвращает падение
производительности.lifespan) и количества частиц
помогает сохранить плавность на слабых устройствах.flow и explode должна учитывать
приоритет визуального эффекта и производительность.Эти подходы позволяют создавать визуально насыщенные эффекты, управляемые как простыми настройками, так и сложными скриптами взаимодействия с игровыми объектами.