Quick start

Add reparticle to your PixiJS app. Create an effect and add it to the stage.

Install

npm install @reparticle/pixi

This guide assumes you already have a PixiJS application using v8.22.0 or later within v8. The core engine is included as a dependency of @reparticle/pixi.

Your PixiJS app must use WebGL2.

npm install --save-dev @typescript/lib-dom@npm:@types/web

Add particles to a PixiJS scene

import { ParticleEffect } from '@reparticle/pixi';

// Use your existing, initialized Pixi application.
const effect = new ParticleEffect({
  version: 1,
  emitters: [{
    id: 'sparks',
    capacity: 2048,
    seed: 42,
    emission: { rate: 120, shape: { type: 'point' } },
    initial: {
      lifetime: 2,
      speed: 90,
      direction: -Math.PI / 2,
      spread: Math.PI / 2,
      size: 12,
    },
  }],
}, { ticker: app.ticker });
effect.position.set(app.screen.width / 2, app.screen.height / 2);
app.stage.addChild(effect);

The effect starts automatically using your app’s ticker. Without artwork, it draws soft procedural particles.

Use your own texture

import { Assets } from 'pixi.js';

const sparkTexture = await Assets.load('/textures/spark.png');
effect.setEmitterTexture('sparks', { textures: [sparkTexture] });

This updates the effect created above. The sparks argument matches the emitter ID in the definition. See Textures & animation for atlas frames and flipbooks.

Control playback

effect.pause();            // Pause.
effect.resume();           // Continue.
effect.reset();            // Restart from the beginning.
effect.stop();             // Stop emitting; let existing particles finish.
effect.retire();           // Finish the current loop, then stop emitting.
effect.destroy();          // Remove and release the effect.

Destroy the effect when removing the scene. Textures supplied by your application remain yours to manage.