이미지 및 동영상 → 스프라이트 시트 변환기 — PNG 프레임을 게임 아틀라스로

이미지 → 스프라이트 시트 변환기는 PNG 프레임 시퀀스 또는 짧은 동영상을 받아 게임 엔진에 넘길 수 있는 하나의 아틀라스로 묶습니다. Neta Studio에서는 변환이 전부 브라우저에서 실행됩니다. 업로드 대기열도, 서버 왕복도 없고 파일이 내 컴퓨터를 벗어나지 않습니다. 번호가 매겨진 PNG 폴더나 MP4 파일 하나를 드롭하고 열, 행, 셀 크기, 배경 제거를 설정한 뒤 JSON 매니페스트가 함께 나오는 시트로 내보내면 됩니다.

실제로 문제가 생기는 부분은 패킹이 아닙니다. 정렬(frame_10이 frame_2보다 앞에 오는 문제), 패딩(필터가 이웃 셀을 샘플링해 테두리 번짐이 생기는 문제), 셀 크기(시트 크기가 그리드로 나누어떨어지지 않아 마지막 열이 잘리는 문제)입니다. 이 페이지에서는 각 항목을 구체적으로 다루고, 동영상에서 프레임을 잘라내는 방법과 결과물이 실제 3D 월드 안에서 애니메이션되는지 확인하는 방법도 설명합니다.

이미지 또는 동영상 드롭

첫 화면에는 드롭 대상 하나와 두 개의 분기가 있습니다. PNG, WebP, JPG 프레임 폴더나 여러 파일을 드롭하면 도구는 입력을 순서가 있는 이미지 시퀀스로 처리합니다. 브라우저가 디코딩할 수 있는 동영상 파일 하나(MP4, WebM, MOV)를 드롭하면 추출 분기로 전환되어 샘플 레이트를 고르면 WebCodecs 경로로, 실패하면 숨겨진 video 요소를 대체 경로로 사용해 프레임을 뽑아냅니다.

두 분기 모두 같은 편집기로 들어갑니다. 오른쪽에는 셀 그리드, 왼쪽에는 설정 열, 그리고 시트를 제자리에서 훑어볼 수 있는 실시간 미리보기가 있습니다. 내보내기를 누르기 전까지는 디스크에 아무것도 기록되지 않습니다. 정지 이미지는 메인 스레드에서, 동영상은 워커에서 디코딩하므로 4K 클립은 UI 응답성을 유지하지만 300프레임 PNG 시퀀스는 디코딩하는 동안 잠시 화면 그리기를 막습니다.

드롭이 거부되면 원인은 거의 항상 다음 세 가지 중 하나입니다. 브라우저에서 동영상 코덱을 디코딩할 수 없거나(MOV의 HEVC에서 흔함), 이미지 크기가 서로 맞지 않거나, 프레임 수가 설정한 그리드의 셀 예산을 초과한 경우입니다. 도구는 실패한 파일 이름을 알려주며 조용히 버리지 않습니다.

PNG 프레임으로 스프라이트 시트 만드는 방법

정렬이 첫 번째 결정이며 파일 이름이 일관되지 않으면 도구가 잘못 처리할 수 있습니다. 기본 비교기는 각 파일 이름을 텍스트와 숫자 구간으로 나눠 비교하므로 walk_0001.png … walk_0048.png도, walk_1.png … walk_48.png도 올바른 순서로 배치됩니다. 프레임 이름이 타임스탬프나 UUID라면 정렬 순서는 임의적입니다. 먼저 이름을 바꾸거나, 패킹 전에 썸네일 스트립에서 드래그해 순서를 바꾸세요.

프레임 수가 애니메이션에서 예상한 값과 맞는지 교차 확인하세요. 12프레임 대기 루프와 24프레임 걷기 사이클은 작은 크기의 썸네일 그리드에서 똑같아 보입니다. 미리보기를 열고 마지막 셀까지 훑어 첫 프레임으로 되돌아가기 직전에 와야 할 프레임인지 확인하세요. 루프가 깨져 보이는 지점이 보통 그 프레임입니다.

