pixelfx

patch-gg6.4kstars

Make pixel art effects and sprite animations in code with the pixelfx library, which has 244 ready-made ones, acted out by a character who winds up, freezes on contact and recovers (fire, explosions,

Game Development

Install GitHub

1---2name: pixelfx3description: Make pixel art effects and sprite animations in code with the pixelfx library, which has 244 ready-made ones…4---56# skills/pixelfx/SKILL.md

SKILL.mdAgent skill

Transport: File
Status: Listed

SKILL.md

Install

The skill file stays in the publisher's repository.

Paste the copied command in a terminal. It installs this SKILL.md into that agent.

shterminal

1npx skills add patch-gg/pixelfx --skill pixelfx -a cursor -y

Paste the copied command in a terminal. It installs this SKILL.md into that agent.

shterminal

1npx skills add patch-gg/pixelfx --skill pixelfx -a claude-code -y

Paste the copied command in a terminal. It installs this SKILL.md into that agent.

shterminal

1npx skills add patch-gg/pixelfx --skill pixelfx -a codex -y

Paste the copied command in a terminal. It installs this SKILL.md into that agent.

shterminal

1npx skills add patch-gg/pixelfx --skill pixelfx -a grok -y

Send the copied message in a Grok Bot chat. The Bot fetches this SKILL.md from GitHub and adds it to the skills all your Bots share.

txtGrok Bot chat

1Install this skill: https://github.com/patch-gg/pixelfx/tree/HEAD/skills/pixelfx

Download skill skills/pixelfx/SKILL.md on GitHub

skills/pixelfx/SKILL.mdMarkdown · UTF-8

Skill facts

Agent skill

File: skills/pixelfx/SKILL.md
Publisher: patch-gg
Hosting

Overview

About pixelfx

Make pixel art effects and sprite animations in code with the pixelfx library, which has 244 ready-made ones, acted out by a character who winds up, freezes on contact and recovers (fire, explosions, water, ice, lightning, sci-fi, melee, impacts, projectiles, spawn and death, arcane, holy, shadow, status, nature, weather, UI, pickups, transitions, critters) to drop into a game, recolor, export as sprite sheets or remix, plus a draft, render, look, refine loop that makes new ones look hand-animated. Use when someone wants pixel art VFX, sprite animations or sprite sheets, game juice, a specific effect ("a frost nova for my mage", "a coin pickup sparkle"), wants to use or export a pixelfx effect in Godot, Unity, Phaser or a canvas game, or wants their pixel effects to look better.

FAQ

Questions

pixelfx

Pixel art effects as code. Each effect is one file, src/fx/<category>/<name>.js, that draws into two buffers: color (pixels: opaque, dithered or truly translucent) and light (additive glow). No images, so an effect can be played live, recolored, mirrored, reseeded and rendered to a sprite sheet for any engine.

The method is Hugo Duprez's (How to make (good) pixel art effects with Claude): code is clay, trust your eyes, feed your references. One-shot prompts make mediocre effects. Drafts you render, look at and refine make good ones.

Before anything

Work in a pixelfx checkout. If the working directory has no tools/render.mjs, clone one next to the project: git clone https://github.com/patch-gg/pixelfx. No install step: the tools use only Node.

Check it runs: node tools/render.mjs fire/torch writes records/fire/torch/contact.png. Open that PNG with your image-reading tool. That contact sheet is how you see every effect from now on.

1. Look for an existing effect first

node tools/list.mjs <words> searches ids, names, tags and descriptions (node tools/list.mjs frost, node tools/list.mjs slash loop). docs/CATALOG.md lists everything by category. Render the candidates and look at them before choosing. Most requests are an existing effect with different options:

palette: the main ramp, dark to bright, as hex strings. Any PAL ramp in src/core/color.js (fire ember lava smoke dust ice water electric volt poison holy heal arcane shadow blood earth stone gold leaf wood metal bone neon cyber matrix candy night) or your own. A blue fire is {"palette": PAL.ice}.

seed for a different but equivalent take; flip to face left; angle to rotate; light (0..1+) for glow strength; plus each effect's own knobs in its meta.options (size, count, radius, text, height...).

Try options without editing code: node tools/render.mjs fire/torch --opts '{"palette":["#102","#215","#43a","#8cf","#fff"]}'.

2. Put it in the game

you see	fix
it reads as mush at 1x	fewer colors, a clear silhouette, one focal point, bigger shapes
speckle: lone noise pixels inside shapes	threshold noise less, quantize with `at()`, no noise on small shapes
floaty, no punch	fast in, slow out (`ease.outQuart`/`outExpo`), a 1 to 2 frame white hero frame, shorter total time
stiff or mechanical	vary every particle (size, speed, delay, life), add secondary motion (sparks, smoke, debris)
washed out	less glow (k 0.2 to 0.5), darker edge steps, keep white for the hottest core only
flat	light from one side: brighter top-left, darker bottom-right step; a darker ramp step at the base
smooth gradients, vector look	hard ramp steps in color; softness only in light and in translucent smoke
a checkerboard where smoke should be	`SMOKE`, `VAPOUR` or `DUST` particles, or `p.disc`: truly translucent, lit on top
seam when a loop wraps	`cycle`, `loopNoise(phase)`, whole-cell `tileNoise` scrolls, `sin(phase * TAU * n)`
a one-shot that pops off	let it shrink, dither out or fall away before t = duration
a great effect on a dead character	give it an act: wind-up, release pose, freeze on contact, a target that reacts, recovery
the act feels weightless	a wind-up the opposite way to the blow, a longer freeze (up to 0.2 s), a bigger silhouette change, shake
the hit lands out of sync	move the hit key to the effect's own constant, not to a time you eyeballed
he holds the weapon badly	keep a bend in the elbow, shafts in front of the chest; on a swing the blade lags the hand; arms reach about 15 px and don't stretch, so step the body in
his arms cross or the pose looks flat	he faces three-quarters towards us: for open arms the near hand goes left (`fx < 0`), far hand right, with `turn: 1`; `yaw` really turns him

pixelfx

Install

Skill facts

About pixelfx

Questions

How do I install pixelfx?

Where does pixelfx live?

Which agents can use pixelfx?

SKILL.md

pixelfx

Before anything

1. Look for an existing effect first

2. Put it in the game

3. Make a new one

4. Native code instead of JS

5. Publish it on Patch