GIF를 스프라이트 시트로 변환 — 무료, 브라우저 내 실행, 업로드 없음

GIF를 스프라이트 시트로 변환하는 일은 직접 해보기 전까지는 사소해 보입니다. GIF는 이미 팔레트와 프레임별 지연 시간을 가진 전체 프레임의 연속이므로, 실제로 필요한 것은 각 프레임을 디코딩하고 투명도를 올바르게 합성한 뒤 그 프레임들을 텍스처 좌표로 지정할 수 있는 그리드 형태로 하나의 PNG에 배치하는 도구입니다. Neta Studio의 변환기는 이 디코딩 단계를 canvas 요소에서 로컬로 수행하므로 파일이 브라우저에 남아 있고 서버에 닿지 않습니다. GIF를 넣고 열, 행, FPS를 선택한 뒤 하나의 PNG atlas를 다운로드하면 됩니다.

어려운 부분은 그리기가 아닙니다. 팔레트, 타이밍, 그리드 계산입니다. GIF는 투명도를 색상 테이블의 인덱스로 저장하므로, 이미지 뷰어에서 깔끔해 보이던 프레임이 합성된 뒤에는 canvas에서 검정 또는 흰색 매트와 함께 도착할 수 있습니다. GIF의 프레임 지연은 100분의 1초 단위이며 프레임마다 다른 경우가 많아, 단순한 내보내기는 끊기는 시트를 만들어냅니다. 이 페이지에서는 중요한 설정과 도구를 만들면서 마주친 실패 유형을 다룹니다.

GIF를 스프라이트 시트로 변환

변환기는 페이지 맨 위에 있습니다. 드롭 영역, 프레임 미리보기 스트립, 그리고 열, 행, FPS, 알파 채널 유지 토글의 네 가지 컨트롤이 있습니다. 파일을 넣으면 브라우저가 GIF 디코더를 통해 프레임마다 ImageBitmap을 만들고, 각 프레임을 원본 크기의 오프스크린 canvas에 그린 뒤 계산된 셀 위치에 맞춰 atlas canvas로 블릿합니다. 원본 파일은 File API로 읽어 메모리에 보관합니다. GIF를 전송하는 네트워크 요청은 발생하지 않습니다.

출력은 항상 PNG입니다. PNG는 8비트 알파 채널을 제공하며, 이는 캐릭터 작업에 필요합니다. JPEG였다면 모든 부드러운 가장자리가 매트로 뭉개졌을 것입니다. GIF에 투명도가 없어도 atlas는 여전히 RGBA이며 사용되지 않는 알파 바이트는 파일 크기만 차지합니다. GIF가 투명도를 사용한다면, 디코더는 부분 업데이트가 아니라 전체 프레임과 disposal을 요청해야 합니다. 그렇지 않으면 움직이는 요소가 시트 전체에 번집니다.

시트는 파일 브라우저에서 보이는 모습이 아니라 엔진이 샘플링하는 방식에 맞춰 만드세요. 64x64 프레임의 4x4 그리드는 256x256 텍스처이며, 프레임 n은 열 n mod 4, 행 floor(n / 4)에 위치합니다. 대상 엔진이나 셰이더 atlas가 2의 거듭제곱을 요구한다면 시트 크기를 2의 거듭제곱으로 유지하세요. 320x320 시트는 일부 경로에서 패딩되거나 리샘플링되어 스프라이트 가장자리가 흐려집니다.

VRChat용 GIF to 스프라이트 시트

VRChat의 flipbook 셰이더는 텍스처를 그리드가 아니라 하나의 가로 스트립으로 읽습니다. 6x4 시트를 넘기면 첫 번째 행이 반복된 스트립이 나옵니다. UV 계산이 모든 프레임이 같은 행에 있다고 가정하고 프레임 인덱스가 U 축으로만 증가하기 때문입니다. 열을 프레임 수로, 행을 1로 설정하세요. 24프레임 애니메이션은 24x1 시트가 됩니다.

