스프라이트 시트 해설: 포맷, 도구, 그리고 모든 애니메이션을 변환하는 방법

스프라이트 시트는 애니메이션의 모든 프레임을 고정된 그리드나 스트립으로 배치한 단일 이미지로, 렌더러가 수십 개의 파일을 로드하는 대신 프레임마다 한 영역을 샘플링할 수 있게 해줍니다. 3D 애니메이션에서 프레임을 내보낸 뒤 캐릭터가 떨리거나 배경이 검게 변하는 이유를 고민해 본 적이 있다면, 원인은 대개 스프라이트 시트에 있습니다.

이 페이지는 전체 과정을 다룹니다: 시트가 실제로 무엇인지, 아틀라스와 어떻게 다른지, 그리드와 가로 스트립을 언제 사용하는지, 어떤 포맷으로 내보내는지, 그리고 GIF, 이미지, 동영상 소스를 브라우저에서 사용 가능한 시트로 변환하는 방법. 예시는 우리가 직접 제공하고 테스트하는 파이프라인이기 때문에 자체 도구와 월드 — Agent Sprite Forge, The Cyclops' Island, Mini World, 그리고 3D 게임 빌더 — 를 참조합니다.

스프라이트 시트란 무엇인가

스프라이트 시트는 각 애니메이션 프레임이 규칙적인 그리드에서 동일한 크기의 셀을 차지하는 래스터 이미지입니다. 시트 자체에는 어느 셀이 어느 프레임인지에 대한 의미 정보가 없습니다. 그 매핑은 파일 이름 규칙, 사이드카 JSON 인덱스, 또는 엔진의 애니메이션 설정에 있습니다. 시트를 자르기 위해 반드시 알아야 할 네 가지는 셀의 가로 및 세로 픽셀 크기, 열 수, 행 수, 그리고 원점(대부분의 엔진에서는 좌측 상단이지만 일부 프레임워크는 좌측 하단을 가정)입니다.

이 네 가지 값 중 하나라도 틀리면 실패는 즉각적이고 눈에 띕니다. 셀 너비가 33이어야 하는데 32라면 시트를 진행할수록 모든 프레임이 오른쪽으로 한 픽�씩 밀리며, 이는 느린 수평 드리프트로 보입니다. 원점이 틀리면 애니메이션이 수직으로 뒤집힙니다. 프레임 수가 틀리면 마지막 프레임이 누락되어 걷기 사이클이 접촉 자세 대신 끊김으로 끝납니다. 이는 렌더링 버그가 아니라 메타데이터 불일치입니다.

시트의 구조

시트를 표라고 생각해 보세요. 열과 행은 픽셀 크기에 내재되어 있습니다: 전체 너비를 셀 너비로 나누면 열 수가 되고, 전체 높이를 셀 높이로 나누면 행 수가 됩니다. 512 x 128 크기에 64 x 64 셀이면 8열 2행이므로 16프레임입니다. 셀 사이에 1픽셀의 패딩을 추가하면 계산이 달라집니다: 너비 512픽셀에 64픽셀 셀과 1픽셀 패딩이면 7개 셀만 들어갑니다. 8개가 아니라 7개인 이유는 패딩이 8픽셀을 차지하기 때문입니다. 패딩과 간격은 자르기 코드를 작성하기 전에 반드시 고려해야 합니다.

원점이 중요한 이유

대부분의 WebGL과 캔버스 파이프라인은 이미지의 좌측 상단에 원점을 둡니다. 이는 이미지 편집 도구에서 사용하는 좌표계와 일치합니다. 일부 게임 엔진과 오래된 프레임워크는 Y축을 뒤집고 좌측 하단에 원점을 둡니다. 스프라이트가 거꾸로 보인다면 크기를 조정하기 전에 원점을 확인하세요. 해결책은 보통 한 줄짜리 변환이나 행 순서를 반대로 하여 다시 생성하는 것이지, 전체를 다시 내보내는 것이 아닙니다.

스프라이트 시트 vs 스프라이트시트 vs 스프라이트 아틀라스

표기는 표준화되어 있지 않습니다. 공백이 있는 '스프라이트 시트'는 일반적인 영어 형태이며 대부분의 문서와 튜토리얼에서 사용합니다. 한 단어인 '스프라이트시트'는 공백이 어색한 코드 식별자, 파일 이름, 일부 엔진 API에서 나타납니다. 검색 엔진은 이를 거의 동의어로 취급하므로 두 표기 모두에서 같은 기법을 찾을 수 있습니다.

