스프라이트 시트 → GIF 변환기 — 스프라이트 시트를 애니메이션 GIF로 변환

GIF는 시간 축의 프레임이고, 스프라이트 시트는 공간 축의 프레임입니다. 스프라이트 시트를 GIF로 변환한다는 것은 시트를 올바른 순서로 셀 단위로 자른 뒤, 각 셀에 지연 시간을 지정해 브라우저가 이를 움직임으로 재생하도록 하는 것입니다. 이 변환기는 전적으로 브라우저에서 실행되며, 보통 문제가 되는 부분—마지막 행이 일부만 있는 경우, 불균일한 그리드, 투명 배경—을 처리합니다.

스프라이트 시트를 드롭하고 프레임 크기, 열, 행, FPS를 설정한 다음 GIF를 다운로드합니다. 내보내기 전에 루프를 미리 볼 수 있으며, 이는 마지막 행이 짧거나 지연이 프레임 수로 균등하게 나누어지지 않을 때 중요합니다.

스프라이트 시트를 드롭하세요

도구가 첫 화면입니다. 가입 단계도, 대기열도 없습니다. PNG 또는 GIF를 페이지에 드롭하면 디코더가 시트 크기를 즉시 읽습니다.

설정할 항목은 네 가지입니다: 프레임 너비와 높이, 열, 행, FPS. 프레임 크기는 픽셀 단위의 셀 크기입니다. 열 × 행은 그리드의 수용량입니다. 시트가 512 x 256이고 셀이 64 x 64라면 열 8개, 행 4개, 수용량 32입니다. FPS는 프레임당 지연을 설정합니다. 그런 다음 GIF를 다운로드합니다.

미리보기는 제자리에서 루프를 실행합니다. 프레임이 잘린 것처럼 보인다면—캐릭터의 절반이 다음 셀로 넘어가 있다면—프레임 크기가 몇 픽셀 어긋난 것입니다. 애니메이션이 밀리면 열 수가 잘못된 것입니다. 숫자를 수정하면 미리보기가 갱신됩니다.

작동 방식

파일은 브라우저를 벗어나지 않습니다. 이미지는 브라우저 자체 이미지 디코더로 로컬에서 디코딩되고, 오프스크린 캔버스에 그려진 뒤 픽셀 데이터로 다시 읽힙니다. 업로드 단계는 필요하지 않으므로 존재하지 않습니다.

변환기는 시트를 측정합니다: 너비가 선언된 프레임 너비로 나누어떨어지는지, 높이가 선언된 프레임 높이로 나누어떨어지는지 확인합니다. 둘 다 깔끔하게 나누어지면 그리드는 균일합니다. 그렇지 않다면 나머지를 통해 프레임 크기가 잘못되었거나 고려해야 할 패딩과 간격이 있음을 알 수 있습니다.

그런 다음 그리드를 왼쪽에서 오른쪽으로, 위에서 아래로 순회합니다. 각 셀은 프레임 버퍼로 복사됩니다. 투명 픽셀은 투명하게 유지됩니다. 인코더는 프레임별 지연을 포함해 GIF를 기록하므로, 타이밍은 재생기가 아니라 파일에 있습니다.

12 FPS로 내보낸 32프레임 시트라면 프레임당 지연은 약 0.08초, GIF 기준으로 8센티초입니다. 전체 루프는 32를 12로 나눈 약 2.67초입니다.

마지막 행이 일부만 있는 시트

많은 시트는 끝에 사용되지 않는 셀이 있는 고정 그리드로 내보내집니다. 4 x 4 시트에 프레임이 13개만 들어 있을 수 있습니다. 마지막 행에는 빈 셀이 세 개 있습니다. 프레임 수를 그리드 수용량으로 남겨 두면 그 빈 셀들이 GIF에서 세 개의 빈 프레임이 되어 루프가 번쩍이거나 멈춥니다.

실제 프레임 수를 설정하세요. 애니메이션에 13프레임이 있다면 13으로 설정합니다. 변환기는 13프레임에서 멈추고 빈 셀을 무시합니다. 마지막 행이 다른 셀 너비를 가진 더 짧은 행인 경우에도 마찬가지입니다.

시트 끝에 빈 프레임이 있는지 판단할 수 없다면, 보이는 마지막 프레임보다 하나 큰 값으로 프레임 수를 설정하세요. 내보내고 미리보기를 확인한 뒤, 빈 프레임이 보이면 하나 줄입니다. 시트를 직접 살펴보는 것보다 미리보기에서 확인하는 편이 더 빠릅니다.

투명 배경은 투명하게 유지됩니다

GIF에는 알파 채널이 아니라 하나의 투명 색상이 있습니다. 이는 1비트 알파로, 픽셀이 완전히 투명하거나 완전히 불투명합니다. 이 형식에는 부분 투명도가 없습니다. 가장자리가 부드러운 시트는 별도로 처리하지 않으면 내보낸 뒤 가장자리가 딱딱하게 보입니다.

변환기는 원본 투명도를 유지합니다. 투명 색상을 GIF 팔레트에 기록하고 해당 픽셀을 투명으로 표시합니다. 임계값 미만의 알파를 가진 픽셀은 투명해지고, 그 이상은 불투명해집니다.

피해야 할 실패 유형은 평탄화입니다. 인코딩 전에 시트를 불투명 캔버스에 그리면 투명 픽셀이 캔버스 색상으로 바뀝니다. 보통 흰색이나 검은색이 되며, 새 배경 위에서는 단색 블록으로 보입니다. 원본 PNG의 알파를 유지하고 내보내기 전에 합성하지 마세요.

부드러운 가장자리의 경우, 프레임이 표시될 알려진 색상에 맞춰 가장자리를 매트 처리하세요. GIF가 흰색 페이지에 놓인다면 앤티앨리어싱된 후광이 맞도록 흰색에 매트 처리합니다. 어두운 배경에 놓인다면 그 색상에 매트 처리하세요. 하나의 매트 색상이 두 경우 모두에 맞을 수는 없습니다.

균일한 그리드가 아닌 시트

패킹된 시트는 셀 사이에 간격이 있고 시트 주변에 패딩이 있는 경우가 많습니다. 64 x 64 셀에 2픽셀 간격이 있으면 스트라이드는 66픽셀입니다. 프레임 너비를 64로 입력하면 첫 번째 이후의 모든 셀이 누적되는 2픽셀만큼 어긋나 애니메이션이 밀립니다.

셀 크기에 간격을 더한 값을 스트라이드로, 패딩을 오프셋으로 입력하세요. 일부 내보내기 도구는 전체 시트를 패딩 없이 셀 + 간격으로 기록하고, 다른 도구는 여백을 추가합니다. 파일의 메타데이터를 읽거나 첫 번째 셀을 측정해 두 값을 찾으세요.

마지막 셀 크기가 다를 때—스미어나 효과 프레임 때문에 마지막 프레임이 더 넓은 시트—균일 그리드로는 한 번에 설명할 수 없습니다. 시트를 나누세요: 균일한 프레임은 하나의 범위로 변환기에 통과시키고, 예외 프레임은 따로 추가하거나 변환 전에 공통 셀 크기로 잘라내세요.

시트가 그리드가 아니라 패킹되어 있다면 단순한 스트라이드가 없습니다. 원본 도구에서 그리드로 내보내거나, 프레임별 사각형으로 셀을 잘라 해당 프레임을 개별적으로 입력하세요.

FPS 선택

GIF는 프레임 지연을 센티초 단위로 저장합니다. 10 FPS에서는 프레임당 10센티초입니다. 30 FPS에서는 3.33이 되고, 3으로 반올림되어 약 33 FPS가 됩니다. 이 형식은 임의의 1센티초 미만 지연을 표현할 수 없으므로, 100으로 깔끔하게 나누어지는 FPS를 선택하세요: 10, 20, 25, 50 FPS.

고르지 않은 지연은 끊김을 유발합니다. 24 FPS로 설정하면 지연이 4.17센티초이고 일관성 없게 반올림되므로 일부 프레임이 다른 프레임보다 더 오래 유지됩니다. 짧은 루프에서는 주기마다 한 번씩 걸림으로 보입니다. 대신 20 또는 25를 사용하세요.

