• Stars
    star
    777
  • Rank 56,656 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 10 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A particle system for PixiJS

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.

More Repositories

1

pixijs

The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
TypeScript
42,668
star
2

pixi-react

Write PIXI apps using React declarative style
JavaScript
2,167
star
3

filters

Collection of community-authored custom display filters for PixiJS
TypeScript
886
star
4

spine

Pixi.js plugin that enables Spine support.
TypeScript
538
star
5

examples

Rendering examples using PixiJS and related plugins
JavaScript
469
star
6

sound

WebAudio API playback library, with filters. Modern audio playback for modern browsers.
TypeScript
376
star
7

pixi-ui

Provide a definitive user experience in your PixiJS application without any frontend library!
JavaScript
299
star
8

tilemap

Rectangular tilemap implementation for PixiJS
TypeScript
275
star
9

pixi-typescript

Typescript definitions for Pixi.js
TypeScript
238
star
10

layers

Separate the z-hierarchy of your scene tree from its canonical structure.
TypeScript
220
star
11

animate

PixiJS runtime library for content from Adobe Animate CC
JavaScript
198
star
12

lights

Adds dynamic lighting via deferred shading to PixiJS
TypeScript
191
star
13

open-games

TypeScript
190
star
14

pixi-projection

TypeScript
186
star
15

pixi-haxe

Externs of Pixi.js for Haxe
Haxe
179
star
16

graphics-smooth

Drop-in replacement for Graphics but with anti-aliasing
TypeScript
151
star
17

ui

Commonly used UI components for PixiJS
TypeScript
149
star
18

animate-extension

Custom Platform Plugin for Adobe Animate CC (Formerly Adobe Flash CC) - to export animation for the PixiJS renderer
C++
124
star
19

pixi-heaven

PIXI.js advanced color modes, sprites, meshes
TypeScript
115
star
20

pixi-compressed-textures

Compressed textures and retina support for pixijs. Loader can choose textures depends on platform and rendering mode.
TypeScript
92
star
21

pixi-native

A native version of pixi
Kotlin
85
star
22

pixi-gl-core

A set of tidy little pixi objects that make working with WebGL simpler
JavaScript
83
star
23

assetpack

TypeScript
77
star
24

pixi-extra-filters

[deprecated] Please see https://github.com/pixijs/pixi-filters
JavaScript
66
star
25

pixi-particles-editor

PIXI-based particle editor
JavaScript
65
star
26

picture

A plugin that includes a sprite renderer that reduces border artifacts and 3 blend mode implementations for WebGL
TypeScript
61
star
27

layout

Library for arranging/resizing pixiJS rendered elements basing on css like configs
TypeScript
53
star
28

html-text

Multi-Style Text Rendering Plugin for PixiJS
TypeScript
38
star
29

gif

Plugin to support playback of animated GIF images in PixiJS.
TypeScript
35
star
30

pixi-jsdoc-template

PixiJS Flavored JSDoc Template
JavaScript
30
star
31

extension-boilerplate

Pixi.js example renderer plugin. Clamps textures to reduce border artifacts.
TypeScript
30
star
32

pixijs.com

JavaScript
30
star
33

pixi-text-style

PIXI.TextStyle Generator
JavaScript
30
star
34

floss

Unit-testing for those hard to reach places
TypeScript
28
star
35

storybook

TypeScript
27
star
36

node

Run PixiJS but in Node.js environments, no browser required!
TypeScript
25
star
37

bunny-mark

Simulation for performance testing PIXI releases
JavaScript
20
star
38

devtools

TypeScript
18
star
39

batch

PixiJS batch rendering plugin library
TypeScript
17
star
40

pixify

Browserify bundle process for PIXI libraries
JavaScript
16
star
41

guides

PixiJS User Guides
SCSS
12
star
42

customize

Customize the list of packages to use for PixiJS v5
TypeScript
11
star
43

animate-examples

Document Examples for testing PixiAnimate publishing
10
star
44

docs

API Documentation container
HTML
9
star
45

examples-v4

Rendering examples using PixiJS v4 and related plugins
JavaScript
9
star
46

spine-v8

TypeScript
9
star
47

extension-scripts

Build-time scripts for setting up extensions
JavaScript
6
star
48

pixi-closure-compiler

closure compiler externs for pixijs
JavaScript
6
star
49

eslint-config

ESLint config for pixi.js plugin/integration libraries
JavaScript
5
star
50

webdoc-template

PixiJS template ported to webdoc
TypeScript
4
star
51

generator-pixi-plugin

A Yeoman generator for creating pixi.js plugins.
JavaScript
4
star
52

bundler

Bundle all release into a single package
JavaScript
3
star
53

pixi-animate-tests-tool

Used to generate unit tests solutions for PixiAnimate
JavaScript
3
star
54

legacy.pixijs.com

SCSS
3
star
55

examples-v5

Rendering examples using PixiJS and related plugins
JavaScript
2
star
56

webworker-plugins

TypeScript
1
star
57

examples-v7

JavaScript
1
star