진짜 구분은 시트와 아틀라스 사이에 있습니다. 스프라이트 시트는 필수 인덱스가 없는 패킹된 이미지입니다. 스프라이트 아틀라스는 같은 패킹된 이미지에 무엇이 어디에 있는지에 대한 기계 판독 가능한 설명 — 보통 각 영역의 이름을 지정하는 JSON, XML, 또는 바이너리 파일 — 을 더한 것입니다. 이 인덱스 덕분에 픽셀 좌표를 하드코딩하지 않고도 대기 프레임, 달리기 프레임, 공격 프레임을 찾을 수 있습니다. 프레임이 균일하고 루프가 단순하다면 일반 시트로 충분합니다. 불규칙한 영역이나 이름이 지정된 상태가 있다면 아틀라스가 필요합니다.

• 시트동일한 크기의 프레임으로 이루어진 그리드 또는 스트립. 메타데이터가 필요 없습니다. 자르기는 산술입니다.
• 스프라이트시트같은 결과물을 한 단어로 쓴 것. 코드와 에셋 파일 이름에서 흔합니다.
• 아틀라스패킹된 프레임에 이름이나 ID를 사각형에 매핑하는 인덱스를 더한 것. 좌표 계산 대신 이름으로 조회할 수 있습니다.

그리드 시트 vs 가로 프레임 스트립

그리드 시트는 이미지를 정사각형에 가깝게 유지하기 위해 프레임을 행과 열로 패킹합니다. 이는 일부 하드웨어에서 텍스처 메모리와 GPU 샘플링이 정사각형이나 2의 거듭제곱 크기에 더 친화적이고, 정사각형 시트가 이미지 편집기에서 미리 보기 더 쉽기 때문에 중요합니다. 그리드는 엔진 측 자르기의 기본값입니다: 셀 크기와 프레임 수를 설정하면 엔진이 그리드를 행 단위로 순회합니다.

가로 프레임 스트립은 모든 프레임을 하나의 행에 배치합니다. 이는 셰이더와 플립북 텍스처가 기대하는 레이아웃입니다. UV 오프셋이 단일 곱셈이 되기 때문입니다: 프레임 인덱스를 프레임 수로 나누면 X 오프셋이 되고, Y는 일정하게 유지됩니다. 스트립을 가정하는 셰이더에 그리드 시트를 전달하면 애니메이션이 행을 넘나들며 의도하지 않은 방식으로 반복됩니다. 그리드를 가정하는 엔진 슬라이서에 스트립을 전달하면 스트립을 하나의 매우 넓은 행으로 취급하거나 행을 전혀 찾지 못합니다.

실패 양상은 처음에는 대개 미묘합니다: 애니메이션은 재생되지만 타이밍이 이상하거나 프레임이 순서를 벗어나 반복됩니다. 애니메이션 로직을 디버그하기 전에 레이아웃이 소비자와 일치하는지 확인하세요. 우리 3D 게임 빌더에서 스프라이트 기반 캐릭터는 엔진이 자르기를 처리하기 때문에 그리드를 사용하고, 불이나 물 같은 셰이더 기반 효과는 머티리얼이 직접 샘플링하기 때문에 스트립을 사용합니다.

어떤 포맷으로 내보낼까

PNG가 안전한 기본값입니다. 완전한 알파를 지원하고, 무손실이며, 모든 엔진과 브라우저가 디코딩합니다. 가장자리가 선명하고 단색인 스프라이트에는 PNG가 잘 압축됩니다. 사진 같거나 음영이 많은 스프라이트에는 WebP가 같은 시각적 품질에서 보통 더 작은 파일을 생성하며, 모든 최신 브라우저가 이를 지원합니다. 파일 크기가 중요하고 대상 런타임이 디코딩할 수 있는지 확인할 수 있다면 WebP를 사용하세요. GIF는 배포 포맷이지 저작 포맷이 아닙니다: 1비트 투명도만 지원하므로 모든 반투명 픽셀이 완전히 불투명하거나 완전히 투명해집니다. 소스에 부드러운 가장자리가 있으면 GIF는 이를 계단처럼 처리합니다.