모든 프레임의 너비와 높이는 같아야 합니다. 패커는 첫 이미지의 크기를 기준으로 삼고 이후 크기가 다른 파일은 거부합니다. 내보내기 도구가 자를 때 1px 테두리를 추가했거나 앵커가 다른 스프라이트를 덤프했다면 그 프레임들이 예외이며, 여기서 패딩을 넣기보다 원본에서 고쳐야 합니다.

동영상을 스프라이트 시트로 변환

동영상에서 프레임을 추출할 때 결과의 사용 가능 여부를 좌우하는 숫자가 하나 있습니다. 바로 추출 레이트입니다. 동영상은 보통 24, 30, 60 fps지만 스프라이트 애니메이션에 그만큼 필요한 경우는 드뭅니다. 30 fps 클립을 3초 동안 30 fps로 샘플링하면 90개 셀과 불필요하게 큰 아틀라스가 나옵니다. 같은 클립을 12 fps로 샘플링하면 36개 셀이 나오고, 대부분의 캐릭터 동작에서는 재생 결과를 구분할 수 없습니다.

추출 레이트는 소스가 아니라 애니메이션의 의도된 재생 레이트에서 정하세요. 스프라이트가 게임에서 12 fps로 재생된다면 12 fps로 추출합니다. 리타이밍할 계획이라면 24로 추출하고 엔진에서 한 칸씩 건너뛰세요. 더 큰 시트를 대가로 선택지를 남기는 것입니다.

셀 크기는 적용한 스케일링 이후의 동영상 크기에서 나옵니다. 1920×1080 클립을 480×270으로 스케일하면 480×270 셀이 됩니다. 소스의 종횡비를 유지하세요. 비균등 스케일은 모든 프레임을 왜곡하며 어떤 패딩 설정으로도 고칠 수 없습니다. 동영상에 레터박스가 있으면 나중에 키 아웃하기보다 추출 전에 검은 띠를 잘라내세요. 움직이는 피사체가 띠 색에 닿을 수 있기 때문입니다.

PNG → 스프라이트: 투명도와 패딩

알파 채널을 유지하세요. 사람들이 보고하는 패킹 문제 대부분은 변환기가 내보낼 때 RGBA를 RGB로 평탄화해서 생깁니다. 그러면 캔버스 채우기에 따라 모든 투명 픽셀이 검정이나 흰색이 됩니다. 이 도구에서는 내보내기 캔버스를 불투명 배경 없이 생성하므로 키잉했거나 미리 키잉된 PNG가 패킹 과정에서도 알파를 유지합니다.

패딩이 필요한 이유는 텍스처 필터링이 셀 바깥을 샘플링하기 때문입니다. 스프라이트 가장자리에서 양선형 또는 삼선형 필터가 이웃 셀의 픽셀을 읽어 섞으면서, 옆에 어떤 스프라이트가 있느냐에 따라 색이 변하는 1px 테두리 번짐이 생깁니다. 각 셀 주위에 투명 패딩 2px을 두면 필터가 바깥까지 닿지 않습니다. 패딩 값은 매니페스트에 기록되므로 엔진이 아틀라스를 읽을 때 UV를 패딩만큼 오프셋할 수 있습니다.

이제 대부분의 엔진은 시트 크기가 2의 거듭제곱일 것을 요구하지 않지만, 이를 전제로 하는 하드웨어와 오래된 파이프라인에서는 여전히 도움이 됩니다. (셀 + 2 × 패딩) × 열과 (셀 + 2 × 패딩) × 행이 256, 512, 1024, 2048 또는 4096에 맞도록 열과 행을 설정하세요. 그리드가 나누어떨어지지 않으면 마지막 행이나 열이 잘리거나 빈 공간으로 채워집니다. 도구가 최종 시트 크기를 실시간으로 표시하므로 내보내기 전에 확인할 수 있습니다.

