Обработчики-модификаторы частиц

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

Эмиттер создаётся через:

const particles = this.add.particles('particleTexture');
const emitter = particles.createEmitter({
    x: 400,
    y: 300,
    speed: { min: 100, max: 200 },
    angle: { min: 0, max: 360 },
    lifespan: 2000,
    quantity: 4,
    scale: { start: 1, end: 0 },
    alpha: { start: 1, end: 0 },
});

Ключевые параметры эмиттера:

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

Обработчики-модификаторы

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

Применение модификаторов:

emitter.forEachAlive((particle) => {
    particle.velocityX += 0.5;
    particle.scale += 0.01;
});

В Phaser 3 встроенные модификаторы реализуются через метод setModifiers или через updateCallback эмиттера, что позволяет выполнять сложные вычисления:

emitter.setUpdateCallback((particle, delta) => {
    particle.rotation += 0.05 * delta;
    particle.alpha -= 0.001 * delta;
});

Основные типы модификаторов

  1. Модификация скорости и направления

    • Позволяет изменять вектор движения частицы на протяжении её жизни.
    • Применяется для имитации силы ветра, гравитации или взрывной отдачи.
    emitter.setUpdateCallback((particle) => {
    particle.velocityY += 0.1; // гравитация
});

  2. Изменение масштаба и прозрачности

    • Позволяет создавать плавное исчезновение или увеличение частиц.
    particle.scale += 0.01; 
particle.alpha -= 0.02;

  3. Цветовые модификаторы

    • Позволяют изменять цвет частиц с течением времени.
    • Используются функции линейной интерполяции:
    const startColor = Phaser.Display.Color.ValueToColor(0xff0000);
const endColor = Phaser.Display.Color.ValueToColor(0xffff00);

emitter.setUpdateCallback((particle) => {
    const t = particle.lifeCurrent / particle.lifeTotal;
    const color = Phaser.Display.Color.Interpolate.ColorWithColor(startColor, endColor, 1, t);
    particle.tint = Phaser.Display.Color.GetColor(color.r, color.g, color.b);
});

  4. Поведение столкновений

    • Частицы могут реагировать на объекты сцены через ParticleEmitterManager.physics или кастомные коллизии.
    this.physics.add.collider(particles, platforms, (particle) => {
    particle.velocityY *= -0.5;
});

  5. Шейповые модификаторы

    • Эмиттер может использовать заранее заданные кривые или траектории, чтобы направлять частицы.
    • Применяются для создания спиралей, волн или сложных орбитальных движений.
emitter.setUpdateCallback((particle, delta) => {
    const angle = 0.05 * particle.lifeCurrent;
    particle.x += Math.cos(angle) * 2;
    particle.y += Math.sin(angle) * 2;
});

Цепочки модификаторов

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

emitter.setUpdateCallback((particle, delta) => {
    // Гравитация
    particle.velocityY += 0.05;
    // Спиралевидная траектория
    const angle = 0.03 * particle.lifeCurrent;
    particle.x += Math.cos(angle);
    particle.y += Math.sin(angle);
    // Изменение цвета
    const t = particle.lifeCurrent / particle.lifeTotal;
    particle.tint = Phaser.Display.Color.Interpolate.ColorWithColor(
        Phaser.Display.Color.ValueToColor(0x00ff00),
        Phaser.Display.Color.ValueToColor(0xff00ff),
        1, t
    );
});

Настройка производительности

  • Количество частиц напрямую влияет на производительность. Использовать maxParticles в ParticleEmitterManager.
  • Реализация кастомных модификаторов через updateCallback может быть оптимизирована через векторные операции, избегая избыточных вызовов Phaser.Display.Color.
  • Использование текстур с альфа-каналом вместо создания сложной графики на лету снижает нагрузку GPU.

Примеры применения

  • Эффекты магии: плавные цветные частицы с вращением и исчезновением.
  • Взрывы: быстрые частицы с ускорением и изменением цвета от яркого к тусклому.
  • Дым и пар: модификаторы, изменяющие прозрачность и скорость для имитации движения воздуха.
  • Траектории объектов: создание визуальных следов за движущимися объектами через модификацию позиции частиц.

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

Оглавление