All Projects → pixijs → particle-emitter

pixijs / particle-emitter

Licence: MIT license
A particle system for PixiJS

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to particle-emitter

Pixi Particles
A particle system for PixiJS
Stars: ✭ 555 (-21.72%)
Mutual labels:  javascript-library, particles, pixijs
party-js
A JavaScript library to brighten up your user's site experience with visual effects!
Stars: ✭ 858 (+21.02%)
Mutual labels:  javascript-library, particles
Particleeffectsbuttons
A little library that can be used for bursting particles effects on buttons and other elements
Stars: ✭ 1,122 (+58.25%)
Mutual labels:  javascript-library, particles
Pixi Sound
WebAudio API playback library, with filters. Modern audio playback for modern browsers.
Stars: ✭ 201 (-71.65%)
Mutual labels:  javascript-library, pixijs
nexus-bridge
Nexus Bridge is a JS library that works with Siebel Presentation Model and allows building Siebel UI using the modern JS frameworks.
Stars: ✭ 21 (-97.04%)
Mutual labels:  javascript-library
Webpack Library Example
An example of how to author libraries using webpack.
Stars: ✭ 251 (-64.6%)
Mutual labels:  javascript-library
Jfa Pwa Toolkit
⚡️ PWA Features to Any Website (very Fast & Easy)
Stars: ✭ 245 (-65.44%)
Mutual labels:  javascript-library
Renamer
Rename files in bulk.
Stars: ✭ 240 (-66.15%)
Mutual labels:  javascript-library
toaststrap
A simple, lightweight JavaScript library for showing Bootstrap 5 toast popups.
Stars: ✭ 16 (-97.74%)
Mutual labels:  javascript-library
renovation-core
The Frappe Javascript Front End Missing SDK
Stars: ✭ 23 (-96.76%)
Mutual labels:  javascript-library
previewer
A super light-weight JavaScript image previewer [not actively maintained]
Stars: ✭ 24 (-96.61%)
Mutual labels:  javascript-library
Inferno
🔥 An extremely fast, React-like JavaScript library for building modern user interfaces
Stars: ✭ 15,206 (+2044.71%)
Mutual labels:  javascript-library
Modern.JS
모던 자바스크립트 라이브러리/프레임워크 × KIPFA(한국인터넷전문가협회)
Stars: ✭ 16 (-97.74%)
Mutual labels:  javascript-library
Easter Egg Collection
🐰 A funny library for tricking your colleagues.
Stars: ✭ 249 (-64.88%)
Mutual labels:  javascript-library
ChangeNumbersJs
Tiny Library for change number from a language in other language.
Stars: ✭ 14 (-98.03%)
Mutual labels:  javascript-library
Ac Colors
ac-colors is a reactive JavaScript color library that can freely convert between RGB, HSL, HEX, XYZ, LAB, LCHab, LUV, and LCHuv, as well as handle random color generation and contrast ratio calculation.
Stars: ✭ 243 (-65.73%)
Mutual labels:  javascript-library
FixLanguageTypeJs
Tiny Library for fix problem of language selection in type text.
Stars: ✭ 15 (-97.88%)
Mutual labels:  javascript-library
huge-uploader-nodejs
Node.js module to handle chunked file uploads sent by huge-uploader
Stars: ✭ 28 (-96.05%)
Mutual labels:  javascript-library
vanillaview
Easy to use views with vanilla JS semantics
Stars: ✭ 12 (-98.31%)
Mutual labels:  javascript-library
CopyPasteJS
This a small JS library to execute clipboard functions in a fast and easy way.
Stars: ✭ 20 (-97.18%)
Mutual labels:  javascript-library

PixiJS Particle Emitter

Build 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. Note that the editor was built for an older version of the library - to use its output you'll have to use the upgradeConfig() function.

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,
                        radius: 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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].