PixiJS Particle Editor

This project is a complete copy from @pixi/particle-emitter, but using pixi.js v8 ParticleContainer and Particle as base instead of Container. EmitterConfig are still the same structure.

I'm also re-created the particle editor for some formate that old editor not support.

Breaking changes from @pixi/particle-emitter v5

• Pixi.js Version - It only support Pixi v8, specifically [email protected] and above.
• Make sure you are using ParticleContainer.
• Due to Pixi v8 ParticleContainer limitations, all passed texture should be same TextureSource if there is more then one textures need to use, please ensure load them via spritesheet or atlas.

Sample Usage

Please see the examples for various pre-made particle configurations.

import { Emitter } from '@spd789562/particle-emitter';
import { ParticleContainer, Texture } from 'pixi.js';

// Create a ParticleContainer with appropriate dynamic properties
const particleContainer = new ParticleContainer({
  dynamicProperties: {
    uvs: true,      // Enable if using multiple textures from same source
    vertex: true,   // Enable for non-trimmed spritesheets(like all texture are not same sized)
    position: true,
    rotation: true,
    scale: true,
    color: true,
  },
});

const emitter = new PIXI.particles.Emitter(
    // The PIXI.ParticleContainer to put the emitter in
    // if using blend modes, it's important to put this
    // on top of a bitmap, and not use the root stage Container
    particleContainer,
    // Emitter configuration, edit this to change the look
    // of the emitter
    {
        lifetime: {
            min: 0.5,
            max: 0.5
        },
        frequency: 0.008,
        spawnChance: 1,
        particlesPerWave: 1,
        emitterLifetime: 0.31,
        maxParticles: 1000,
        pos: {
            x: 0,
            y: 0
        },
        addAtBack: false,
        behaviors: [
            {
                type: 'alpha',
                config: {
                    alpha: {
                        list: [
                            {
                                value: 0.8,
                                time: 0
                            },
                            {
                                value: 0.1,
                                time: 1
                            }
                        ],
                    },
                }
            },
            {
                type: 'scale',
                config: {
                    scale: {
                        list: [
                            {
                                value: 1,
                                time: 0
                            },
                            {
                                value: 0.3,
                                time: 1
                            }
                        ],
                    },
                }
            },
            {
                type: 'color',
                config: {
                    color: {
                        list: [
                            {
                                value: "fb1010",
                                time: 0
                            },
                            {
                                value: "f5b830",
                                time: 1
                            }
                        ],
                    },
                }
            },
            {
                type: 'moveSpeed',
                config: {
                    speed: {
                        list: [
                            {
                                value: 200,
                                time: 0
                            },
                            {
                                value: 100,
                                time: 1
                            }
                        ],
                        isStepped: false
                    },
                }
            },
            {
                type: 'rotationStatic',
                config: {
                    min: 0,
                    max: 360
                }
            },
            {
                type: 'spawnShape',
                config: {
                    type: 'torus',
                    data: {
                        x: 0,
                        y: 0,
                        radius: 10
                    }
                }
            },
            {
                type: 'textureSingle',
                config: {
                    texture: Texture.from('image.jpg')
                }
            }
        ],
    }
);

// Calculate the current time
let elapsed = Date.now();

// Update function every frame
const update = function(){

  // Update the next frame
  requestAnimationFrame(update);

  const now = Date.now();

  // The emitter requires the elapsed
  // number of seconds since the last update
  emitter.update((now - elapsed) * 0.001);
  elapsed = now;
};

// Start emitting
emitter.emit = true;

// Start the update
update();

Documentation

https://userland.pixijs.io/particle-emitter/docs/

Installation

PixiJS Particle Emitter can be installed with NPM or other package managers.

npm install @spd789562/particle-emitter

Examples

• Explosion 1
• Explosion 2
• Explosion 3
• Explosion Ring
• Megaman Death
• Rain
• Flame
• Flame on Polygonal Chain
• Flame on Advanced Polygonal Chain
• Flame - Stepped Colors
• Flame with Smoke
• Flame - Sputtering
• Gas
• Bubbles
• Bubble Spray
• Bubble Stream
• Bubble Stream - path following
• Vertical Bubbles
• Cartoon Smoke
• Cartoon Smoke Alt.
• Cartoon Smoke Blast
• Snow
• Sparks
• Fountain
• Animated Coins
• Animated Bubbles
• Spaceship Destruction - Ordered Art
• Particle Container Performance

License

Copyright (c) 2025 spd789562

Released under the MIT License.