혼자 만드는 게임에 넣은 타격 효과가 둥둥 떠 보인다면, 그 느낌을 말로 지적해 코드를 고치게 할 수 있어요. pixelfx 픽셀 아트 효과는 Patch가 공개한 라이브러리인데, 새 효과를 만들고 고치는 Claude Code 스킬이 함께 들어 있거든요. 저장소 README가 예로 든 요청은 “This hit effect feels floaty. Make it punchier.”(이 타격 효과는 둥둥 뜬 느낌이니 더 타격감 있게 해 줘)예요.
이미지 모음처럼 보이지만 효과는 모두 코드예요. 2026년 11월 9일 기준 README 표의 21개 분류를 더하면 244개로, 소개 문구의 숫자와 맞죠. 효과마다 src/fx/<category>/<name>.js 파일 하나를 차지하고, 공식 갤러리(patch-gg.github.io/pixelfx)에서 재생해 볼 수 있대요. 수정 요청이 곧 코드 수정이 되는 구조라서 이 스킬이 성립한다고 봐요.
다섯 개를 만들고 둘만 남기는 시안 요청
README의 또 다른 예시는 코인 획득 반짝임이에요. “Make five takes on a coin pickup sparkle and show me the best two.“는 시안 다섯 개를 만들고 그중 나은 두 개를 보여 달라는 말이죠.
작은 플랫폼 게임을 혼자 만들고 있다면 이 요청 방식이 잘 맞아요. 반짝임이 게임에 어울리는지는 결국 눈으로 판단할 일이니까요. 하나를 받아 계속 고치기 전에 고를 후보부터 여럿 받는 셈이에요.
둥둥 뜨는 타격을 말로 고치는 수정 요청
느낌을 그대로 말하는 요청은 스킬의 작업 방식과 이어져 있어요. README는 그 방식을 draft, render, look, refine으로 적어요. 코드로 그리고, 렌더링하고, 결과를 눈으로 보고, 다듬는 반복이죠.
손으로 만들 때의 명령을 보면 이 반복이 어떻게 돌아가는지 알 수 있어요.
node tools/new.mjs arcane/my-spell # 동작하는 시작점 만들기 (반복 효과는 --loop 추가)
node tools/render.mjs arcane/my-spell # records/arcane/my-spell/contact.png 만들기
node tools/check.mjs arcane/my-spell # 넘침, 이음매, 시드 없는 난수, 느린 프레임 검사
contact.png는 만화 한 페이지처럼 프레임을 한 장에 모은 확인용 이미지라고 보면 돼요. README의 순서는 이 이미지를 보고 가장 나쁜 점 하나를 고친 뒤 다시 렌더링하는 거예요. 그래서 Claude Code에 요청할 때도 불만을 한꺼번에 늘어놓기보다 한 번에 하나씩 짚는 편이 이 순서와 맞아요.
README는 이 방법이 Hugo Duprez의 글 「How to make (good) pixel art effects with Claude」에서 왔다고 밝혀요. 요지는 코드를 찰흙처럼 다루고, 눈을 믿고, 레퍼런스를 먹이라는 거예요. 원하는 느낌의 참고 자료가 있다면 요청에 함께 넣어 볼 만해요.
스티커 같던 효과에 몸을 붙이는 act 데이터
README는 효과만 있으면 스티커처럼 보인다고 말해요. 현재 README 기준으로 캐릭터가 나오는 효과 61개와 기술 12개가 준비 동작과 접촉 순간의 멈춤을 데이터로 갖고 있어요. 대상의 흔들림과 회복 동작도 여기에 들어가죠. 10월 31일에 올라온 0.3.0 커밋의 제목이 “give the effects a body that performs them”(효과에 그 동작을 해내는 몸을 준다)이에요.
검을 휘두르는 sword-slash 예시는 효과 시작 0.55초 전부터 자세를 잡고 0.3초 전에 준비 동작을 해요. 0.06초에 대상에 닿으면 0.14초 멈추고, 화면이 흔들리며 대상이 밀려나요. “Give this spell a wind-up and make the enemy react to it.” 같은 요청이 닿는 부분도 여기예요.
코드에서 이 동작까지 재생하려면 createFx 자리에 createAct를 쓰면 돼요.
import { createAct } from "pixelfx";
import * as slash from "pixelfx/fx/melee/sword-slash";
const act = createAct(slash, { x: 80, y: 140 });
이렇게 하면 캐릭터와 대상이 함께 그려지고, update는 타격 멈춤 동안 스스로 멈춰요. 몸이나 대상을 빼고 싶을 때는 draw에 { body: false }나 { target: false }를 주면 돼요.
표본 프레임이 놓치는 움직임까지 보는 확인 명령
한 장짜리 이미지로는 움직임 문제가 잘 드러나지 않아요. README도 움직임 버그는 표본에 나타나지 않는다고 짚고, node tools/act.mjs로 동작을 12fps 연속 단계로 보여 줘요. --gif와 --mp4는 움직임을, --all은 모든 프레임을 보여 주는 옵션이에요.
모든 난수는 효과의 seed에서 나와서 같은 프레임은 항상 같게 나온대요. 고치기 전후를 비교할 때 달라진 부분이 난수 때문인지 코드 때문인지 헷갈리지 않는 구조죠. 스킬에 맡기더라도 최종 판단은 렌더링 결과를 여는 사람이 내려야 해요.
엔진에 따라 갈리는 코드와 스프라이트 시트
효과가 코드라고 해서 모든 엔진에서 그 코드를 돌리는 건 아니에요. 아래 표는 프로젝트 환경별로 쓰는 경로를 나눈 거예요.
| 상황 | 쓰는 것 | 시작 방법 |
|---|---|---|
| canvas, Phaser, PixiJS, Kaplay, three.js | 코드(의존성 없음) | npm i github:patch-gg/pixelfx 또는 src/core와 효과 파일 복사 |
| Godot, Unity, GameMaker, Defold, LÖVE, Bevy | 스프라이트 시트 | node tools/render.mjs ice/frost-nova --sheet |
| 캐릭터까지 시트에 굽기 | 동작 시트 | node tools/act.mjs <id> --sheet |
| 내 캐릭터에 붙이기 | 타이밍 데이터 | slash.act 또는 시트 JSON의 meta.pixelfx.act |
시트 명령은 투명 PNG와 Aseprite 형식 JSON을 만들어요. README는 Phaser의 atlas 로더와 Godot·Unity용 Aseprite 임포터가 이 JSON을 읽는다고 설명하고, “Export the fire and explosions categories as sprite sheets for Godot.“처럼 분류째 내보내는 요청도 예로 들어요.
놓치기 쉬운 건 아래 두 줄이에요. 기본 시트에는 효과만 들어가고 캐릭터는 빠져요. 내 캐릭터를 쓴다면 windup만큼 먼저 준비 동작을 시작하고, 타격마다 freeze 초 동안 업데이트를 멈추면 돼요. 몸 위에 그리는 서리나 독 같은 효과는 기본 더미를 칠하니, 그런 효과를 이미 배포했다면 다시 생성하라는 안내도 함께 있어요.
색만 바꾸고 싶다면 코드를 고칠 필요가 없어요. 어두운 색부터 밝은 색까지의 hex 배열을 palette로 넘기면 돼요.
상업 게임에도 쓰는 MIT 라이선스와 설치 방법
스킬은 Claude Code에서 아래 두 줄로 설치해요. skills/pixelfx를 ~/.claude/skills/에 복사하는 방법도 있어요.
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfx
라이선스는 코드와 효과 모두 MIT이고, README는 상업적 이용을 포함해 어디에나 쓸 수 있다고 밝혀요. 다만 gallery/fonts의 Patch Pixel 글꼴은 여기서 빠져요. 갤러리 글꼴까지 가져다 쓸 생각이라면 NOTICE.md를 먼저 봐 두세요. 스킬을 돌릴 때 드는 사용량은 쓰고 있는 Claude Code 요금제에서 따로 확인해 두면 돼요.
빛 효과를 시트로 넣을 계획이라면 이슈 목록의 #4를 봐 두는 편이 나아요. 시트가 색에 투명도를 미리 곱한 값으로 기록돼 반투명 빛이 어둡게 나온다는 보고가 11월 3일에 올라왔고, 11월 9일 기준 열려 있어요. PR 목록의 알파 합성 수정 #7도 아직 열려 있으니, 게임 화면에서 빛이 어두워지는지부터 보면 돼요. Godot에서 시트 대신 코드로 쓰고 싶을 때는 이슈 #9의 GDScript 포팅 미리보기가 있지만, 커뮤니티가 올린 것이고 공식 포팅은 아니에요.
처음 시험한다면 지금 게임에 필요한 작은 효과 하나로 시작해 보면 돼요. 쓸 만해질 때까지 몇 번 고쳤는지와 check.mjs를 통과했는지를 적어 두면, 이 스킬이 내 프로젝트에 맞는지 판단할 근거가 생겨요.
