1. Web Games (Canvas / Phaser / PixiJS / Three.js)
Import any effect directly as an ES module (~3 KB per file). Every effect renders into a dual buffer (color + additive light) at your game's native pixel resolution.
import { createFrame, createFx, composite } from "pixelfx";
import * as frostNova from "pixelfx/fx/ice/frost-nova";
const frame = createFrame(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 });
2. Godot, Unity & GameMaker (PNG + Aseprite JSON)
Click any tile above and hit Download Sprite Sheet PNG and Download Aseprite JSON, or batch-export from the CLI with frame tags, pivot points, and hit-stop timings.
# Export single effect sheet + JSON
node tools/render.mjs ice/frost-nova --sheet
# Export all 244 effects to sheets/
node tools/sheets.mjs
3. 3D Skeletal Acting & Hit-Stop Timing
73 effects include full character pose tracks (wind-up, contact freeze, camera shake, target knockback, and recovery). Swap createFx for createAct or read fx.act timing data.
import { createAct } from "pixelfx";
import * as slash from "pixelfx/fx/melee/sword-slash";
const act = createAct(slash, { x: 80, y: 140 });
// Read slash.act.hits for freeze & shake frames
How do I export transparent PNG sprite sheets for Godot, Unity, or Phaser?
Click any effect card to open the detail studio, choose your preferred color palette or seed, and click ⬇ Sprite Sheet PNG and ⬇ Aseprite JSON. The generated PNG uses transparent RGBA8888 frames, and the JSON file follows the standard Aseprite atlas specification supported by Godot, Unity, Phaser, and PixiJS.
Are all 244 pixel art animations free for commercial games?
Yes. The PixelFX core engine and all 244 procedural effects across 21 categories (moves, fire, explosions, water, ice, lightning, sci-fi, melee, impacts, projectiles, spawn, arcane, holy, shadow, status, nature, weather, UI, pickups, transitions, and critters) are licensed under the MIT License.
Can I recolor effects or change random particle seeds?
Yes. Every effect accepts a custom palette array (dark-to-bright hex ramp), flip boolean for horizontal mirroring, and a deterministic seed integer so particle simulations play identically on every run.
How does the Claude Code skill generate new pixel art effects?
Install the official plugin via /plugin marketplace add patch-gg/pixelfx or copy skills/pixelfx into ~/.claude/skills/. It guides Claude through drafting, rendering contact sheets, checking bounds/seams with tools/check.mjs, and refining motion.