Getting started with PixiJS Particle Emitter

My personal preferred way to learn is to play around with stuff. So to get started here, I’ll show you a minimal example of how to get a particle emitter up and running. I’ll use plain JS and non bundled code to make it simple. Everything is easy to translate over for TS and bundling.

I’m going to assume you have VSCode and Live Server installed – that will make things a heap easier. If you don’t, I’ll assume you know how to get it running in a browser.

At the time of writing PixiJS Particle Emitter was not on any CDN, though it is available though both GitHub and NPM. For ease of use, I’m providing a built version of PixiJS Particle Emitter here. Copy that into a new folder and then add a new HTML page with these steps:

Add a basic HTML page with a canvas element.
Add PixiJS and PixiJS Particle Emitter libraries.
Add a PixiJS renderer, stage, particle container, and ticker, all attached to the canvas.
Create the config for a minimal particle emitter.

Note that a normal container will work fine, but a particle container can handle more particles, so is a good default choice for particles.

That’s all done with the HTML below. You can copy that out and save it as a html page.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Hello World</title>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.0.4/pixi.min.js"
      integrity="sha512-UQMlkbatDPsiH7tXKzfeZaPbR/TB1ThUOD6cjqmWPyKhdBl5jHiCVpSrfl+8n3KfEDhnhPhA+/8joiYpTHeC6w=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="particle-emitter.js"></script>
  </head>

  <body>
    <canvas id="canvas"></canvas>
  </body>

  <script>
    const { Container, ParticleContainer, Renderer, Ticker } = PIXI;
    const canvas = document.getElementById('canvas');
    const renderer = new Renderer({
      view: canvas,
      width: 600,
      height: 400,
    });
    const stage = new Container();
    const cnt = new ParticleContainer();
    stage.addChild(cnt);
    const ticker = new Ticker();
    let elapsed = 0;
    ticker.add(() => renderer.render(stage));
    ticker.start();

    const emitter = new PIXI.particles.Emitter(cnt, {
      lifetime: { min: 0.1, max: 3 },
      frequency: 1,
      spawnChance: 1,
      particlesPerWave: 1,
      emitterLifetime: 120,
      maxParticles: 10,
      pos: { x: 327, y: 200 },
      autoUpdate: true,
      behaviors: [
        {
          type: 'spawnShape',
          config: { type: 'torus', data: { x: 0, y: 0, radius: 100 } },
        },
        { type: 'textureSingle', config: { texture: PIXI.Texture.WHITE } },
      ],
    });
  </script>
</html>

Then right click the HTML file in VSCode and select “Open with Live Server” – or just drag it into a browser (but remember particle-emitter.js needs to be in the same directory as the HTML file).

You should see something like this – hey, I said it would be minimal!

Now go play!

PixiJS Particle Emitter: The Unauthorized Manual