SpriteForge

SPRITE WORKFLOW GUIDE

스프라이트 애니메이션 제작 흐름: 분할부터 피벗 정렬까지

스프라이트 애니메이션에서 자주 생기는 문제는 프레임 그림 자체보다 프레임마다 다른 여백과 기준점입니다. 같은 크기로 잘라낸 이미지라도 캐릭터의 발 위치나 중심이 조금씩 달라지면 재생할 때 화면이 흔들립니다. 이 문서는 SpriteForge의 실제 처리 방식에 맞춰, 시트 분할 → 피벗 정렬 → 애니메이션 확인 → 시트 재구성 순서로 작업하는 이유와 확인 기준을 정리합니다.

1. 먼저 원본 시트의 규칙을 확인합니다

분할 전에 가장 먼저 볼 것은 전체 이미지 크기와 행·열 구조입니다. 예를 들어 1024×512 이미지가 8열 4행이라면 각 셀은 128×128입니다. 반대로 원본 크기가 행·열 수로 정확히 나누어지지 않으면 마지막 프레임 경계가 잘리거나 1픽셀씩 밀릴 수 있습니다. 이런 경우에는 분할 전에 제작 툴에서 패딩이나 셀 간격이 포함되었는지 확인해야 합니다.

자동 분할은 이미지를 이해해서 프레임을 찾는 방식이 아니라 사용자가 지정한 격자 규칙을 적용하는 방식이 가장 예측 가능합니다. 프레임 크기가 모두 동일한 애니메이션이라면 격자 분할이 빠르고 재현성도 높습니다.

2. 파일 순서는 이름으로 고정하는 편이 안전합니다

브라우저에서 여러 파일을 선택할 때 대부분 선택 순서가 유지되지만, 운영체제와 파일 선택 방식에 따라 사람이 예상한 정렬과 달라질 수 있습니다. 애니메이션 프레임에는 idle_001.png, idle_002.png처럼 자리수를 맞춘 번호를 붙이는 것을 권장합니다. 1, 2, 10처럼 번호 길이가 달라지면 문자열 정렬에서 10이 2보다 먼저 오는 문제가 생길 수 있기 때문입니다.

3. 피벗은 이미지 중심이 아니라 동작 기준점입니다

모든 프레임을 단순히 이미지 중심에 맞추면 항상 좋은 결과가 나오지는 않습니다. 걷기 애니메이션은 발이 바닥에 닿는 지점을 기준으로 보는 것이 자연스럽고, 상체 중심의 공격 모션은 몸통 중심이나 무기 손잡이 위치가 더 안정적인 기준이 될 수 있습니다. 따라서 피벗 정렬의 목적은 “모든 PNG를 같은 크기로 만들기”가 아니라 “게임에서 같은 좌표에 놓았을 때 캐릭터가 불필요하게 흔들리지 않게 하기”입니다.

투명 여백이 프레임마다 다르면 이미지 중앙 좌표 역시 달라집니다. 이때 먼저 투명 여백을 무조건 제거하면 오히려 애니메이션 기준점이 더 달라질 수 있습니다. 애니메이션 프레임에서는 트리밍과 피벗 정렬을 별개 작업으로 보고, 최종 사용 환경에서 어떤 기준점을 유지할지 먼저 정하는 편이 좋습니다.

4. 정렬 뒤에는 반드시 실제 FPS로 재생합니다

정지 이미지로는 1~2픽셀의 흔들림을 놓치기 쉽습니다. 프레임을 8 FPS, 12 FPS처럼 게임에서 사용할 속도로 반복 재생하면 작은 위치 오차가 즉시 보입니다. 흔들림이 있다면 먼저 프레임 순서가 올바른지, 공통 캔버스 안에서 캐릭터가 같은 기준점에 있는지 확인합니다. 그림 자체의 모션이 큰 것인지 이미지 경계 차이 때문인지 구분하는 것이 핵심입니다.

빠른 공격이나 피격 모션은 중간 프레임이 적어도 자연스럽게 느껴질 수 있지만, 대기와 걷기처럼 반복 재생되는 애니메이션은 처음과 마지막 프레임의 연결이 특히 중요합니다. 루프 경계에서 위치가 튀면 애니메이션 전체가 불안정하게 보입니다.

5. 다시 시트로 합칠 때는 가장 큰 프레임을 기준으로 합니다

정렬된 프레임의 크기가 서로 다를 경우 공통 셀 크기를 결정해야 합니다. SpriteForge의 시트 합치기 도구는 선택된 이미지 중 가장 큰 너비와 높이를 셀 크기로 사용하고 더 작은 이미지를 셀 중앙에 배치합니다. 이 방식은 셀 크기를 자동으로 통일하기에는 편하지만, “가운데 정렬” 자체가 피벗을 보장하지는 않습니다. 따라서 합치기 전에 이미 피벗 정렬이 끝나 있어야 합니다.

실전 체크리스트

관련 도구

스프라이트 시트 분할 → 스프라이트 피벗 자동 정렬 → 애니메이션 미리보기 → 스프라이트 시트 합치기 순서로 한 번에 검수할 수 있습니다.