PixiJS Particle Emitter - Color

Color behavior allows changing particle color over time.

The configuration for color is simple list of color value and time as shown, with the colors interpolated over time:

Parameters

• list: List{ value: string of Hex value, time: number } - Color value over time.
• isStepped?: Boolean - Optional, defaults to false. If true, the values will be stepped instead of interpolated.

color: {
  list: [
    {value: '#ffff00', time: 0},
    {value: '#8888ff', time: 0.4},
    {value: '#ff00ff', time: 0.7},
    {value: '#ff00ff', time: 1}
  ]
},

Optionally the colors can be stepped instead of interpolated by setting the isStepped flag:

config: {
  color: {
    list: [
    {value: '#ffff00', time: 0},
    {value: '#8888ff', time: 0.4},
    {value: '#ff00ff', time: 0.7},
    {value: '#ff00ff', time: 1}
    ],
    isStepped: true,
  },
}

Spawn Burst Behavior Examples:

Color Behavior Configuration: – other configuration excluded for brevity

{
  type: 'color',
  config: {
    color: {
      list: [
        {value: '#ffff00', time: 0},
        {value: '#8888ff', time: 0.5},
        {value: '#ff00ff', time: 1},
      ],
      isStepped: true
    },
  }
},

PixiJS Particle Emitter: The Unauthorized Manual