node package manager

pixi-particles

Pixi Particles

Build Status Dependency Status GitHub version

A particle system library for the PixiJS library. Also, we created an interactive particle editor to design and preview custom particle emitters which utilitze PixiParticles.

Sample Usage

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

// Create a new emitter 
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,
  
    // The collection of particle images to use 
    [PIXI.Texture.fromImage('image.jpg')],
  
    // Emitter configuration, edit this to change the look 
    // of the emitter 
    {
        alpha: {
            start: 0.8,
            end: 0.1
        },
        scale: {
            start: 1,
            end: 0.3
        },
        color: {
            start: "fb1010",
            end: "f5b830"
        },
        speed: {
            start: 200,
            end: 100
        },
        startRotation: {
            min: 0,
            max: 360
        },
        rotationSpeed: {
            min: 0,
            max: 0
        },
        lifetime: {
            min: 0.5,
            max: 0.5
        },
        frequency: 0.008,
        emitterLifetime: 0.31,
        maxParticles: 1000,
        pos: {
            x: 0,
            y: 0
        },
        addAtBack: false,
        spawnType: "circle",
        spawnCircle: {
            x: 0,
            y: 0,
            r: 10
        }
    }
);
 
// 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;
    
    // Should re-render the PIXI Stage 
    // renderer.render(stage); 
};
 
// Start emitting 
emitter.emit = true;
 
// Start the update 
update();

Note on Emitter Cleanup

When using PixiJS 3+, the SpriteRenderer in WebGL may keep a reference to your particles after you have destroyed your emitter. To ensure that they are garbage collected, in WebGL only, reset the SpriteRenderer's sprite batching with yourRenderer.plugins.sprite.sprites.length = 0;

Documentation

http://pixijs.github.io/pixi-particles/docs/

Installation

PixiParticles can be installed using Bower or NPM.

bower install pixi-particles
npm install pixi-particles

Examples

Typescript

You can use require to get the namespace for pixi-particles, or use a triple slash reference for using the PIXI.particles namespace.

// Note: Must also include the pixi.js typings globally!
import particles = require('pixi-particles');
 
let myEmitter:particles.Emitter = new particles.Emitter(myContainer);
// Note: Must also include the pixi.js typings globally!
/// <reference path="node_modules/pixi-particles/ambient.d.ts" />
require('pixi-particles');
 
let myEmitter:PIXI.particles.Emitter = new PIXI.particles.Emitter(myContainer);

Use in Haxe

Externs for Haxe have been added to adireddy's Pixi externs

License

Copyright (c) 2015 CloudKid

Released under the MIT License.