Skip to main content

emitters

March 5, 2020

emitters

The module emitters allows you to fire particle effects, attach them to copies, or make them follow one.

Internally, it is based on the particle-emitter module.

Note:

If you don't have any emitter tandems in your project, then emitters won't be available. It is bundled only if you have particle systems in your project to make the browser builds smaller.

Creating effects

There are three methods with different logic, each suitable for particular situations:

Let's see them all in action (note how the trail reacts to the robot's movement):

emitters.fireemitters.followemitters.append
JavaScript
// The code from the "fire" example
emitters.fire('HeartTrail', this.x, this.y - 70);
JavaScript
// The "follow" example
emitters.follow(this, 'HeartTrail', {
    position: {
        x: 0,
        y: -70
    }
});
JavaScript
// The "append" example
emitters.append(this, 'HeartTrail', {
    position: {
        x: 0,
        y: -70
    }
});

Additional options

You may have noticed that these three methods accept an additional argument (e.g. emitters.fire('NameOfAnEffect', x, y, options);). It is an object, and has properties for tweaking an effect's look and behavior:

Each property is optional. An example: if we would like to create a smaller reddish effect above a copy that stays at the same depth as the copy, we would write:

JavaScript
emitters.follow(this, 'Debuff', {
    scale: {
        x: 0.75,
        y: 0.75
    },
    position: {
        x: 0,
        y: -80
    },
    tint: 0xff9999,
    depth: this.zIndex
});

Manipulating emitters

By themselves, created effects will behave well: they will stop automatically when their time is up, or when their owner was destroyed, leaving a nice trail of particles. But sometimes we need to fully clean up the effect, or pause it and resume later, or stop it completely earlier than usual.

Each of the emitters.fire, emitters.append and emitters.follow return a reference to the created effect which we can use:

JavaScript
// Let's create a shield bubble!
this.shield = emitters.append(this, 'BubbleEffect');

// Later, when we no longer need the shield:
this.shield.stop();
this.shield = null; // Forget about the effect to free memory

There is a number of properties we can use in such way: