스프라이트 시트 설명: 형식, 도구 및 모든 애니메이션을 변환하는 방법

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

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

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

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

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

시트의 구조

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

원점이 중요한 이유

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

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

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

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

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

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

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

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

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

어떤 형식으로 내보낼까

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

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

모든 변환기

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

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

• GIF를 스프라이트 시트로애니메이션 GIF를 프레임별로 풀고 프레임을 그리드나 가로 스트립으로 패킹합니다.
• 이미지를 스프라이트 시트로정지 이미지 시퀀스를 받아 일관된 셀 크기의 균일한 그리드로 배열합니다.
• 비디오를 스프라이트 시트로비디오에서 선택한 간격으로 프레임을 샘플링해 시트나 스트립에 기록합니다.
• Agent Sprite Forge3D 게임 빌더에서 사용하는 시트로 캐릭터 프레임을 생성하고 패킹하는 스프라이트에 초점을 맞춘 우리의 도구입니다.

용어집

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

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

그것이 속한 월드로 걸어 들어가기

스프라이트는 설 곳이 없는 캐릭터입니다. 마지막 단계는 다른 곳에서는 제공하지 않는 것입니다. 방금 만든 시트를 가져와 누군가 걸어 다닐 수 있는 월드 — 작은 섬, 행성, 비 오는 길모퉁이 — 에 넣어 보세요. 이 사이트의 모든 월드는 하나의 글로 된 설명에서 만들어졌고, 플레이할 수 있는 페이지로 게시되었습니다.