pixelfx — 픽셀아트 효과 244개를 코드로

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 (https://www.spritefusion.com/blog/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

1. 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.

2. 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

Canvas or WebGL games in JS or TS (plain canvas, Phaser, PixiJS, Kaplay, three.js): use the code directly. It
has no dependencies; copy src/core and the effect files you need, or depend on the repo.

js복사
import { createFrame, clearFrame, createFx, composite } from "pixelfx";   // src/core/index.js
import * as frostNova from "pixelfx/fx/ice/frost-nova";                   // src/fx/ice/frost-nova.js

const frame = createFrame(320, 180);            // the game's pixel resolution; ox, oy scroll it with the camera
const img = new ImageData(320, 180);
const fx = createFx(frostNova, { x: hero.x, y: hero.y, flip: hero.facing < 0 });

// every tick
fx.update(dt);
clearFrame(frame);
fx.draw(frame, "back");    // what goes behind characters
drawCharacters();          // your own sprites, or draw them into frame.color yourself
fx.draw(frame, "front");
composite(frame, img.data, background);   // color over the background plus light; or null for transparent
ctx.putImageData(img, 0, 0);              // then scale the canvas up with image-rendering: pixelated
if (fx.done()) removeIt();               // one-shots end on their own; fx.stop() fades a loop out

Several effects can share one frame. In a WebGL engine, upload the composited RGBA to a texture each frame, or
render the effect to a sprite sheet once (below) and play it like any other animation.

Any engine (Godot, Unity, GameMaker, Defold, LÖVE, Bevy, Construct): export sprite sheets.
node tools/render.mjs ice/frost-nova --sheet writes records/ice/frost-nova/frost-nova.png (transparent
frames in a grid) and frost-nova.json (Aseprite-style frames, so Phaser's atlas loader, Godot and Unity Aseprite
importers and most tools read it; meta.pixelfx has fps, loop, frame size, columns and the pivot). Set the

(이하 생략 — 전체 SKILL.md는 원본 저장소에서 확인하세요: https://github.com/patch-gg/pixelfx/blob/main/skills/pixelfx/SKILL.md)

원본: https://github.com/patch-gg/pixelfx/blob/main/skills/pixelfx/SKILL.md · 라이선스: MIT — 원문 그대로 옮겼으며, 자세한 조건은 저장소의 LICENSE를 따릅니다.

※ 화면 표시를 위해 꺾쇠괄호(< >)를 전각 문자(＜ ＞)로 바꿨습니다. 그대로 복사해 쓰실 때는 위 원본 저장소의 SKILL.md를 받아 주세요.