Particles Component

src/graphics/particles.js#L8-L24

Events

ParticleStart
when the particle animation has started
ParticleEnd
when the particle animation has finished

Create particle effects.

Particles won't be drawn outside the entity's bounds. Make sure to adjust the entity's dimensions accordingly.

Note: Particles effects currently work exclusively with the Canvas render backend. Particles won't be drawn if the browser doesn't support this!

See Also

Methods

Back to top

.particles()

src/graphics/particles.js#L62-L120
public this .particles([Object options])
options

Map of options that specify the behavior and look of the particles.

Create a new particle animation.

If the options object is missing a property, the default will be used. Default options are listed in the example below.

Invoking this method without an options object will restart the particle animation with the previously used options, or the default options otherwise.

Example

var options = {
  maxParticles: 150,
  size: 18,
  sizeRandom: 4,
  speed: 1,
  speedRandom: 1.2,
  // Lifespan in frames
  lifeSpan: 29,
  lifeSpanRandom: 7,
  // Angle is calculated clockwise: 12pm is 0deg, 3pm is 90deg etc.
  angle: 65,
  angleRandom: 34,
  startColour: [255, 131, 0, 1],
  startColourRandom: [48, 50, 45, 0],
  endColour: [245, 35, 0, 0],
  endColourRandom: [60, 60, 60, 0],
  // Only applies when fastMode is off, specifies how sharp the gradients are drawn
  sharpness: 20,
  sharpnessRandom: 10,
  // Random spread from origin
  spread: 10,
  // How many frames should this last
  duration: -1,
  // Will draw squares instead of circle gradients
  fastMode: false,
  gravity: { x: 0, y: 0.1 },
  // sensible values are 0-3
  jitter: 0,
  // Offset for the origin of the particles
  originOffset: {x: 0, y: 0}
};

Crafty.e("2D, Canvas, Particles")
    .attr({ w: 200, h: 200 })
    // debug entity's bounds while developing
    // make sure particles fit into entity's bounds
    .addComponent('WiredMBR')
    // init particle animation
    .particles(options);
Back to top

.pauseParticles()

src/graphics/particles.js#L392-L410
public this.pauseParticles()

The pauseParticles will freeze these particles in execution.

Example

// start particle animation
var ent = Crafty.e("Particles").particles(someParticleConfig);

// and some time later, the gameplay is paused (or only
// a part of it is frozen)
ent.pauseParticles();
Back to top

.resumeParticles()

src/graphics/particles.js#L415-L436
public this.resumeParticles()

The resumeParticles will resume earlier paused particles

Example

// start particle animation
var ent = Crafty.e("Particles").particles(someParticleConfig);

// and some time later, the gameplay is paused (or only
// a part of it is frozen)
ent.pauseParticles();

// and we resume the particles again
ent.resumeParticles();