Canvas effects

A effect is what the canvas renders, you can define your own to handle the specific spawn of particles (or whatever you want) and the rendering.

By default the package provides only one effect, the one we already know.

Register an effect

To register an effect use the service's function registerEffect, you need to provide a code and the effect itself.

  consumeActivatePowerModeServiceV1(service) {
    effect = require('./my-effect');
    service.registerEffect('myEffect', effect);
  }

If you don't know how to consume the activate-power-mode's service, read the Consume the service page.

Effect object

The effect can be any object implementing the following functions:

  // It called when the effect is enabled.
  init()

  // When the effect is disabled.
  disable() 

  // It is called on input, use it to generate object for a given input
  // in the case of the default particles effect, here we built the particles 
  // for the input position.
  // Here you get the position, a color helper, an input helper, a size helper
  // and a config helper. 
  spawn(position, colorGenerate, input, randomSize, conf)

  // Used to update the objects, example the particles position.
  update() 

  // Used to renders the effect in the canvas, you get access to the canvas context.
  animate(context)

Additionally your effect object can define title, description and image (and image preview of the effect) properties to be shown when the users select the effect.

Helpers

On the spawn function you get some helpers to ease getting some values based on setting.

The config helper is just an array with the values for particles configurations. The randomSize and colorGenerate are actually functions to generate what the name reads.

Particles based effect

Most of time you only want to change the look of particles, maybe put some stars or hearts instead of the default ones. So there is a function to create a particles based effect that takes only a object which defines only the particles rendering.

The service can create an particles effect with the function createParticlesEffect which takes your particle manager object, so you register the returned effect object. The next example is a bit difference from the example above.

  consumeActivatePowerModeServiceV1(service) {
    particleManager = require('./my-particle-effect');
    effect = service.createParticlesEffect(particleManager);
    service.registerEffect('myEffect', effect);
  }

Particles manager object

The particles manager should implement the following functions:

  // To handle the particle lifecycle, tells if a particle is still alive or not.
  // return true/false
  isDone(particle)
  
  // To update a single particle
  update(particle)

  // To draw a single particle, you get the canvas context
  draw(particle, context)

  // Optional, to handle entirely the particle creation 
  create(left, top, colorGenerate, randomSize)

  // Optional, to use the default particle creation but hooking into it
  init(particle)

Also as the effect objects, these objects can define title, description and image properties.

Select effect

The user can select the effect with the command activate-power-mode:select-effect