TypeScript JavaScript
Clone or download
andrewstart Merge pull request #85 from st3v0/master
Negative deltas will no longer effect the spawn duration
Latest commit a996999 Jun 25, 2018

README.md

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.