<p align="center"><img src="https://raw.githubusercontent.com/mankidev/codixel/HEAD/images/logo.png" width="128" alt="Codixel 로고"></p>
Codixel
Codixel은 AI를 이용해 픽셀 아트를 만드는 Claude Code 스킬입니다. 게임 스프라이트, 캐릭터, 불이나 연기, 광선 같은 애니메이션 및 효과 제작이 가능합니다. 이 가이드는 원하는 것을 어떻게 설명해야 하는지, 참고 이미지에서 완성된 애니메이션 스프라이트까지의 단계, 그리고 모든 단계를 확인해야 하는 이유를 다룹니다.
Fire without and with Codixel
왼쪽: Codixel 없이. 오른쪽: Codixel을 사용하여.
단계 (Steps)
God, step by step
- 원하는 것의 실제 이미지를 찾습니다. 본인의 이미지나 라이선스가 허용하는 이미지를 사용하세요.
- AI가 해당 이미지들을 코드로 조합하도록 요청합니다.
- 움직일 수 있도록 뼈대(bones)를 요청합니다.
- 픽셀 아트를 요청하고, 예를 들어 "사실적(realistic)"처럼 어떻게 보여야 하는지 설명합니다.
- 애니메이션 프레임을 하나씩 확인합니다.
- 장면 속에 배치하여 다른 모든 것들과 비교하며 점검합니다.
여기서 뼈대(bones)가 먼저 오고 그 다음에 픽셀이 오는 이유는, 결과물이 여러 이미지로 조합되기 때문입니다. Kinryu와 같은 단일 이미지를 사용할 경우, 먼저 픽셀화한 다음 나중에 뼈대를 추가하는 것이 좋습니다.
God animation
God battle
할 일 (What to do)
Claude Code는 화가가 아닙니다 (Claude Code is not a painter)
Claude Code는 화가처럼 픽셀 아트를 처음부터 그릴 수 없습니다. 코드를 작성할 뿐입니다.
Kinryu, drawn from scratch vs from a reference
왼쪽: Claude Code가 드래곤을 처음부터 그렸습니다. 오른쪽: Claude Code가 참고 이미지를 픽셀로 변환하고 움직였습니다.
예시: Kinryu
Kinryu, step by step
- 황금 용의 사진 하나로 시작합니다.
- 배경을 제거하고 픽셀화합니다.
- 머리부터 꼬리까지 라인을 찾아 몸통을 따라 이동시킵니다.
- 장면 안에 배치합니다.
Kinryu animation
Spines (척추)
Black leopard walking, with its spine and leg bones
Codixel은 동물의 척추(spines)를 이해하는 데 능숙합니다. 척추를 따라 몸통, 다리, 꼬리를 만들고 실제 동물이 걷는 방식대로 움직이게 합니다.
Dither (디더링)
The same scene drawn four ways
픽셀 아트는 색상이 적기 때문에, 하늘이나 공처럼 한 색상에서 다음 색상으로 부드럽게 변화하려면 트릭이 필요합니다:
- 스무스(Smooth): 수백 가지의 색상을 사용합니다. 흐릿한 사진처럼 보입니다.
- 밴드(Bands): 평평한 줄무늬입니다. 그 사이에서 명확한 선을 볼 수 있습니다.
- 전체 디더링(Dither everywhere): 부드럽지만 거친 느낌이 납니다.
- 밴드와 디더 스트립(Bands and a dither strip): 평평한 색상이며, 두 밴드가 만나는 지점에서만 혼합됩니다. Codixel은 이 방식을 사용합니다.
Hue shifting (색조 이동)
Five greens without and with hue shifting
색조 이동(Hue shifting)은 팔레트의 각 색상의 색조(hue)를 밝기(lightness)와 함께 변화시킵니다.
Outline (외곽선)
The same clover with no outline, an outline, and an outline with rim light
외곽선은 스프라이트(sprite)로부터 색상을 가져옵니다. 림 라이트(Rim light)는 빛을 마주하는 가장자리를 한 단계 더 밝게 만듭니다.
Sound (사운드)
게임 사운드를 AI가 만들게 하지 마세요. AI가 만든 사운드는 쉽게 알아챌 수 있습니다. 대신 인터넷에서 소리를 찾도록 하세요.
절대 "이것을 해라" 또는 "이것을 복사하라"고 지시하고 자리를 떠나지 마세요
AI에게 절대 "이것을 해라" 또는 "이것을 복사하라"고 지시하고 떠나지 마세요. 작동하는 내내 확인하고, 얻은 결과물이 원하는 것인지 확실히 하세요.
이 README가 작성되는 동안 AI는 제가 요청하지 않은 많은 것들을 추가했습니다. 이것이 바로 모든 단계를 확인해야 하는 이유입니다.
Heirs of the Valley, first version vs now
매 단계마다 결과를 살펴보세요. 설명한 대로 보이나요?
무언가 잘못되었다면, 무엇이 정확히 잘못되었는지 말하고 단계를 다시 실행하세요. 단계가 올바를 때만 다음으로 넘어가세요.
Install (설치)
git clone https://github.com/mankidev/codixel ~/.claude/skills/codixel
Claude Code는 다음 시작 시 이를 로드합니다. 픽셀 아트를 요청할 때 실행됩니다.
Examples (예시)
Astral Prison, reference vs result
Astral Prison animation
Beams, smoke explosion, fire breath and hell fire
Mini characters
Hollowchain
Ocean animation
Waterfall animation
River animation
Beach wave animation
Ruby gem animation
Blue, violet, crimson and emerald space backgrounds
Crimson background with moving layers
License (라이선스)
MIT. LICENSE 참조.
