Интеграция с pixi-particles

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

Установка и подключение

Для работы с pixi-particles требуется наличие PixiJS версии 5 и выше. Библиотека может быть подключена через npm:

npm install pixi.js pixi-particles

Импорт в проект на ES6:

import * as PIXI from 'pixi.js';
import { Emitter } from 'pixi-particles';

Создание контейнера частиц

Основной объект для управления частицами — Emitter. Он принимает контейнер, в котором будут рендериться частицы, текстуры и настройки конфигурации:

const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

const particleContainer = new PIXI.Container();
app.stage.addChild(particleContainer);

const emitterConfig = {
    alpha: {
        start: 1,
        end: 0
    },
    scale: {
        start: 0.5,
        end: 1
    },
    color: {
        start: "ffffff",
        end: "ff0000"
    },
    speed: {
        start: 200,
        end: 50
    },
    startRotation: {
        min: 0,
        max: 360
    },
    rotationSpeed: {
        min: 0,
        max: 200
    },
    lifetime: {
        min: 0.5,
        max: 2
    },
    frequency: 0.008,
    emitterLifetime: -1,
    maxParticles: 1000,
    pos: {
        x: 400,
        y: 300
    },
    addAtBack: false,
    spawnType: "point"
};

const textures = [PIXI.Texture.from('particle.png')];
const emitter = new Emitter(particleContainer, textures, emitterConfig);

Обновление эмиттера

pixi-particles не обновляет частицы автоматически. Для этого необходимо вызывать метод update(delta) внутри игрового цикла:

let elapsed = Date.now();

app.ticker.add(() => {
    const now = Date.now();
    const delta = (now - elapsed) * 0.001;
    emitter.update(delta);
    elapsed = now;
});

delta — это время в секундах, прошедшее с последнего кадра, что обеспечивает корректное движение частиц при любых FPS.

Настройка свойств частиц

Конфигурационный объект предоставляет детальный контроль над поведением частиц:

  • alpha — прозрачность от начала до конца жизни частицы.
  • scale — масштаб частицы.
  • color — цветовой переход (hex-значения).
  • speed — скорость движения частиц.
  • startRotation и rotationSpeed — начальный угол и скорость вращения.
  • lifetime — время жизни частицы.
  • frequency — интервал появления новых частиц.
  • emitterLifetime — время работы эмиттера (-1 для бесконечного).
  • maxParticles — максимальное количество одновременно активных частиц.
  • pos — начальная позиция эмиттера.
  • spawnType — тип генерации (“point”, “circle”, “rect” и др.).

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

Различные типы генерации частиц

pixi-particles поддерживает несколько способов появления частиц:

  1. Point — частицы появляются в одной точке.
  2. Circle — генерация в пределах окружности, с указанием радиуса.
  3. Rect — распределение по прямоугольной области.
  4. Burst — единоразовый выброс всех частиц.

Пример создания круга:

emitter.spawnType = "circle";
emitter.spawnCircle = { x: 0, y: 0, r: 50 };

Управление временем жизни и остановкой эмиттера

Эмиттер можно останавливать и запускать повторно:

emitter.emit = true; // запуск
emitter.emit = false; // остановка генерации новых частиц

// полное уничтожение после завершения жизни всех частиц
emitter.cleanup();

Оптимизация производительности

Для сложных сцен с тысячами частиц:

  • Использовать ParticleContainer вместо обычного Container.
  • Минимизировать количество текстур. Желательно использовать одну спрайтовую текстуру с разными цветами через tint.
  • Контролировать maxParticles и frequency, чтобы избежать перегрузки GPU.
  • Обновлять эмиттер через delta в тикере PixiJS, избегая ручного расчета времени.

Анимация и синхронизация с событиями

Эффекты можно синхронизировать с действиями пользователя или событиями игры. Пример — всплеск частиц при клике:

app.view.addEventListener('pointerdown', (event) => {
    emitter.pos.x = event.clientX;
    emitter.pos.y = event.clientY;
    emitter.emit = true;

    setTimeout(() => {
        emitter.emit = false;
    }, 500);
});

Таким образом создаются динамичные эффекты, которые реагируют на интерактивные события.

Расширенные возможности

  • Custom ease functions — позволяют контролировать скорость, масштаб и альфу частиц через кривые.
  • Color gradients — плавное изменение цвета в течение жизни частицы.
  • Attach to moving objects — эмиттеры могут следовать за спрайтами или контейнерами.
  • Multiple emitters — одновременная работа нескольких эмиттеров с разными текстурами и настройками.

Интеграция с другими эффектами PixiJS

Эмиттеры можно комбинировать с фильтрами (blur, glow, displacement) для создания сложных визуальных эффектов. Например, частицы можно обрабатывать через фильтр размытия для имитации дыма или магического свечения.

Эта интеграция позволяет создавать полноценные визуальные сцены с высокой производительностью, гибкостью и минимальными затратами ресурсов.

Оглавление