스트립의 전체 너비를 2의 거듭제곱으로 만드세요. 64픽셀 프레임 24개짜리 스트립은 너비가 1536픽셀이며 이는 2의 거듭제곱이 아닙니다. 64픽셀로 깔끔하게 나뉘는 다음 크기는 2048이며 32프레임을 담을 수 있습니다. 사용하지 않는 셀은 투명 픽셀이나 마지막 프레임의 복제본으로 채울 수 있습니다. 2의 거듭제곱이 중요한 이유는 업로드 경로에서 밉맵 생성이나 압축을 거치는 비 PoT 텍스처가 샘플링을 반 텍셀만큼 이동시킬 수 있고, 너비가 1픽셀인 스프라이트는 그 차이를 드러내기 때문입니다.

알파는 셰이더가 아니라 여기 시트에서 처리하세요. 셰이더의 컷아웃 또는 알파 테스트 경로는 거친 도구입니다. GIF의 안티앨리어싱된 외곽선에서 나온 부드러운 가장자리는 임계값에 따라 살아남거나 사라지며, 그 임계값을 아바타마다 조정하는 것은 바람직하지 않습니다. 실제 알파와 프리멀티플라이드에 안전한 가장자리로 PNG를 내보내면 셰이더는 그저 샘플링만 합니다. 루프 속도를 일정하게 유지하세요. VRChat의 flipbook은 고정 시간 단계로 진행되므로, 원본 GIF의 프레임별 지연이 불규칙했다면 내보내기 전에 균일하게 맞추지 않으면 애니메이션이 원본 타이밍과 맞지 않는 일정한 속도로 실행됩니다.

전체 파라미터 목록과 텍스처 설정은 flipbook texture guide를 참고하세요.

GIF를 프레임 그리드("스프레드시트")로

gif to spreadsheet를 검색하는 사람들은 거의 .xlsx를 의미하지 않습니다. 그들은 프레임 그리드를 의미합니다. 각 프레임이 인덱스로 지정될 수 있도록 행과 열로 배치된 프레임 말입니다. 이 단어가 쓰이는 이유는 그리드가 언뜻 보기에 스프레드시트처럼 보이기 때문입니다. 이 도구는 그 그리드를 만들며, 그리드는 스프라이트 시트와 같은 것입니다. 차이는 무엇이라 부르느냐뿐입니다. 중요한 것은 레이아웃이 규칙적이라는 점입니다. 고정된 셀 크기, 고정된 열, 왼쪽에서 오른쪽, 위에서 아래로 진행하는 프레임 순서입니다.

사람들이 때때로 시도하는 대안은 픽셀 아트 편집기에서 프레임을 하나씩 그리며 애니메이션이 맞을 때까지 onion skin을 겹쳐 쌓는 것입니다. 그 작업 흐름은 직접 제작하는 캐릭터에는 좋지만 이미 가진 GIF에는 최악입니다. 픽셀 편집기는 GIF의 프레임별 지연을 읽지 못하며, 24프레임을 손으로 24개 레이어에 가져오면 타이밍이 완전히 사라집니다. 원본이 이미 애니메이션이라면 그리드를 변환하는 쪽이 더 짧은 경로입니다. 픽셀 아트 도구는 트랜스코딩이 아니라 직접 제작할 때 쓸 만합니다.

손으로 그리는 프레임 작업은 pixel art 페이지에서 그리기와 팔레트 부분을 다룹니다.

프레임 크기, 그리드, 투명 배경

대부분의 변환을 망가뜨리는 네 가지가 있습니다. 각각 구체적인 증상이 있습니다.

GIF 투명도가 팔레트에서 죽습니다. GIF는 최대 256색을 사용할 수 있으며 투명도를 팔레트 인덱스로 표시합니다. 프레임이 disposal method 2로 디코딩되면 한 프레임에서 투명했던 영역이 이전 프레임의 배경색으로 복원될 수 있습니다. 해결책은 모든 프레임을 흰색이 아니라 투명 버퍼에 대해 합성하는 것입니다. 미리보기에서 스프라이트 주위에 검정이나 회색 형태가 보인다면 그것은 팔레트의 배경 인덱스이며, 이제 실제 픽셀입니다.

