Network Pipe Manufacturer
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

pixi-particles

3.0.0 • Public • Published

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.

Breaking changes in v3 from v2

  • On Emitter, playOnce() no longer sets autoUpdate to true. Set it manually before use. playOnceAndDestroy() is unaffected.
  • On Emitter, start* and end* properties for alpha, color, scale, and speed have been replaced by a singly linked list of PropertyNode objects.
  • Dropped support for PIXI v3. Please use v4.
  • The library is no longer exported as a node export, only adding itself to the global PIXI namespace.

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: {
            list: [
                {
                    value: 0.8,
                    time: 0
                },
                {
                    value: 0.1,
                    time: 1
                }
            ],
            isStepped: false
        },
        scale: {
            list: [
                {
                    value: 1,
                    time: 0
                },
                {
                    value: 0.3,
                    time: 1
                }
            ],
            isStepped: false
        },
        color: {
            list: [
                {
                    value: "fb1010",
                    time: 0
                },
                {
                    value: "f5b830",
                    time: 1
                }
            ],
            isStepped: false
        },
        speed: {
            list: [
                {
                    value: 200,
                    time: 0
                },
                {
                    value: 100,
                    time: 1
                }
            ],
            isStepped: false
        },
        startRotation: {
            min: 0,
            max: 360
        },
        rotationSpeed: {
            min: 0,
            max: 0
        },
        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,
        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.

install

npm i pixi-particles

Downloadsweekly downloads

1,226

version

3.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar