Live particle effects for web games

A spritesheet is a fixed recording. The live runtime plays the effect file itself, so it can fire extra bursts where the player clicks, take edits at runtime and render at any size without a bigger file. It comes with any plan.

Export and play it

1. Open the effect in the studio, press Export and choose Live runtime.
2. The zip holds the effect as JSON (images embedded), particlefx-runtime.js (the WebGL2 player, about 42 KB gzipped, no dependencies) and a working index.html.
3. Serve the folder over http, for example with npx serve ., and open it.

<canvas id="fx"></canvas>
<script src="particlefx-runtime.js"></script>
<script>
  fetch('effect.json')
    .then((r) => r.json())
    .then((effect) => ParticleFX.play(document.getElementById('fx'), effect, { transparent: true }))
    .then((fx) => {
      // fx.burst(x, y), fx.pause(), fx.play(), fx.restart(), fx.seek(seconds), fx.update(doc), fx.destroy()
    });
</script>

In a game that already draws with WebGL (Phaser, PixiJS, three.js), lay the effect canvas over the game canvas with transparent: true, or draw the effect canvas into a texture each frame.

When to use a spritesheet instead

Use a spritesheet for effects you place many times at once, or when your engine is not running in a browser. See Phaser and PixiJS, Unity or Godot.

Effects that shine live

Power-Up AuraTap Glitter RippleBubble Pop ChainWarp PortalHealing RainCombo Fire-Up

The live runtime comes with any plan, from $7.99 a month. It may be used to play effects exported from ParticleFX Studio inside your own game, app or site.