Giter VIP home page Giter VIP logo

pixi-particles's Introduction

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.

pixi-particles's People

Contributors

andrewstart avatar bigtimebuddy avatar themoonrat avatar almirkadric avatar copy avatar kribblo avatar nick-riggs avatar oza94 avatar timmensch avatar zevlg avatar peteward44 avatar

Watchers

Stephen Thompson avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.