2D 스프라이트 애니메이션 에디터는 웹 브라우저 상에서 다수의 스프라이트 이미지들을 하나로 묶어 애니메이션 모션을 실시간으로 재생하며 미세 설정(프레임별 딜레이, 기준 피벗점, 충돌 상자 등)을 수행할 수 있는 고성능 2D 게임 개발 리소스 제작 도구입니다.

로컬 웹 기술을 활용해 이미지 파일이 외부 서버로 업로드되지 않으므로 안심하고 안전하게 개발 작업을 진행하실 수 있습니다.

🌟 핵심 주요 기능

🏃‍♂️ 풍부한 빌트인 데모 캐릭터 프리셋:
- 도구를 열자마자 즉시 테스트할 수 있도록 픽셀 전사 달리기, 통통 슬라임 점프, 마법 폭발 이펙트의 3가지 고품질 애니메이션 프리셋을 제공합니다.
📁 강력한 프레임 가져오기:
- 개별 파일 업로드: 다중 파일 선택을 지원하며, 파일명을 기준으로 자연스럽게 정렬하여 타임라인 프레임으로 삽입합니다.
- 스프라이트 시트 격자 슬라이싱: 하나의 시트 이미지를 행(Rows)과 열(Cols) 크기로 자동 분할하여 프레임으로 분리해줍니다.
🎯 정밀한 피벗(Pivot/기준점) 에디터:
- 캐릭터의 회전/이동의 중심이자 물리 위치의 중심이 되는 피벗을 마우스 더블클릭이나 수치 제어로 변경할 수 있습니다.
- 특정 프레임의 피벗 위치를 전체 프레임에 한번에 덮어씌우는 일괄 적용 기능도 완비되어 있습니다.
⚔️ 공격/피격 충돌 판정 상자 (Hitbox/Hurtbox):
- 2D 액션, 대전, RPG 게임 등에서 필수적인 피격 범위(Hurtbox, 청색) 및 공격 리치 범위(Hitbox, 적색)를 마우스로 직접 드래그하여 그릴 수 있습니다.
- 생성된 상자의 크기와 위치, 라벨 이름을 개별 편집하고 모든 프레임에 일괄 복사할 수 있습니다.
🧅 어니언 스킨 (Onion Skinning):
- 현재 프레임의 앞/뒤 프레임을 반투명한 붉은색과 초록색 잔상으로 겹쳐 표시해 주어 모션 간의 연결성을 눈으로 보며 자연스럽게 교정할 수 있습니다.
💾 다양한 내보내기 포맷:
- 스프라이트 시트 (PNG): 개별 프레임들을 하나의 가로 스트립 시트로 자동 배치하여 다운로드합니다.
- GIF 애니메이션 (GIF): 프레임들을 설정된 속도(FPS)에 맞춰 즉시 재생되는 루프 형태의 움짤 파일로 변환하여 다운로드합니다. (256컬러 제한, 단색 배경으로 처리됨)
- APNG 애니메이션 (PNG): 32비트 무손실 투명도(Alpha Channel)를 완벽히 지원하는 움직이는 PNG 포맷으로 다운로드합니다. 원본의 반투명 픽셀이나 투명 배경을 온전히 활용할 수 있어 게임 엔진 리소스용으로 매우 훌륭합니다.
- WebP 애니메이션 (WebP): 현대적인 고압축 이미지 포맷인 움직이는 WebP 파일로 내보냅니다. 투명도를 완벽히 지원하면서도 용량이 극적으로 가벼워 웹 서비스 배포 및 인게임 리소스 최적화에 탁월합니다.
- 좌표 데이터 (JSON): 게임 엔진(Unity, Godot, Cocos, WebGL 등)에 주입할 수 있도록 각 프레임의 물리 크기, 피벗, 충돌박스 Rect 배열을 구조화하여 내보냅니다.
- 프로젝트 세이브/로드 (JSON): 편집 중인 전체 레이아웃 상태(이미지 Base64 소스 포함)를 세이브 파일로 저장하여, 나중에 그대로 이어서 작업할 수 있습니다.

🛠️ 사용 방법 (How to Use)

테스트 캐릭터 선택: 상단 ‘데모 캐릭터 불러오기’에서 전사, 슬라임, 이펙트 중 하나를 클릭하여 도구의 기본 작동을 확인해 봅니다.
새 프레임 등록:
- ‘전체 삭제’를 눌러 비운 뒤 개별 이미지 여러 장을 드래그해서 넣거나, 하나의 시트 이미지를 올린 뒤 행/열 개수를 적고 ‘격자 슬라이싱’을 누릅니다.
애니메이션 제어:
- 중앙의 플레이어 인터페이스로 속도(FPS)를 조절하고, 루프 반복 옵션 및 루프 재생을 확인합니다.
- 필요 시 캔버스에서 드래그(오른쪽 마우스/Shift 드래그/모바일 터치 드래그) 및 스크롤을 이용해 줌인/아웃하여 세부 디테일을 점검합니다.
피벗 및 히트박스 편집:
- 편집하려는 특정 프레임 카드를 하단 타임라인에서 클릭합니다.
- 캔버스 위에서 원하는 위치를 더블클릭하면 피벗이 이동합니다.
- 캔버스 안에서 마우스를 드래그하면 그 영역만큼 충돌 상자(Hitbox)가 생성됩니다. 우측 패널에서 공격(Hitbox)용인지 피격(Hurtbox)용인지 스위칭하고 라벨을 붙여줍니다.
리소스 출력:
- 우측 하단의 내보내기 도구를 사용하여 게임 프로젝트에 맞춘 PNG 시트 및 JSON 메타데이터, 또는 간단히 공유하고 활용할 수 있는 GIF, APNG 및 고압축 최적화된 WebP 움짤을 내려받습니다.

💬 자주 묻는 질문 (FAQ)

Q1. 캔버스 위에 그려지는 피벗과 충돌박스는 이미지 파일에 직접 구워지나요?
- A. 아닙니다. 피벗과 히트박스는 렌더링에 직접 침범하지 않고 좌표 데이터로 관리됩니다. 이미지는 순수하게 투명한 픽셀 형태 그대로 가공되어 PNG로 내려가고, 위치 정보는 동반되는 JSON 텍스트 파일에 기재되므로 게임 엔진 코드 안에서 데이터를 파싱해 사용하시면 됩니다.
Q2. 모바일 브라우저에서도 사용에 제약이 없나요?
- A. 네, 모바일 기기의 터치 드래그를 이용한 캔버스 뷰포트 이동과 더블 핑거 핀치-투-줌(Pinch-to-zoom)을 완벽히 하드웨어 가속 수준으로 지원하도록 반응형 제스처 처리가 설계되어 있습니다. 현장에서도 태블릿 등으로 손쉽게 기획 검증이 가능합니다.
Q3. 다른 프로그램에서 작업하던 프로젝트를 가져오고 싶어요.
- A. 본 도구의 ‘프로젝트 세이브’는 모든 이미지 픽셀 정보를 인코딩하여 JSON에 저장합니다. 이 JSON 세이브 파일을 ‘프로젝트 로드’를 통해 올리면, 외부 서버 없이 즉시 다른 브라우저나 컴퓨터에서도 동일한 프레임들과 히트박스 위치를 그대로 복구하여 로드할 수 있습니다.