CREATOR RESOURCES / PIXEL ART
PixelFX by Patch is a library of code-drawn animations for fire, spells, pickups and more. Its official catalog lists 244 effects at the revision checked here. Editable JavaScript makes it useful for AI-assisted game development: an assistant can change an effect, render it and refine the result. PixelFX supplies visual feedback; your game still supplies the rules.
Source checked: November 5, 2026 · pinned revision a841596
These previews run the original effect code locally in your browser. Colors and playback speed are adjustable. Press Play to animate; one-shot effects stop when finished. This preview shows effects only, without character acting.
Exports use 20 frames per second at the effect’s native pixel size, with your palette and speed applied. Download both files together; JSON includes timing, pivot and MIT notices. No character animation is baked in.
Choose one of three effects, pick a palette and set the playback speed. Generate a transparent sprite sheet and its animation metadata directly in your browser, without an account or credits. This tool renders existing PixelFX code with your settings. To design a new effect, edit the source with a coding assistant; to build a complete game, continue in Studio.
Start with the player event you need to communicate. A visual that looks impressive on its own can obscure an enemy or make a reward hard to notice. Use the following three starting points, then compare them against your actual background and character scale.
fire/campfireUse campfire for a campsite, checkpoint or safe area. A continuous loop works best away from fast-moving action. Keep its brightness below critical hit feedback, and stop updating it when the scene is inactive. For different weather or scenery, browse the wider official catalog.
ice/frost-novaUse frost nova as the visual response to an area spell. Decide when the spell becomes active, when damage is applied and when recovery ends before tuning the effect. The visible ice ring does not implement a collision shape, damage or a cooldown. Match those mechanics explicitly to the animation.
pickups/collect-burstUse collect burst after the game confirms a pickup. Spawn it at the collected object, award the score once and remove the visual when it finishes. Try several pickups at once: if their flashes hide the player, reduce the number of simultaneous effects or choose a quieter palette.
Plan the smallest loop: for example, move around one room, collect five crystals and restart after winning. Define keyboard or touch controls before adding effects.
Assign each visual to a real event: a campfire marks the room, collect burst confirms a crystal, and frost nova signals an ability. Separate atmosphere from success and danger.
Create the game plan in Studio, or use the downloadable example in your own code project. Provide the relevant effect files or exported assets when integrating; a link alone is not proof that an assistant imported the library.
Test a full round, repeated pickups and restart. Check transparent edges against light and dark backgrounds, the sprite pivot and readability on a phone. Keep the working version before requesting a visual revision.
Install in a JavaScript project with an ESM bundler such as Vite. This standalone Canvas example creates its own canvas: click or tap it to trigger a pickup. For an existing game, render the effect on a transparent overlay and trigger it from a confirmed game event. Keep damage, collisions and scoring in your game logic.
npm install github:patch-gg/pixelfx#a84159688af3ca37a4be05a0d422b94451b2e24eimport { createFrame, clearFrame, createFx, composite } from 'pixelfx';
import * as burst from 'pixelfx/fx/pickups/collect-burst';
const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 180;
canvas.style.cssText = 'width:640px;max-width:100%;image-rendering:pixelated;background:#111';
document.body.append(canvas);
const ctx = canvas.getContext('2d');
const frame = createFrame(320, 180);
const pixels = ctx.createImageData(320, 180);
let fx;
canvas.addEventListener('pointerdown', () => {
fx = createFx(burst, { x: 160, y: 120, seed: 3 });
});
let previous;
function tick(now) {
const dt = previous === undefined ? 0 : Math.min((now - previous) / 1000, 0.05);
previous = now;
clearFrame(frame);
if (fx) {
fx.update(dt);
fx.draw(frame);
if (fx.done()) fx = undefined;
}
composite(frame, pixels.data);
ctx.putImageData(pixels, 0, 0);
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);Clone the repository, install its tooling, then render an effect. The exporter writes a transparent PNG atlas and Aseprite-style JSON with frame timing and pivot metadata. Use a compatible importer in your engine; generic PNG import alone does not apply the JSON timing or pivot. See the official authoring guide for render-tool prerequisites.
git clone https://github.com/patch-gg/pixelfx.git
cd pixelfx
git checkout a84159688af3ca37a4be05a0d422b94451b2e24e
npm install
node tools/render.mjs ice/frost-nova --sheetThe upstream repository includes a Claude Code plugin. Run these two commands inside Claude Code to install it. For another assistant, provide the selected source files and the brief below. This resource page does not install the plugin into Studio or guarantee automatic imports from GitHub.
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfxAdd a PixelFX collect-burst effect to my existing browser game. Preserve controls, scoring and collision rules. Trigger it exactly once when a pickup is collected. Use a fixed seed and a blue palette. Keep the effect on a transparent layer, remove it when finished, and clear effects on restart. Include the MIT notices. Show the changed files and explain how to check replay, overlapping pickups and mobile performance. If the source is unavailable, ask me for the files instead of inventing the API.
Adjust palette for your background, speed for impact timing, and seed for repeatable comparisons. Test several simultaneous effects, restart cleanup and small-screen readability. Keep reduced-motion settings in mind. A good-looking preview does not prove that an effect fits your game or its frame budget.
This workbench renders three existing procedural effects. It does not call an image model or invent a new animation from a text prompt. PixelFX also includes a separate Claude Code skill for writing effects; Studio is the site’s AI game generator. These are different workflows.
Keep both files in the same folder. PNG contains a grid of frames; JSON describes their rectangles, duration and pivot. Use an importer that supports the format, or read the frame rectangles in your own animation code. Turn off texture smoothing for crisp pixels. Check the pivot so the effect stays attached to the intended position.
PixelFX combines color and additive light. A transparent PNG bakes that result into RGBA pixels; it may look different from live additive rendering over your scene. Compare it on your intended background before choosing a blend mode. This exporter includes only the effect, so missing character poses are expected.
The resource generator exports visual assets. For gameplay, open Studio, describe the goal and controls, and confirm the game plan. Signed-in planning is free; builds and revisions use Studio Credits. This page does not install PixelFX into Studio or claim that its exported files have been tested in every engine.
The upstream code and effects use the MIT license. Preserve the copyright and permission notices when redistributing them. Some code credits Hugo Duprez and Hollow Crown; retain the applicable notices. The Patch Pixel font in gallery/fonts is excluded from this license and is not used here. Patch maintains PixelFX; this is an independent integration guide.
OpenGame / Source checked: November 5, 2026 · pinned revision a841596