О чем этот пример
Система частиц — мощный инструмент для создания визуальных эффектов: взрывов, огня, магии и атмосферных явлений. В Phaser 3 работа с частицами через `Particle Emitter Manager` позволяет централизованно управлять несколькими эмиттерами, создавая комплексные и производительные эффекты одной командой. Эта статья покажет, как подготовить набор эмиттеров и активировать их все одновременно в нужной точке экрана, что идеально подходит для визуализации ударов, взрывов или заклинаний.
Версия 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('explosion', 'assets/particles/explosion.png', 'assets/particles/explosion.json');
}
create ()
{
const particles = this.add.particles('explosion');
// Setting { min: x, max: y } will pick a random value between min and max
// Setting { start: x, end: y } will ease between start and end
particles.createEmitter({
frame: [ 'smoke-puff', 'cloud', 'smoke-puff' ],
angle: { min: 240, max: 300 },
speed: { min: 200, max: 300 },
quantity: 6,
lifespan: 2000,
alpha: { start: 1, end: 0 },
scale: { start: 1.5, end: 0.5 },
on: false
});
particles.createEmitter({
frame: 'red',
angle: { start: 0, end: 360, steps: 32 },
lifespan: 1000,
speed: 400,
quantity: 32,
scale: { start: 0.3, end: 0 },
on: false
});
particles.createEmitter({
frame: 'stone',
angle: { min: 240, max: 300 },
speed: { min: 400, max: 600 },
quantity: { min: 2, max: 10 },
lifespan: 4000,
alpha: { start: 1, end: 0 },
scale: { min: 0.05, max: 0.4 },
rotate: { start: 0, end: 360, ease: 'Back.easeOut' },
gravityY: 800,
on: false
});
particles.createEmitter({
frame: 'muzzleflash2',
lifespan: 200,
scale: { start: 2, end: 0 },
rotate: { start: 0, end: 180 },
on: false
});
this.input.on('pointerdown', pointer =>
{
particles.emitParticleAt(pointer.x, pointer.y);
});
}
}
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
backgroundColor: '#000',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Структура примера: От текстуры к менеджеру
Код начинается с загрузки атласа частиц. Атлас — это один файл изображения (PNG) с JSON-файлом, описывающим координаты каждого кадра (frame) внутри него. Это эффективнее загрузки множества отдельных картинок.
this.load.atlas('explosion', 'assets/particles/explosion.png', 'assets/particles/explosion.json');В методе create() создаётся менеджер частиц (Particle Emitter Manager), которому передаётся ключ загруженного атласа. Этот менеджер будет контейнером для всех наших эмиттеров.
const particles = this.add.particles('explosion');Настройка эмиттеров: Разнообразие через конфигурацию
Сила системы частиц Phaser — в гибкости конфигурации каждого эмиттера. В примере создаётся четыре эмиттера с разными свойствами, имитирующими компоненты взрыва: дым, осколки, вспышку и летящие камни. Обратите внимание на параметр on: false. Он указывает, что эмиттер не должен испускать частицы сразу после создания. Мы возьмём управление на себя позже.
Ключевые параметры конфигурации:
- frame: Определяет, какое изображение из атласа использовать для частиц. Можно задать один кадр строкой или массив для случайного выбора.
- angle и speed: Задают направление и скорость разлёта. Можно использовать фиксированные значения, диапазон (min/max) для случайного выбора или интерполяцию (start/end) для плавного изменения.
- quantity: Количество частиц, испускаемых за один выброс.
- lifespan: Время жизни частицы в миллисекундах.
- scale, alpha, rotate: Позволяют анимировать размер, прозрачность и вращение частицы за время её жизни.
- gravityY: Симулирует гравитацию, заставляя частицы падать вниз.
Пример конфигурации эмиттера дыма:
particles.createEmitter({
frame: [ 'smoke-puff', 'cloud', 'smoke-puff' ],
angle: { min: 240, max: 300 },
speed: { min: 200, max: 300 },
quantity: 6,
lifespan: 2000,
alpha: { start: 1, end: 0 },
scale: { start: 1.5, end: 0.5 },
on: false
});Централизованный запуск: Метод emitParticleAt
Вся магия управления происходит в обработчике события клика (pointerdown). Вместо того чтобы активировать каждый эмиттер по отдельности, мы вызываем один метод у менеджера.
this.input.on('pointerdown', pointer => {
particles.emitParticleAt(pointer.x, pointer.y);
});Метод emitParticleAt(x, y) делает две важные вещи:
1. Устанавливает позицию *всех* эмиттеров, созданных этим менеджером, в переданные координаты (x, y).
2. Запускает одноразовый выброс частиц для каждого из этих эмиттеров.
Этот подход невероятно удобен для создания сложных составных эффектов, таких как взрыв, который состоит из вспышки, дыма и разлёта обломков. Всё это активируется одной строчкой кода в нужном месте.
Конфигурация игры и запуск сцены
Финальная часть кода создаёт экземпляр игры Phaser.Game, передавая ему объект конфигурации. Важные моменты конфига:
- type: Phaser.WEBGL: Используется WebGL-рендерер, который необходим для корректной и производительной работы системы частиц.
- scene: Example: Указывает класс нашей сцены, который содержит весь логический код.
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
backgroundColor: '#000',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);Что попробовать дальше
Использование Particle Emitter Manager с методом emitParticleAt — это паттерн, который значительно упрощает создание и управление визуально насыщенными эффектами в играх на Phaser 3. Вы предварительно настраиваете «палитру» эмиттеров, а затем используете их как готовый спецэффект.
**Идеи для экспериментов:**
1. Привяжите вызов emitParticleAt не к клику, а к столкновению снаряда с врагом или к сбору игроком предмета.
2. Создайте разные менеджеры для разных типов эффектов (например, bloodParticles для крови и magicParticles для заклинаний) и активируйте их в разных игровых ситуациях.
3. Поэкспериментируйте с параметрами gravityX, gravityY, acceleration и bounce, чтобы создать эффекты воды, электричества или листьев на ветру.