스프라이트 시트란? 게임 캐릭터가 움직이는 원리를 정리한 글이 알기 쉽다

도트로 캐릭터를 그리다 보면 언젠가 '스프라이트 시트'라는 말을 만나게 됩니다. note에 Keitaro 님이 쓴 초보자용 해설 글이 원리를 차례대로 정리하고 있어서 참고가 되었기에 소개합니다.

스프라이트란 게임 화면에 표시되는 2D 이미지를 말합니다. 캐릭터, 적, 아이템, 탄, 이펙트 등이 여기에 해당하고, 이것들을 한 장의 큰 이미지에 모아 둔 것이 스프라이트 시트입니다. 걷기 애니메이션이라면 오른발을 내딛은 그림, 두 발을 모은 그림, 왼발을 내딛은 그림을 빠르게 차례로 바꿔 걷는 것처럼 보이게 합니다. 즉 동영상이 아니라 정지 그림을 바꿔서 움직임을 만드는 것입니다.

게임 쪽에서는 큰 이미지를 그대로 보여 주지 않고, 좌표로 영역을 나눠 필요한 컷만 잘라 냅니다. 예를 들어 한 컷이 128×128px이고 가로로 8장 늘어서 있다면, 0~127px, 128~255px처럼 표시 영역을 옮겨 가는 식입니다. 글에서는 가로를 방향(8방향), 세로를 동작(걷기, 공격, 피격, 방어 등)으로 잡아 8방향×7상태=56프레임을 관리하는 예도 나옵니다.

실제로 쓸 때 중요한 것은 프레임마다 기준 위치를 맞추는 것이라고 적혀 있습니다. 발 위치가 컷마다 몇 픽셀씩 어긋나면 애니메이션 중에 캐릭터가 위아래로 덜컹거려 보입니다. 배경을 투명하게 두는 것도 필수입니다.

마지막으로 스프라이트 시트는 관련 그림을 나란히 모은 것이고, 스프라이트 아틀라스는 그리기 효율을 위해 여러 이미지를 한 장의 텍스처에 채워 넣은 것이라는 차이도 정리되어 있었습니다. 개인적으로는 '이미지를 만드는 것보다 게임에서 올바르게 쓸 수 있는 형태로 맞추는 것이 더 어렵다'는 정리가 인상 깊었습니다. 도트를 그리는 분들에게도 출력 단계에서 도움이 될 내용이라고 생각합니다.

출처: note (Keitaro)