DevKit Effects Module

Installation and Imports

Run this command to install devkit-effects as a dependency in your project:

  devkit install https://github.com/gameclosure/devkit-effects.git

Once installed, you can import effects like this:

  import effects;

Using Effects

Adding Effects to a Game

All effects take two parameters: a view and an optional opts object. Effects also looks for a view property so you can pass in something like an Entity.

Call effects like this:

  effects.explode(view);

or:

  effects.disco(player, { duration: 4000 });

Managing Effects

The following functions can be called on effects to help manage active effects:

• effects.pause() - optional parameters view and effect name - pauses all effects globally, all effects on a given view, or a specific effect on a specific view
• effects.resume() - optional parameters view and effect name - resumes all effects globally, all effects on a given view, or a specific effect on a specific view
• effects.stop() - optional parameters view and effect name - clears all effects globally, all effects on a given view, or a specific effect on a specific view
• effects.commit() - optional parameters view and effect name - instantly and safely finishes all effects globally, all effects on a given view, or a specific effect on a specific view

For example, pause all effects, but resume only one of them:

effects.pause();
effects.resume(player, 'disco');

Optional Opts Properties

These properties can be passed in to modify effects:

• duration - number in milliseconds - change the time an effect takes to complete, defaults to 1000 for most effects (1 second)
• scale - number - change the general scale or magnitude of an effect, defaults to 1 for most effects
• loop - boolean - whether or not to continually repeat an effect, defaults to false for most effects
• blend - boolean - whether or not to blend an effect using composite operations, defaults to false for most effects, only affects particles
• follow - boolean - whether particles should follow a view as it moves, defaults to false for most effects, only affects particles, follow: false can create particle trails, try it with the confetti effect!
• behind - boolean - whether particles should be in front or behind the view, defaults to false for most effects, only affects particles

Master Effects List

Animation Effects

• hover - hover a view up and down
• shake - shake a view rapidly, great for screen shaking like earthquakes
• spin - rotate a view
• squish - make a view squish like jelly
• sway - sway a view back and forth

Particle Effects

• confetti - basic confetti effect, has default images
• explode - basic fiery explosion, has default images
• firework - an explosion that looks like a firework, has default images
• sparkle - basic sparkly effect, has default images

Composite Effects

• disco - disco-mode, has default images
• radial - awe-inspiring radials, has default images

Registering Custom Effects

Although this is possible using exposed API's, it's recommended to avoid until better tested and documented! Read the code in effects.js if you're super curious!

• registerAnimationEffect - uses timestep's animate to create animation effects, like bounces or shakes
• registerParticleEffect - uses timestep's ParticleEngine to create particle effects, like sparkles or explosions
• registerCompositeEffect - uses timestep's BlendEngine to create composited particle effects, like disco-mode