PixiJS Particle Emitter

A particle system library for the PixiJS library. Also, we created an interactive particle editor to design and preview custom particle emitters which utilitze PixiJS Particle Emitter. Note that the editor was built for an older version of the library - to use its output you'll have to use the upgradeConfig() function.

Breaking changes in v6 from v5

• pixi.js updated to v8
• all imports now from 'pixi.js', it is backward compatible but is better to use v5 for pixi.js < v8
• update method of Emitter now have param of type: number | Ticker
• removed LinkedListContainer (for now, development in progress)
• particle performance example is not working as expected now, because LinkedListContainer is not available
• dependencies updated to newer versions (e.g. typescript version now is ^5.0.4)
• examples updated to pixi.js v8

Breaking changes in v5 from v4

• Project has been renamed from pixi-particles to @pixi/particle-emitter
• On Emitter, configuration format has drastically changed. Use upgradeConfig() to convert old configuration objects automatically.
• PathParticle and AnimatedParticle no longer exist, use the new behaviors instead.
• Dropped support for PixiJS v4. Please use v6 - while v5 may work, Typescript definitions won't work and will cause you a headache.
• The library now outputs ES6 code - if you need it in ES5 code, you'll need to make sure your build process transpiles it.

Sample Usage

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

// Create a new emitter
// note: if importing library like "import * as particles from '@pixi/particle-emitter'"
// or "const particles = require('@pixi/particle-emitter')", the PIXI namespace will
// not be modified, and may not exist - use "new particles.Emitter()", or whatever
// your imported namespace is
var emitter = new PIXI.particles.Emitter(

    // The PIXI.Container 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
    container,
    // 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: PIXI.Texture.from('image.jpg')
                }
            }
        ],
    }
);

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

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

	// Update the next frame
	requestAnimationFrame(update);

	var 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

http://pixijs.github.io/particle-emitter/docs/

Installation

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

npm install @pixi/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

Contributer Note

This project uses yarn rather than npm to take advantage of the workspaces feature for the tests, making it easier to have standalone tests that share dependencies where possible.

License

Copyright (c) 2015 CloudKid

Released under the MIT License.