프레임이 단순한 균일 그리드가 아니거나, 이름이 지정된 상태가 필요하거나, 소비자가 아틀라스를 기대할 때는 JSON 사이드카를 포함하세요. 사이드카는 작고 좌표를 하드코딩할 필요를 없애줍니다. 프레임이 균일하고 애니메이션이 단일 루프라면 생략하고 엔진이 사각형을 계산하게 할 수 있습니다. 스프라이트를 JPEG로 내보내지 마세요. JPEG는 손실 압축이고 알파 채널이 없으므로 투명도가 검은색이나 흰색이 되고, 압축 아티팩트가 스프라이트의 실루엣을 정의하는 선명한 가장자리에 정확히 발생합니다. 이를 해결하는 설정은 없습니다.

모든 변환기

다음은 우리가 제공하는 변환 경로입니다. 각각 브라우저에서 실행되므로 아무것도 설치하지 않고 파일을 넣고 스프라이트 시트를 얻을 수 있습니다. 일반적인 소스인 애니메이션 GIF, 정지 이미지, 동영상 클립을 다룹니다.

애니메이션 GIF의 경우 변환기가 각 프레임을 풀어 시트나 스트립으로 패킹하며, 요청하면 사이드카에 프레임 지연을 보존합니다. 정지 이미지의 경우 변환기가 제공한 이미지 시퀀스를 잘라 균일한 그리드로 배열합니다. 동영상의 경우 변환기가 선택한 비율로 프레임을 샘플링하여 시트에 기록합니다. 샘플 간격과 셀 크기를 제어할 수 있습니다. The Cyclops' Island용 캐릭터나 Mini World용 소품을 만들고 있다면 가지고 있는 소스 포맷으로 시작하여 맞는 변환기를 선택하세요.

• GIF에서 스프라이트 시트로애니메이션 GIF를 프레임별로 풀어 그리드나 가로 스트립으로 패킹합니다.
• 이미지에서 스프라이트 시트로정지 이미지 시퀀스를 가져와 일관된 셀 크기의 균일한 그리드로 배열합니다.
• 동영상에서 스프라이트 시트로선택한 간격으로 동영상에서 프레임을 샘플링하여 시트나 스트립에 기록합니다.
• Agent Sprite Forge3D 게임 빌더에서 사용하는 시트로 캐릭터 프레임을 생성하고 패킹하는 스프라이트 전용 도구입니다.

용어집

스프라이트 시트 문서, 엔진 설정, 셰이더 코드를 읽을 때 나오는 용어들입니다. 정의는 의도적으로 짧게 작성했습니다.

• 아틀라스영역들의 패킹된 이미지에 이름이나 ID를 사각형에 매핑하는 기계 판독 가능한 인덱스를 더한 것.
• 셀시트에서 하나의 프레임을 담는 사각형. 너비와 높이가 셀 크기입니다.
• 프레임 스트립프레임을 단일 가로 행으로 배치한 시트로, 셰이더와 플립북 텍스처에서 사용합니다.
• 플립북시간에 따라 한 영역씩 샘플링하여 애니메이션을 생성하는 텍스처로, 보통 프레임 스트립에서 나옵니다.
• 인덱스아틀라스의 영역에 이름이나 번호를 부여하는 사이드카 데이터. 없으면 자르기는 산술입니다.
• 원점좌표를 측정하는 기준이 되는 이미지나 셀의 모서리로, 보통 좌측 상단 또는 좌측 하단입니다.
• 패딩텍스처 번짐을 방지하기 위해 시트의 셀 사이에 두는 여분의 픽셀. 패딩은 들어갈 수 있는 셀 수를 바꿉니다.
• 간격셀 사이의 거리로, 종종 패딩과 같은 의미로 쓰이지만 별도로 계산되기도 합니다.

그 세계로 걸어 들어가 보세요

스프라이트는 설 곳이 없는 캐릭터입니다. 마지막 단계는 다른 곳에서는 제공하지 않는 것입니다: 방금 만든 시트를 가져다 누군가 걸어 다닐 수 있는 세계 — 작은 섬, 행성, 비 내리는 거리 모퉁이 — 에 넣는 것입니다. 이 사이트의 모든 세계는 하나의 서술 설명으로 만들어졌고 플레이 가능한 페이지로 게시되었습니다.