자동 셀 크기 감지

도구가 소스에서 셀 크기를 읽습니다. 이미지 시퀀스에서는 디코딩되는 첫 프레임의 크기를, 동영상에서는 스케일 이후의 출력 크기를 사용합니다. 그 값이 Cell size 필드에 미리 채워지고 기본 그리드 계산에 사용되므로, 64×64 프레임 폴더는 64×64 셀로 열립니다.

피사체 주위의 투명 여백이 피사체보다 클 때는 재정의하세요. 여유 있게 패딩을 넣어 내보낸 스프라이트는 대부분이 빈 셀을 만들어 아틀라스가 필요 이상으로 커집니다. 트림 설정은 모든 프레임에서 비투명 픽셀의 바운딩 박스를 찾아 합집합으로 자릅니다. 프레임별로 자르지 않는데, 프레임별 트림은 애니메이션할 때 스프라이트가 떨리기 때문입니다.

프레임이 일관되지 않을 때는 반대로 재정의하세요. 내보내기 과정 하나가 외곽선을 추가해 시퀀스에 64×64와 66×66이 섞이면 셀 크기 감지는 첫 파일에 고정되고 나머지는 스케일되거나 거부됩니다. 원본을 고치세요. 크기가 맞지 않는 프레임을 올바르게 만드는 셀 크기는 없습니다.

3D에서 애니메이션 확인

스프라이트 시트는 재생될 때만 올바릅니다. The Cyclops' Island는 Neta Studio에서 스프라이트 스타일 캐릭터를 사용하는 플레이 가능한 월드이며, 아틀라스를 움직이는 상태로 확인하는 가장 빠른 방법입니다. 캐릭터를 걸어보고, 루프 지점을 보고, 카메라가 멀어져 필터링이 걸릴 때 패딩 테두리 번짐이 나타나는지 확인하세요.

테스트를 직접 만들고 싶다면 3D 게임 빌더에서 내보낸 PNG와 매니페스트를 장면에 넣고 타이머로 UV 오프셋을 구동할 수 있습니다. 프레임 시간을 선택한 추출 레이트로 설정하면 애니메이션이 의도한 속도로 실행됩니다. 여기서 잘못 보이면 엔진에서도 잘못 보이며, 원인은 거의 항상 매니페스트의 셀 또는 패딩 값입니다.

평면 하나에 시트를 올리고 카메라를 돌리기만 하면 된다면 Mini World가 더 작은 샌드박스입니다. 스프라이트 가장자리의 잘못된 키를 찾아내기에는 대개 충분합니다.

더 많은 무료 도구

변환기는 같은 편집기와 내보내기 형식을 공유하는 세 가지 도구와 나란히 있습니다. 한 곳에서 만든 시트는 변환 없이 다른 곳에서 열립니다.

GIF → 스프라이트 시트는 애니메이션 GIF에서 프레임을 추출합니다. GIF 프레임 지연은 프레임마다 다르므로 도구는 이를 읽어 일정하다고 가정하지 않고 시트의 실효 재생 레이트를 알려줍니다. 스프라이트 시트 → GIF는 반대 방향으로, 셀 위에서 시간 범위를 고르고 지정한 프레임 지연으로 애니메이션 GIF를 내보냅니다. PNG를 배포하지 않고 루프를 공유할 때 유용합니다. 스프라이트 애니메이터는 시트와 매니페스트를 받아 캔버스에서 속도, 방향, 루프 컨트롤과 함께 재생하므로 엔진에 넘기기 전에 프레임 타이밍을 확인할 수 있습니다.

각 도구는 같은 형태의 매니페스트를 내보냅니다. 셀 너비, 셀 높이, 열, 행, 패딩, 순서가 있는 프레임 목록입니다. 따라서 동영상 추출기에서 시작해 애니메이터에서 끝나는 시트는 같은 숫자를 그대로 유지합니다.

그 세계로 걸어 들어가기

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