Режимы излучения: flow и explode

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


Эмиттер и его конфигурация

Эмиттер в Phaser создается через объект ParticleEmitter. Основные параметры:

  • x, y — координаты появления частиц.
  • texture — текстура, используемая для частиц.
  • frame — опциональный кадр для анимации.
  • maxParticles — максимальное количество одновременно активных частиц.

Пример создания эмиттера:

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 — это режим непрерывной генерации частиц. Частицы создаются с постоянной скоростью в течение заданного времени или до тех пор, пока эмиттер активен. Такой режим идеально подходит для эффектов огня, дождя, облаков и потоков энергии.

Ключевые свойства для 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
});

Особенности поведения:

  1. Частицы создаются непрерывно.
  2. Скорость и направление могут быть случайными в пределах заданных диапазонов.
  3. Эффект можно комбинировать с alpha, scale и tint для динамичного изменения частиц.

Использование анимации:

emitter.setAlpha({ start: 1, end: 0 });
emitter.setScale({ start: 0.5, end: 1.5 });
emitter.setTint([0xff0000, 0xffff00, 0xffffff]);

Такое сочетание позволяет создать плавное растворение и изменение размера частиц.


Режим explode

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

Ключевые свойства для explode:

  • quantity — количество частиц, создаваемых за один взрыв.
  • speed — диапазон скорости движения частиц.
  • angle — направление движения (может быть диапазоном).
  • gravityY — гравитация, влияющая на частицы после генерации.

Пример разового выброса:

emitter.explode(50, 400, 300);

Здесь создается 50 частиц в координатах (400, 300) с текущими настройками скорости и направления.

Особенности поведения:

  1. Все частицы появляются сразу.
  2. Направление движения можно задавать либо фиксированное, либо случайное (angle: { min: 0, max: 360 }).
  3. Подходит для эффектов взрывов, разлета фрагментов, магических вспышек.

Настройка движения и визуальных эффектов:

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
Время генерации Непрерывно Однократно
Количество частиц Регулируется циклически Все сразу
Эффект Поток / движение Взрыв / разлет
Использование Дождь, огонь, энергия Взрывы, магические эффекты
Настройка направления Случайное или фиксированное Случайное или фиксированное

Комбинирование режимов

Для сложных эффектов часто используют комбинацию обоих режимов. Например, 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);
});

В этом примере поток огня создается непрерывно, а при клике генерируется взрыв частиц в месте взаимодействия.


Оптимизация работы эмиттеров

  1. Ограничение maxParticles предотвращает падение производительности.
  2. Использование текстур с одинаковыми размерами снижает нагрузку на рендеринг.
  3. Сокращение времени жизни (lifespan) и количества частиц помогает сохранить плавность на слабых устройствах.
  4. Комбинация flow и explode должна учитывать приоритет визуального эффекта и производительность.

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