pixelfx

# pixelfx

Gives games 244 pixel art effects such as fire, explosions, magic and weather, each a small code file, with sprite sheet export for any engine and a Claude Code skill for new ones. For game developers.

Made by patch-gg on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository.

## About

What it is: pixelfx is a library of 244 pixel art effects and animations, and each one is a small piece of code. They cover fire, explosions, magic, weather, interface touches, pickups and critters. You can play them live, recolor and mirror them, use them in a browser game, or export sprite sheets. It also has a Claude Code skill that makes new effects.

Who it suits: It suits game developers who want ready-made pixel art effects, and pixel artists who want to recolor and study effects instead of drawing every frame.

```table
Industry | Who uses it | How they use it | Example
Browser games | Developers using canvas, Phaser, PixiJS, Kaplay or three.js | Import an effect as code and draw it each tick | Add a frost nova effect to a game that runs at 320 by 180 pixels
Game engines | Developers using Godot, Unity, GameMaker, Defold, LÖVE or Bevy | Export sprite sheets and load them with an atlas or importer | Render a frost nova as a transparent PNG grid with a JSON file
Pixel art | Artists and animators | Recolor an effect with a palette of hex colors | Make a torch burn blue without touching its code
AI-assisted art | Claude Code users | Use the skill to draft, render, look at and refine new effects | Ask for a new effect and refine it after each render
```

Teams that need high-resolution or 3D effects can skip it.

Where to use it: The code runs in browser games and needs no dependencies. Sprite sheets cover everything else.

- Browser games on canvas, Phaser, PixiJS, Kaplay or three.js, using the code directly
- Godot, Unity, GameMaker, Defold, LÖVE and Bevy, through sprite sheets
- The exported JSON loads in Phaser, and in Godot and Unity through their Aseprite importers
- Claude Code, for the skill that makes new effects

```table
Use case | Who | What they get back
Add a spell to a browser game | A game developer | An effect you update each tick and draw behind or in front of characters
Export for another engine | A developer | A transparent PNG grid and a JSON file with frame rectangles, durations, fps, loop, columns and pivot
Recolor an effect | A pixel artist | A fire that burns blue or a heal that glows pink
Stage an attack | A developer | A short sequence where the character prepares, strikes, pauses on impact and recovers while the target takes the hit
```

How to set it up: You need Node.js for the npm command and the tools scripts.

- Node.js and npm
- A browser game project, or an engine that reads sprite sheets
- Claude Code, only if you want the skill

1. Add the package straight from its GitHub repository with the npm command below. Or copy the src/core folder and just the effect files you need into your project.
2. Import createFrame, clearFrame, createFx and composite, plus the effect you want.
3. Create a frame at your game's pixel resolution, and an ImageData of the same size.
4. Create the effect, then update it, draw it and composite it on every tick.
5. Scale the result up with pixelated image rendering.

```bash
npm i github:patch-gg/pixelfx
```

```js
import { createFrame, clearFrame, createFx, composite } from "pixelfx";
import * as frostNova from "pixelfx/fx/ice/frost-nova";

const frame = createFrame(320, 180);                   // your game's pixel resolution
const img = new ImageData(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 });   // also: flip, angle, seed, palette, light...

function tick(dt) {
  fx.update(dt);
  clearFrame(frame);
  fx.draw(frame, "back");                              // behind characters
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor);         // color, then light added on top
  ctx.putImageData(img, 0, 0);                         // scale up with image-rendering: pixelated
}
```

How to use it: In a browser game, call the effect from your game loop as shown above. For any other engine, render a sprite sheet with the first command below. The second command recolors an effect with a palette of hex colors, from dark to bright, and saves it as a GIF.

```bash
node tools/render.mjs ice/frost-nova --sheet
```

```bash
node tools/render.mjs fire/torch --gif --opts '{"palette": ["#102","#215","#43a","#8cf","#cff","#fff"]}'
```

```table
Tool | What it does
node tools/render.mjs | Renders one effect, as a sprite sheet with --sheet or as a GIF with --gif
node tools/sheets.mjs | Exports the whole library to the sheets folder
```

Example: You render the torch fire as a GIF with a palette that runs through blues. The flames come out blue. The effect's own code stays as it was.

For newcomers and experts: Each effect is a short pixel animation, such as a campfire, a hit flash or a coin pickup, written as a small JavaScript file. A good first try is to open the gallery, watch a few play, and then import one of them into a test canvas.

Every effect lives in src/fx, in a folder for its category. It draws into a pixel frame in a back layer and a front layer, so characters can stand between them. Then composite adds color first and light on top. Effects take options such as flip, angle, seed, palette and light. You scale the frame up yourself with pixelated rendering. Effects with a character are acted out, with timed poses and a target that takes the hit.

```flow
An effect is a small JS file in src/fx
createFx sets its position and options
Each tick updates it and draws back and front
composite adds color, then light on top
You scale the frame up with pixelated rendering
```

Good to know:

- There are 244 effects in 21 categories
- 61 effects have a character who is acted out, and 12 moves chain effects into attacks
- The browser code has no dependencies
- Sprite sheets come as a transparent PNG and an Aseprite-style JSON file
- The method comes from Hugo Duprez, and src/core/sim.js and some effects adapt his code

```chart
Title: Effects in a few categories
Fire: 12 effects
Ice: 10 effects
Lightning: 11 effects
Holy: 10 effects
Weather: 12 effects
UI: 12 effects
Pickups: 11 effects
Critters: 12 effects
```

## On GitHub, 6 November 2026

- Stars: 5,460
- Forks: 720
- Watching: 14
- Open issues and pull requests: 10
- Language: JavaScript
- License: MIT
- Topics: agent-skills, animation, canvas, claude-code-plugin, gamedev, pixel-art, sprite-sheet, vfx

## Links

- Code: https://github.com/patch-gg/pixelfx
- Website: https://patch-gg.github.io/pixelfx/
- Releases: https://github.com/patch-gg/pixelfx/releases
- Issues: https://github.com/patch-gg/pixelfx/issues
- Star history: https://www.star-history.com/#patch-gg/pixelfx&Date

## Get the code

```
git clone https://github.com/patch-gg/pixelfx.git
```

Then follow the setup in its README. Nothing in this kit runs by itself.

README.md  7 KB