168 lines
5.2 KiB
Markdown
168 lines
5.2 KiB
Markdown
# Pixi Particles
|
|
|
|
[](https://travis-ci.org/pixijs/pixi-particles) [](https://david-dm.org/pixijs/pixi-particles) [](https://github.com/pixijs/pixi-particles/releases/latest)
|
|
|
|
A particle system library for the [PixiJS](https://github.com/pixijs/pixi.js) library. Also, we created an [interactive particle editor](http://pixijs.github.io/pixi-particles-editor/) to design and preview custom particle emitters which utilitze PixiParticles.
|
|
|
|
## Sample Usage
|
|
|
|
Please see the examples for various pre-made particle configurations.
|
|
|
|
```js
|
|
// 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.
|
|
|
|
```bash
|
|
bower install pixi-particles
|
|
```
|
|
|
|
```bash
|
|
npm install pixi-particles
|
|
```
|
|
|
|
## Examples
|
|
|
|
* [Explosion 1](https://pixijs.github.io/pixi-particles/examples/explosion.html)
|
|
* [Explosion 2](https://pixijs.github.io/pixi-particles/examples/explosion2.html)
|
|
* [Explosion 3](https://pixijs.github.io/pixi-particles/examples/explosion3.html)
|
|
* [Explosion Ring](https://pixijs.github.io/pixi-particles/examples/explosionRing.html)
|
|
* [Megaman Death](https://pixijs.github.io/pixi-particles/examples/megamanDeath.html)
|
|
* [Rain](https://pixijs.github.io/pixi-particles/examples/rain.html)
|
|
* [Flame](https://pixijs.github.io/pixi-particles/examples/flame.html)
|
|
* [Gas](https://pixijs.github.io/pixi-particles/examples/gas.html)
|
|
* [Bubbles](https://pixijs.github.io/pixi-particles/examples/bubbles.html)
|
|
* [Bubble Spray](https://pixijs.github.io/pixi-particles/examples/bubbleSpray.html)
|
|
* [Bubble Stream](https://pixijs.github.io/pixi-particles/examples/bubbleStream.html)
|
|
* [Bubble Stream - path following](https://pixijs.github.io/pixi-particles/examples/bubbleStreamPath.html)
|
|
* [Vertical Bubbles](https://pixijs.github.io/pixi-particles/examples/bubblesVertical.html)
|
|
* [Cartoon Smoke](https://pixijs.github.io/pixi-particles/examples/cartoonSmoke.html)
|
|
* [Cartoon Smoke Alt.](https://pixijs.github.io/pixi-particles/examples/cartoonSmoke2.html)
|
|
* [Cartoon Smoke Blast](https://pixijs.github.io/pixi-particles/examples/cartoonSmokeBlast.html)
|
|
* [Snow](https://pixijs.github.io/pixi-particles/examples/snow.html)
|
|
* [Sparks](https://pixijs.github.io/pixi-particles/examples/sparks.html)
|
|
* [Fountain](https://pixijs.github.io/pixi-particles/examples/fountain.html)
|
|
* [Animated Coins](https://pixijs.github.io/pixi-particles/examples/coins.html)
|
|
* [Animated Bubbles](https://pixijs.github.io/pixi-particles/examples/animatedBubbles.html)
|
|
* [Particle Container Performance](https://pixijs.github.io/pixi-particles/examples/particleContainerPerformance.html)
|
|
|
|
## Typescript
|
|
You can use require to get the namespace for pixi-particles, or use a triple slash reference for using the PIXI.particles namespace.
|
|
```typescript
|
|
// Note: Must also include the pixi.js typings globally!
|
|
import particles = require('pixi-particles');
|
|
|
|
let myEmitter:particles.Emitter = new particles.Emitter(myContainer);
|
|
```
|
|
|
|
```typescript
|
|
// 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](https://github.com/adireddy/haxe-pixi)
|
|
|
|
## License
|
|
|
|
Copyright (c) 2015 [CloudKid](http://github.com/cloudkidstudio)
|
|
|
|
Released under the MIT License.
|