마지막 행이 부분적입니다. 프레임 수가 23이고 6열을 선택하면 온전한 행 세 개와 5개 셀짜리 마지막 행이 나옵니다, 6개가 아닙니다. atlas 높이는 여전히 전체 행 높이로 올림됩니다. 엔진의 flipbook 계산이 온전한 그리드를 가정하고 전체 프레임을 열로 나누어 프레임 인덱스를 도출한다면 루프 끝에서 빈 셀을 읽습니다. 시트를 투명 셀로 채워 온전한 사각형으로 만들거나, 개수가 균등하게 나뉘도록 열을 줄이세요.

프레임 크기는 시트를 나누어야 합니다. 너비 320 시트에서 너비 64의 하위 사각형을 추출하면 정확히 5열이 나옵니다. 너비 330 시트에서는 5열과 프레임이 아닌 10픽셀 나머지가 나옵니다. 시트 크기를 프레임 크기 곱하기 열로 유지하고, 두 축 모두 그렇게 하세요.

원점의 오프바이원. 텍스처 UV 좌표는 보통 왼쪽 아래에서 시작하는 반면 프레임 그리드는 왼쪽 위에서 배치됩니다. 프레임 0이 마지막 프레임으로 렌더링된다면 엔진이 V를 반전하고 있는 것입니다. 열 c, 행 r의 스프라이트 셀은 이미지 공간에서 x = c * width, y = r * height에 있으며, 이를 뒤집힌 UV로 변환하는 것은 1에서 빼는 한 번의 연산입니다.

시트가 다음으로 가는 곳

내보내기는 모든 경우에 같은 PNG입니다. 엔진마다 텍스처를 어떻게 잘라야 하는지, 알파를 어떻게 처리하는지가 다릅니다. 다음을 간단한 참고로 사용하세요.

각 대상에 대해, 커스텀 셰이더 없이 읽을 수 있는 그리드로 시트를 하나씩 내보내세요. 두 대상을 지원한다면 시트를 두 개 내보내세요. VRChat용 가로 스트립과 엔진용 그리드입니다. 같은 GIF에서 다시 내보내는 것이 둘을 맞추기 위해 UV 계산을 작성하는 것보다 시간이 덜 걸립니다.

3D에서 시트가 애니메이션되는 모습 보기

대부분의 변환기는 PNG에서 멈추고 결과 확인은 다른 곳에서 하도록 남겨둡니다. 3D 게임 빌더는 계속 나아갑니다. 시트를 빌보드 평면에 로드해 실제 장면에서 애니메이션되는 모습을 볼 수 있으며, 이것이 그리드와 타이밍이 맞는지 답해주는 유일한 테스트입니다. Agent Sprite Forge는 스프라이트가 컨트롤러를 가진 캐릭터가 되는 곳입니다. 스프라이트가 캐릭터이고, 3D 세계는 그것이 사는 곳입니다.

The Cyclops' Island는 그 아이디어의 플레이 가능한 데모입니다. 브라우저에서 제작된, 돌아다닐 수 있는 작은 3D 장면이며 스프라이트를 캐릭터로 사용합니다. 자신의 시트를 넣으면 데모 프레임을 구동하는 동일한 리그가 여러분의 atlas를 샘플링합니다. 프레임 순서가 틀렸다면 즉시 보입니다. 캐릭터가 뒤로 걷거나 루프 끝에서 빈 셀로 튀는 것입니다. 알파가 틀렸다면 몸 주위에 딱딱한 사각형이 보입니다. 이는 엔진에서 마주칠 것과 같은 실패이며 약 5초 만에 눈에 보입니다.

플레이 가능한 Cyclops' Island 장면을 열고 자신의 atlas로 바꿔 보세요.

더 많은 무료 스프라이트 도구

변환기는 한 조각입니다. 다음 세 가지는 Neta Studio에서 스프라이트 작업 흐름의 나머지를 담당하며, 동일한 브라우저 세션에서 동일한 로컬 파일 처리로 실행됩니다.

그것이 속한 세계로 걸어 들어가기

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

FAQ