PixiJS Particle Emitter - Lists

PixiJS Particle Emitter Lists hold values that change over time. We provide arguments of values at specific times, and can define how the values change between the points.

The Basics

Particles have a lifetime, which can be defined in seconds. Most properties of a particle can be changed over it’s lifetime, and we store changing values in a list.

A list views a lifetime as going from 0 (or 0% of life) to 1 (100% of life). It doesn’t matter is a particle’s lifetime it 0.2 seconds, or 120 seconds. To a list, it’s all between 0 and 1.

For example, to make an particle grow from 0 to 3 in size over the first 2/3 of it’s life and then shrink back to 0, we could use:

scale: {
  list: [
    {value: 0, time: 0},
    {value: 3, time: 0.6666},
    {value: 0, time: 1}
  ]
}

What are lists used for?

Lists are, more correctly Property Lists, they can contain simple values, as well as more complex objects, like colors.

There are a couple of optional additional properties:

• ease If defined, will be used to interpolate between the values in the list. The default is to interpolate between values linearly.
• isStepped If set to true the values should be stepped though The default is to be interpolated linearly.

List Examples for scale:

List examples for scale: – other configuration excluded for brevity

{
  list: [
    {value: 0, time: 0},
    {value: 2.5, time: 0.25},
    {value: 5, time: 0.5},
    {value: 2.5, time: 0.75},
    {value: 0, time: 1}
  ],
  isStepped: true
}


{
  list: [
    {value: 0, time: 0},
    {value: 2.5, time: 0.25},
    {value: 5, time: 0.5},
    {value: 2.5, time: 0.75},
    {value: 0, time: 1}
  ]
}

{
  list: [
    {value: 0, time: 0},
    {value: 2.5, time: 0.25},
    {value: 5, time: 0.5},
    {value: 2.5, time: 0.75},
    {value: 0, time: 1}
  ],
  ease: n => n ** 2
}

PixiJS Particle Emitter: The Unauthorized Manual