Particles

Particles can be used to generate dust, smoke, or fire effects in your games.

Particles

The easiest way to create a ParticleEmitter is to use the Particle Tester to generate code for emitters.

warning

The particle tester constructor is currently out of date, you will need to modify it to match the below.

Example: Adding an emitter

js
const actor = new ex.Actor(...);
const emitter = new ParticleEmitter({
  x: 100,
  y: 100,
  radius: 5,
  emitterType: ex.EmitterType.Circle, // Shape of emitter nozzle
  minVel: 100,
  maxVel: 200,
  minAngle: 0,
  maxAngle: Math.PI * 2,
  isEmitting: true, // should the emitter be emitting
  emitRate: 300, // 300 particles/second
  opacity: 0.5,
  fadeFlag: true, // fade particles overtime
  particleLife: 1000, // in milliseconds = 1 sec
  minSize: 1, // random size minimum in pixels
  maxSize: 10, // random size maximum in pixels
  startSize: 10, // starting size in pixels
  endSize: 1, // ending size in pixels
  acceleration: new Vector(accelX, accelY),
  beginColor: ex.Color.Red,
  endColor: ex.Color.Blue,
  focusAccel: 800
});
// add the emitter as a child actor, it will draw on top of the parent actor
// and move with the parent
actor.add(emitter);
// or, alternatively, add it to the current scene
engine.add(emitter);

js
const actor = new ex.Actor(...);
const emitter = new ParticleEmitter({
  x: 100,
  y: 100,
  radius: 5,
  emitterType: ex.EmitterType.Circle, // Shape of emitter nozzle
  minVel: 100,
  maxVel: 200,
  minAngle: 0,
  maxAngle: Math.PI * 2,
  isEmitting: true, // should the emitter be emitting
  emitRate: 300, // 300 particles/second
  opacity: 0.5,
  fadeFlag: true, // fade particles overtime
  particleLife: 1000, // in milliseconds = 1 sec
  minSize: 1, // random size minimum in pixels
  maxSize: 10, // random size maximum in pixels
  startSize: 10, // starting size in pixels
  endSize: 1, // ending size in pixels
  acceleration: new Vector(accelX, accelY),
  beginColor: ex.Color.Red,
  endColor: ex.Color.Blue,
  focusAccel: 800
});
// add the emitter as a child actor, it will draw on top of the parent actor
// and move with the parent
actor.add(emitter);
// or, alternatively, add it to the current scene
engine.add(emitter);

🧪 Alpha Particle Emitter

In the latest build particle specific properties are nested under the particle config

typescript
const emitter = new ParticleEmitter({
  x: game.halfDrawWidth,
  y: game.halfDrawHeight,
  width,
  height,
  emitterType,
  radius,
  isEmitting,
  emitRate,
  focusAccel: 800,
  particle: {
    minVel,
    maxVel,
    minAngle,
    maxAngle,
    opacity,
    fade,
    life,
    minSize,
    maxSize,
    startSize,
    endSize,
    acc: new Vector(accelX, accelY),
    beginColor: ex.Color.Red,
    endColor: ex.Color.Blue,
  }
});

typescript
const emitter = new ParticleEmitter({
  x: game.halfDrawWidth,
  y: game.halfDrawHeight,
  width,
  height,
  emitterType,
  radius,
  isEmitting,
  emitRate,
  focusAccel: 800,
  particle: {
    minVel,
    maxVel,
    minAngle,
    maxAngle,
    opacity,
    fade,
    life,
    minSize,
    maxSize,
    startSize,
    endSize,
    acc: new Vector(accelX, accelY),
    beginColor: ex.Color.Red,
    endColor: ex.Color.Blue,
  }
});