루프 길이를 애니메이션의 의도된 재생 시간에 맞추세요. 0.8초로 작성된 걷기 사이클은 0.8초에 반복되는 GIF를 만들어야 합니다. 16프레임이라면 정확히 20 FPS입니다. 프레임 수를 바꾸면 의도된 FPS도 함께 바뀝니다.

대부분의 브라우저는 최소 지연도 적용합니다. 2센티초 미만의 지연은 뷰어에서 종종 약 10센티초로 제한되므로, 50 FPS로 내보낸 GIF가 파일 내용과 관계없이 일부 환경에서 10 FPS로 재생될 수 있습니다. 대상 브라우저에서 내보낸 GIF를 테스트하세요.

반대 방향으로

반대 방향도 흔합니다. 애니메이션 GIF가 있고 이를 스프라이트 시트로 만들고 싶을 때가 있습니다. 즉, 모든 프레임이 그리드에 배치된 하나의 이미지를 만들어 게임 엔진이 애니메이션으로 잘라 쓸 수 있게 하는 것입니다. GIF → 스프라이트 시트 변환기가 이를 수행합니다: GIF 프레임을 디코딩하고, 균일한 그리드로 패킹한 뒤, 프레임 크기와 수를 포함한 PNG로 내보냅니다.

반대 경로의 까다로운 부분은 동일한 투명도 문제입니다. GIF에는 하나의 투명 색상이 있습니다. 이를 시트로 풀면 그 색상이 시트의 투명 픽셀이 되며, GIF에서 평탄화된 앤티앨리어싱 가장자리는 평탄화된 상태로 남습니다. 시트는 GIF가 잃은 것을 그대로 물려받습니다.

프레임 지연도 내보내는 과정에서 사라집니다. 스프라이트 시트에는 타이밍이 없으며, 엔진이나 애니메이터가 지정합니다. 타이밍이 필요하다면 변환 전에 GIF의 FPS를 기록해 두고 대상 애니메이션에 설정하세요.

GIF가 3D에서 재생되는 모습 보기

GIF 루프는 평면 애니메이션입니다. The Cyclops' Island는 Neta Studio에서 만든 플레이 가능한 3D 세계로, 스프라이트가 캐릭터이고 세계는 그 캐릭터가 사는 곳입니다. 변환한 애니메이션을 캐릭터에 로드하고 장면 안에서 움직일 수 있습니다.

그러면 확인해야 할 항목이 달라집니다. 페이지에서는 잘 읽히는 GIF도 세계 안에서는 잘못 읽힐 수 있습니다. 흰색 배경에서 부드러워 보이던 프레임 속도가 움직이는 지오메트리 위에서는 느려 보일 수 있고, 투명도를 위해 고른 매트 색상이 환경과 맞지 않을 수 있습니다.

Mini World와 3D 게임 빌더는 결과를 넣을 수 있는 두 가지 다른 장소입니다. Mini World는 동일한 빌더 화면을 갖춘 작은 세계입니다. Agent Sprite Forge는 내보내고 애니메이션할 수 있는 스프라이트 캐릭터를 생성합니다. 모두 브라우저에서 실행됩니다.

더 많은 무료 도구

스프라이트로 작업한다면 변환기는 체인 중 한 단계일 뿐입니다. 다음은 나머지 도구입니다.

스프라이트 애니메이터: 설정한 FPS로 시트를 재생하며 어니언 스키닝과 프레임 스테핑을 제공하므로, 내보내기 전에 루프를 확인할 수 있습니다. GIF를 먼저 내보내지 않고도 잘못된 프레임을 찾는 데 유용합니다.

스프라이트 시트 메이커: 개별 프레임 이미지를 선택한 셀 크기, 열, 패딩으로 그리드에 패킹합니다. 프레임이 하나의 시트가 아니라 별도 파일로 들어올 때 사용합니다.

스프라이트 리소스 라이브러리: 변환기를 테스트할 수 있는 즉시 사용 가능한 스프라이트와 시트 모음으로, 마지막 행이 일부만 있는 시트와 투명 배경 시트도 포함합니다.

이들 중 어느 것도 업로드가 필요하지 않습니다. 변환기처럼 브라우저에서 실행됩니다.

이 스프라이트가 속한 세계로 들어가 보세요

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

자주 묻는 질문