스프라이트 시트 만들기·자르기

스프라이트 시트란?

스프라이트 시트는 캐릭터 동작이나 아이콘 애니메이션의 장면들을 한 장의 큰 그림에 격자로 붙여 놓은 거예요. 게임 엔진과 웹 페이지는 그림 한 장만 불러온 뒤 보여 줄 칸만 바꿔 가며 애니메이션을 만들어서, 장면마다 파일을 따로 불러오는 것보다 빠르고 가벼워요. 이 도구는 움짤을 시트로 바꾸거나, 받은 시트를 다시 장면별 그림으로 잘라 줘요.

시트 만들기

• 넣을 것 — 움직이는 GIF·WEBP·APNG 하나를 넣으면 모든 장면을 완성된 그림으로 꺼내(장면 차이만 저장된 GIF도 합성) 순서대로 붙여요. 그림 여러 장을 넣으면 넣은 순서대로 붙여요.
• 칸 수·간격·크기 — ‘자동’은 정사각형에 가까운 격자로, ‘한 줄로 모두’는 가로 한 줄로 붙여요. 간격 1~2px은 확대 시 옆 칸 색이 번져 보이는 것을 막아 줘요. 장면 크기가 다르면 가장 큰 장면에 맞춘 칸 가운데에 놓아요.
• 받는 파일 — 시트 PNG, 장면 위치·크기·시간을 담은 JSON(TexturePacker의 JSON Hash 형식이라 Phaser·PixiJS에서 바로 읽어요), 시트를 움직이는 CSS 코드, 확인용 demo.html을 ZIP으로 받아요.

시트 자르기

가로·세로 칸 수와 칸 사이 간격을 넣으면 자를 선을 파란 격자로 미리 보여 줘요. 가로가 세로의 정수배인 한 줄 시트는 칸 수를 자동으로 맞춰요. 빈 칸(완전히 투명한 칸)은 빼고, 장면별 PNG를 ZIP으로 받거나 지정한 장면 시간으로 움직이는 GIF를 만들어요.

어떻게 동작하나요와 한계

움짤 해독과 GIF 저장은 ImageMagick 7(magick-wasm)이 브라우저 작업자에서, 배치와 자르기는 캔버스가 처리해요. 파일은 서버로 보내지 않아요. 빈 공간을 줄이는 자동 배치(빈틈 채우기, 회전 배치)와 장면 테두리 자르기(트림)는 하지 않아요. 칸 크기가 다른 불규칙한 시트는 JSON 없이 자르기 어려워요.

참고한 자료

• Phaser — Texture Atlas(JSON Hash) 불러오기
• MDN — CSS steps() 타이밍 함수
• magick-wasm 0.0.45 (Apache-2.0)