이게 불편했어요

게임에 효과 하나 넣으려면 프레임을 한 장씩 찍거나 에셋을 사서 색과 크기를 맞춰야 했어요. AI에게 한 번에 그려 달라고 하면 밋밋한 결과가 나오기 쉬웠고, 손보려 해도 이미지라서 고칠 곳이 마땅치 않았어요.

그래서 이렇게 풀어요

pixelfx의 효과는 이미지가 아니라 시간 t의 프레임을 그리는 코드 한 파일이에요. 그래서 팔레트 하나로 불꽃을 파랗게 바꾸고, 좌우를 뒤집고, 시드를 바꿔 같은 계열의 다른 버전을 얻어요. 캐릭터가 나오는 효과는 준비 동작, 맞는 순간의 멈춤, 밀려나는 표적까지 함께 연기하고, 새 효과는 스킬이 그려 보고 직접 보고 고치는 과정을 반복해 만들어요.

안에서는 이렇게 돌아가요

1. 1

   나 → Claude Code + pixelfx 스킬

   「코인 줍기 반짝임 다섯 가지 만들어 줘」원하는 효과를 한 줄로 말하면, 스킬은 먼저 비슷한 기존 효과가 있는지 찾아요.skills/pixelfx/SKILL.md
2. 2

   Claude Code + pixelfx 스킬 → src/fx/<분류>/<이름>.js

   node tools/new.mjs arcane/my-spell바로 돌아가는 시작 파일을 만들고, 가까운 효과 두세 개를 참고해 초안을 써요.tools/new.mjs
3. 3

   src/fx/<분류>/<이름>.js → tools/render.mjs

   node tools/render.mjs arcane/my-spell프레임을 렌더해 한 장의 contact.png로 모아요.tools/render.mjs
4. 4

   tools/render.mjs → Claude Code + pixelfx 스킬

   contact.png를 보고 가장 나쁜 점 고치기에이전트가 그림을 직접 열어 보고, 고치고 다시 렌더하는 걸 최소 세 번 돌려요.skills/pixelfx/SKILL.md
5. 5

   Claude Code + pixelfx 스킬 → tools/check.mjs

   node tools/check.mjs arcane/my-spell캔버스 밖으로 새는 픽셀, 루프 이음새, 시드 없는 난수, 느린 프레임을 잡아요.tools/check.mjs
6. 6

   tools/render.mjs → 스프라이트 시트 PNG + JSON

   --sheet투명 PNG 격자와 fps·피벗이 담긴 Aseprite식 JSON을 써서 Phaser, Godot, Unity가 읽게 해요.tools/render.mjs

나한테 맞을까요

What was hard

Putting one effect into a game meant drawing frames one by one, or buying assets and bending their colours and size to fit. Asking an AI for it in one go tended to come back flat, and since the result was an image, there was little to adjust.

What it does about it

In pixelfx an effect is not an image but one file of code that draws the frame at time t. So one palette turns a fire blue, a flag mirrors it, and a new seed gives a different take of the same kind. Effects with a character are acted out, with a wind-up, a freeze on contact and a target that rocks back, and the skill makes new ones by drawing, looking and fixing in rounds.

How it runs inside

1. 1

   You → Claude Code + pixelfx skill

   Make five takes on a coin pickup sparkleYou ask in one line; the skill first looks for an existing effect that already comes close.skills/pixelfx/SKILL.md
2. 2

   Claude Code + pixelfx skill → src/fx/<category>/<name>.js

   node tools/new.mjs arcane/my-spellIt creates a working starting file and writes a draft, borrowing from two or three nearby effects.tools/new.mjs
3. 3

   src/fx/<category>/<name>.js → tools/render.mjs

   node tools/render.mjs arcane/my-spellThe frames are rendered and gathered into one contact.png.tools/render.mjs
4. 4

   tools/render.mjs → Claude Code + pixelfx skill

   Look at contact.png, fix the worst thingThe agent opens the picture itself and goes round fix-and-render at least three times.skills/pixelfx/SKILL.md
5. 5

   Claude Code + pixelfx skill → tools/check.mjs

   node tools/check.mjs arcane/my-spellCatches pixels drawn off the canvas, loop seams, unseeded randomness and slow frames.tools/check.mjs
6. 6

   tools/render.mjs → Sprite sheet PNG + JSON

   --sheetWrites a transparent PNG grid and Aseprite-style JSON with fps and pivot, read by Phaser, Godot and Unity.tools/render.mjs

Is it for you