JavaScript pixel art effects

Use the original pixelfx effects in a browser game, or download sprite sheets from the library. The runtime has no dependencies.

Install the library

npm install github:patch-gg/pixelfx

A complete canvas example

Add a <canvas> to your page, then run this in a bundled JavaScript module. The example uses a looping fireball so it can keep playing.

import { createFrame, clearFrame, createFx, composite } from "pixelfx";
import * as fireball from "pixelfx/fx/fire/fireball";

const canvas = document.querySelector("canvas");
canvas.width = 320;
canvas.height = 180;
canvas.style.imageRendering = "pixelated";
const ctx = canvas.getContext("2d");
const frame = createFrame(320, 180);
const image = ctx.createImageData(320, 180);
const fx = createFx(fireball, { x: 160, y: 90 });
let last;
function tick(now) {
  const dt = last === undefined ? 0 : Math.min((now - last) / 1000, 0.1);
  last = now;
  fx.update(dt);
  fx.draw(clearFrame(frame));
  composite(frame, image.data, null);
  ctx.putImageData(image, 0, 0);
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

Palettes and placement

Pass palette, seed, flip, x and y to createFx. An effect page’s Code tab includes the exportable options you are currently previewing.

Sprite sheets for other engines

Each effect page has a transparent PNG and Aseprite-style JSON. You can also export from the upstream repository:

node tools/render.mjs fire/fireball --sheet

See the sprite sheet guide for layout, frame timing and pivots. Importer support varies by engine.

Character performances

The upstream createAct API plays wind-up, hit-stop and recovery for effects with acting data. Website downloads contain the effect layers; use node tools/act.mjs <id> --sheet in the repository to bake a full character performance.

Source and attribution

PixelFx Studio builds on Patch’s pixelfx. Read the authoring documentation for the effect contract and rendering APIs, and include the required license notices in your distribution.