스프라이트 시트 제작 가이드

스프라이트 시트는 여러 장의 프레임을 한 PNG 안에 배열한 이미지입니다. PNG 자체가 움직이는 것은 아닙니다. 재생하는 쪽에서 프레임 영역과 순서, 속도를 지정해야 합니다. GIF는 재생 타이밍을 가진 애니메이션이고, ZIP은 개별 프레임 파일을 묶어 받는 방식입니다.

그림을 저장한 PNG에는 편집용 레이어, 노드 연결, 리깅 설정이 모두 들어 있지 않습니다. 나중에 수정하려면 결과 이미지와 함께 해당 도구의 작업도 보관하세요. 3D 모션을 다른 프로그램에서 계속 사용할 목적이면 GLB 저장이 필요합니다.

• 영상·GIF: 스프라이트에서 프레임을 추출하고 구간·순서·배경을 정리합니다.
• 여러 이미지 또는 기존 시트: 스프라이트 도구의 이미지 합치기나 시트 불러오기를 사용합니다. 기존 시트는 분할 격자를 먼저 맞춥니다.
• 사진·일러스트·GIF·3D 모델: 픽셀화에서 프리셋과 노드로 도트 스타일을 조절합니다.
• 이미지에서 3D 제작 또는 기존 모델 수정: 3D 작업실을 거쳐 픽셀화로 보냅니다.
• 직접 그린 캐릭터: 에디터의 레이어와 타임라인으로 프레임을 만들고 시트로 내보냅니다.

같은 ‘스프라이트’라는 이름이라도 도구마다 입력과 배치 설정이 다릅니다. 원하는 작업이 프레임 정리인지, 도트 스타일 변환인지부터 구분하면 불필요한 변환을 줄일 수 있습니다.

스프라이트 도구에 영상을 열고 필요한 동작 구간과 추출 설정을 정합니다. 영상 재생 가능 여부는 파일 확장자뿐 아니라 브라우저의 코덱 지원에도 영향을 받습니다. 긴 영상은 짧은 구간으로 시작해 처리 속도와 결과를 먼저 확인하세요.

추출 후에는 시작·끝의 대기 프레임, 동작이 가려진 프레임, 반복되는 프레임을 확인합니다. 중복 제거를 사용할 때도 중요한 접지·타격 포즈까지 없어지지 않았는지 다시 재생해 보세요. 선택된 프레임 수가 실제 내보내기 수에 영향을 줍니다.

타임라인에서 순서를 조절하고 필요하면 역순이나 핑퐁을 적용합니다. 핑퐁은 왕복 동작에 어울리지만, 걷기·달리기에 쓰면 발이 뒤로 움직이는 동작까지 포함될 수 있습니다. 첫 프레임과 마지막 프레임 사이의 연결을 따로 확인하세요.

프레임 수는 서로 다른 자세의 개수이고, FPS는 초당 재생하는 프레임 수입니다. 같은 8프레임도 8 FPS에서는 약 1초, 16 FPS에서는 약 0.5초에 재생됩니다. 불필요한 중복을 줄인 뒤 속도를 맞추세요. PNG 시트만 전달할 때는 FPS를 별도로 기록해야 합니다.

단색 배경은 크로마키로 색을 찍고 허용 범위를 조금씩 높여 제거합니다. 가장자리에서 연결된 배경만 없애려면 모서리 기반 제거를 검토하세요. 배경색과 비슷한 의상·눈·장비가 함께 지워지지 않았는지 투명 배경과 어두운 배경에서 확인합니다. 색번짐 제거는 배경색이 남은 테두리를 정리할 때 사용합니다.

발이 바닥에 서는 캐릭터는 바닥 기준점을 일정하게 잡으세요. 프레임마다 여백을 다르게 자르면 재생할 때 몸이 흔들려 보입니다. 스프라이트 도구의 기준점 정렬과 미리보기를 활용하고, 점프처럼 의도한 높이 변화까지 없애지는 마세요.

픽셀화에서 GLB·glTF·VOX를 열 수 있습니다. 외부 파일을 참조하는 glTF는 GLB로 묶거나, 3D 작업실에서 .bin·텍스처 파일을 함께 선택해 준비하세요. 이미지에서 모델을 만들었다면 3D 작업실에서 텍스처와 리깅을 확인한 뒤 ‘픽셀화로 보내기’를 사용합니다.

3D 입력에서 리그와 클립을 선택합니다. 기존 뼈대가 잘 잡혀 있으면 파일 리그를 먼저 확인하고, 자동 리깅이 필요하면 마커 위치를 조절하세요. 동작 기준 자세의 기본값은 ‘파일의 쉬는 자세’입니다. 팔·다리·몸통·머리의 동작 크기는 부위별로 줄일 수 있으며, 모션이 없는 모델은 정지 이미지로 처리됩니다.

