GitHub 上的新仓库 patch-gg/pixelfx，创建 1 天，已有 678 星（平均每天 556 星）。
232 pixel art effects, every one a small piece of code. Plus a Claude Code skill to make your own.
主题：agent-skills, animation, canvas, claude-code-plugin, gamedev, pixel-art, sprite-sheet, vfx
语言：JavaScript
README：
pixelfx.
244 pixel art effects and animations, every one a small piece of code. Fire,
explosions, magic, weather, UI, pickups, critters and more. Play them live, recolor and mirror them, drop them into
a browser game, or export sprite sheets for any engine. Plus a Claude Code skill that makes new ones the way a
picky pixel artist would: draft, render, look, refine.
Every effect that involves a character is acted out: he winds up, lets go, freezes on contact and recovers, and a
target takes the hit. Twelve whole moves chain the effects into attacks from wind-up to recovery.
open the gallery · catalog · acting ·
the skill · make your own · how it works
The method is Hugo Duprez's, from How to make (good) pixel art effects with
Claude: code is clay, trust your
eyes, feed your references. His open-source effects at Sprite Fusion
set the bar, and src/core/sim.js and the effects that say so at the top adapt his code. This repo is our take on
the idea at library scale, with a skill to keep going.
what's in it.
| category |
effects |
some of them |
| moves |
12 |
arrow shot, dash strike, earth stomp, fireball throw, ground pound, holy smite… |
| fire |
12 |
brazier, campfire, candle, fire breath, fire ring, fire tornado… |
| explosions |
12 |
barrel explosion, big explosion, cartoon pow, dirt explosion, firework burst, firework rocket… |
| water |
12 |
bubbles, drip, fountain, geyser, rain splash, ripples… |
| ice |
10 |
blizzard vortex, freeze, frost breath, frost nova, ice crystal, ice lance… |
| lightning |
11 |
ball lightning, chain lightning, charge up, electrified, lightning strike, plasma ball… |
| sci-fi |
12 |
emp blast, energy core, force field, glitch, hologram, jetpack… |
| melee |
12 |
claw swipe, dagger flurry, double slash, hammer smash, heavy cleave, scythe reap… |
| impacts |
11 |
blunt hit, bullet impact, critical hit, ground slam, heavy landing, hit flash… |
| projectiles |
13 |
arrow, bullet tracer, cannon shot, energy disc, signal flare, homing missile… |
| spawn & death |
10 |
coin drop, disintegrate, dissolve burn, egg hatch, poof, respawn beam… |
| arcane |
12 |
arcane beam, arcane missiles, arcane orb, blink in, blink out, magic circle cast… |
| holy |
10 |
blessing, divine shield, feather burst, halo, heal, healing ring… |
| shadow |
12 |
black hole, curse, dark explosion, eclipse, grasping hands, hex sigil… |
| status |
13 |
bleeding, burning, charmed, confused, cursed, frozen… |
| nature |
13 |
acid splash, boulder, earth spike, healing bloom, leaf storm, poison cloud… |
| weather |
12 |
aurora, blizzard, cherry blossoms, clouds, falling leaves, fireflies… |
| ui |
12 |
achievement, coin collect, combo counter, confetti, countdown, crit number… |
| pickups |
11 |
chest open, coin spin, collect burst, crystal shard, gem spin, heart pickup… |
| transitions |
10 |
blinds, burn away, crt off, diamond wipe, glitch wipe, iris… |
| critters |
12 |
bat, bird, butterfly, eyeball, fish school, flying skull… |
Every effect is a file in src/fx//.js. The catalog lists them all.
use one.
In a browser game (canvas, Phaser, PixiJS, Kaplay, three.js), use the code. No dependencies.
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
}
Install from GitHub with npm i github:patch-gg/pixelfx, or copy src/core and the effects you want.
In any engine (Godot, Unity, GameMaker, Defold, LÖVE, Bevy), use sprite sheets:
node tools/render.mjs ice/frost-nova --sheet
That writes a transparent PNG of every frame in a grid and an Aseprite-style JSON (frame rects, durations, and
meta.pixelfx with fps, loop, columns and the pivot). Phaser's atlas loader and the Aseprite importers for Godot
and Unity read it. node tools/sheets.mjs exports the whole library to sheets/.
Any effect takes a palette (a dark-to-bright ramp of hex colors), so a fire can burn blue and a heal can glow
pink without touching its code:
node tools/render.mjs fire/torch --gif --opts '{"palette": ["#102","#215","#43a","#8cf","#cff","#fff"]}'
acting.
An effect on its own looks like a sticker. What sells a hit is the body around it: the wind-up that says something is
coming, the freeze on contact, the target rocking back, the recovery. So the 61 effects with a character, and the 12
moves, say what the body does and when:
``
The original belongs to GitHub 爆发仓库 and its authors and is reproduced here for reading. To have it removed, write to support@aisa.one.
Studio