Particles Component

Events

ParticleEnd
when the particle animation has finished

Based on Parcycle by Mr. Speaker, licensed under the MIT, Ported by Leo Koppelkamm

Note: This requires the canvas element, and won't do anything if the browser doesn't support it!

For implementation details, check out the source code.

Methods

Back to top

.particles()

public this .particles(Object options)
options

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

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").particles(options);
Back to top

.pauseParticles()

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()

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();