@pixi/particle-emitter
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.2 • Public • Published

    PixiJS Particle Emitter

    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 PixiJS Particle Emitter.

    Breaking changes in v5 from v4

    • Project has been renamed from pixi-particles to @pixi/particle-emitter
    • On Emitter, configuration format has drastically changed. Use upgradeConfig() to convert old configuration objects automatically.
    • PathParticle and AnimatedParticle no longer exist, use the new behaviors instead.
    • Dropped support for PixiJS v4. Please use v6 - while v5 may work, Typescript definitions won't work and will cause you a headache.
    • The library now outputs ES6 code - if you need it in ES5 code, you'll need to make sure your build process transpiles it.

    Sample Usage

    Please see the examples for various pre-made particle configurations.

    // Create a new emitter
    // note: if importing library like "import * as particles from '@pixi/particle-emitter'"
    // or "const particles = require('@pixi/particle-emitter')", the PIXI namespace will
    // not be modified, and may not exist - use "new particles.Emitter()", or whatever
    // your imported namespace is
    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,
    	// Emitter configuration, edit this to change the look
    	// of the emitter
    	{
    		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,
    		behaviors: [
    			{
    				type: 'alpha',
    				config: {
    					alpha: {
    						list: [
    							{
    								value: 0.8,
    								time: 0
    							},
    							{
    								value: 0.1,
    								time: 1
    							}
    						],
    					},
    				}
    			},
    			{
    				type: 'scale',
    				config: {
    					scale: {
    						list: [
    							{
    								value: 1,
    								time: 0
    							},
    							{
    								value: 0.3,
    								time: 1
    							}
    						],
    					},
    				}
    			},
    			{
    				type: 'color',
    				config: {
    					color: {
    						list: [
    							{
    								value: "fb1010",
    								time: 0
    							},
    							{
    								value: "f5b830",
    								time: 1
    							}
    						],
    					},
    				}
    			},
    			{
    				type: 'moveSpeed',
    				config: {
    					speed: {
    						list: [
    							{
    								value: 200,
    								time: 0
    							},
    							{
    								value: 100,
    								time: 1
    							}
    						],
    						isStepped: false
    					},
    				}
    			},
    			{
    				type: 'rotationStatic',
    				config: {
    					min: 0,
    					max: 360
    				}
    			},
    			{
    				type: 'spawnShape',
    				config: {
    					type: 'torus',
    					data: {
    						x: 0,
    						y: 0,
    						r: 10
    					}
    				}
    			},
    			{
    				type: 'textureSingle',
    				config: {
    					texture: PIXI.Texture.from('image.jpg')
    				}
    			}
    		],
    	}
    );
    
    // 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;
    };
    
    // Start emitting
    emitter.emit = true;
    
    // Start the update
    update();

    Documentation

    http://pixijs.github.io/particle-emitter/docs/

    Installation

    PixiJS Particle Emitter can be installed with NPM or other package managers.

    npm install @pixi/particle-emitter

    Examples

    Contributer Note

    This project uses yarn rather than npm to take advantage of the workspaces feature for the tests, making it easier to have standalone tests that share dependencies where possible.

    License

    Copyright (c) 2015 CloudKid

    Released under the MIT License.

    Install

    npm i @pixi/particle-emitter

    DownloadsWeekly Downloads

    479

    Version

    5.0.2

    License

    MIT

    Unpacked Size

    4.01 MB

    Total Files

    77

    Last publish

    Collaborators

    • andrewstart
    • bigtimebuddy
    • ivan.popelyshev