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.
- On
Emitter
,playOnce()
no longer setsautoUpdate
to true. Set it manually before use.playOnceAndDestroy()
is unaffected. - On
Emitter
,start*
andend*
properties for alpha, color, scale, and speed have been replaced by a singly linked list ofPropertyNode
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.
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();
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;
http://pixijs.github.io/pixi-particles/docs/
PixiParticles can be installed using Bower or NPM.
bower install pixi-particles
npm install pixi-particles
- Explosion 1
- Explosion 2
- Explosion 3
- Explosion Ring
- Megaman Death
- Rain
- Flame
- 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
- Particle Container Performance
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);
Externs for Haxe have been added to adireddy's Pixi externs
Copyright (c) 2015 CloudKid
Released under the MIT License.