3D 입력 상단의 방향 수는 1·4·8·16방향 중 필요한 시점을 정합니다. 회전(°)은 촬영 방향, 내려보는 각도는 정면·3/4·아이소·탑다운 등 카메라 높이를 조절합니다. 리깅 영역의 ‘리깅 보정 각도’는 뼈대를 맞추기 위한 모델의 정면 기준이며, 카메라를 돌리는 기능과 목적이 다릅니다.

예를 들어 4방향에 동작 8프레임을 만들면 결과는 32프레임입니다. 먼저 1방향으로 동작과 외곽선을 맞춘 뒤 방향을 늘리면 확인하기 쉽습니다. 멀리 이동하는 모션을 제자리 스프라이트로 만들려면 ‘제자리 재생’을 켭니다. 이동을 유지할 목적이면 끄고 전체 동작 범위를 확인하세요.

3D는 ‘3D 모델 → 도트 + 외곽선’ 프리셋에서 시작할 수 있습니다. PIA의 긴 변과 색 수를 먼저 정하고, 외곽선은 기본값인 ‘픽셀퍼펙트(디테일 보존)’으로 살펴봅니다. 튀어나온 도트나 작은 요철을 더 정리하려면 디테일 제거 모드와 비교하세요.

PIA의 고정 프레임은 팔레트를 추출하는 기준 프레임을 고르는 설정입니다. 애니메이션을 한 장으로 만드는 설정이 아닙니다. 모든 동작에서 필요한 색이 유지되는지 확인하세요. 시트를 먼저 합쳐 놓고 전체를 작은 크기로 축소하면 각 캐릭터까지 작아지므로, 개별 결과 프레임의 스타일을 맞춘 다음 시트로 저장하는 흐름이 좋습니다.

픽셀화의 ‘스프라이트’ 버튼과 Ctrl+S는 처리된 전체 프레임을 PNG 시트로 저장합니다. 여러 프레임을 가진 결과라면 현재 미리보기에서 보고 있는 한 프레임만 저장하지 않습니다. 3D의 방향·동작 묶음을 확인할 수 있는 경우에는 행이 방향, 열이 동작 순서입니다. 4방향×8프레임이면 8열×4행이 됩니다.

일반 애니메이션은 자동 격자로 배치되고 파일명에 열×행이 표시됩니다. GIF는 움직임 확인·공유용, ZIP은 frame_001.png처럼 개별 PNG가 필요한 경우에 사용합니다. 결과가 원래 1프레임이라면 PNG도 한 장의 그림입니다. 저장 배율은 정수 배율 확대이며, 배율을 높여도 새로운 디테일이나 프레임이 생기지는 않습니다.

• 프레임의 가로·세로 크기와 저장 배율
• 시트의 열·행 수, 실제 사용한 프레임 수
• 방향별 행 순서와 동작 순서
• FPS 또는 각 프레임의 재생 시간
• 바닥·중앙 등 캐릭터의 기준점

가로 64px·세로 64px 셀을 8열×4행으로 내보내면 1배율 시트는 512×256px입니다. 2배율은 시트와 셀 모두 두 배가 됩니다. 가져가는 프로그램에서 이 셀 크기로 균등 분할하고 픽셀 경계가 흐려지지 않는 필터 설정을 선택하세요. 인접 셀이 번져 보이면 필터·패딩 설정을 확인합니다. 픽셀화의 자동 시트 저장에는 임의 패딩이나 게임 엔진용 JSON 내보내기 설정이 없습니다.

픽셀화 작업에는 원본 파일과 노드 설정을 함께 보관할 수 있습니다. 이 브라우저의 작업과 계정 동기화는 서로 다릅니다. 로컬 작업은 파일당 64MB까지, 계정으로 자동 동기화하는 픽셀화 원본은 24MB 이하를 대상으로 합니다. 저장 상태를 확인하고 중요한 원본·결과는 별도 파일로도 보관하세요.

3D 작업실은 모델과 편집 내용을 ‘내 3D 작업’에 보관하고, 로그인 후 ‘작업 저장’으로 현재 작업을 계정에도 복사할 수 있습니다. 3D 작업은 파일당 64MB 한도입니다. 브라우저 데이터 삭제·시크릿 창 종료 후에는 기기 내 작업이 사라질 수 있으므로, 다른 기기에서 이어 할 때는 계정 보관 완료 여부를 확인하세요.

시트에 그림이 하나뿐이라면 결과 프레임 수, 모션 클립 선택, 방향 수를 먼저 확인합니다. PNG 파일이 하나인 것은 정상이며, 그 안에 여러 셀이 들어 있는지가 기준입니다. 칼끝이나 머리가 잘리면 모든 프레임의 경계와 자르기 설정을 확인하세요.

3D 처리 메모리 오류는 동작 범위와 프레임 수에 영향을 받습니다. 현재 엔진은 쉬는 자세를 기준으로 격자를 계산하고 한도에 맞게 내부 해상도를 조절합니다. 오래 열어 둔 탭이라면 작업을 보관한 뒤 새로고침하세요. 같은 오류가 계속되면 모델 형식·클립 이름·방향 수·프레임 수와 오류 문구를 문의로 보내 주세요.