스프라이트 시트를 PNG 프레임으로 · 프레임마다 파일 하나(ZIP)
도구가 시트 대신 낱장 이미지를 원할 때, 기존 스프라이트 랩이 확인한 격자나 투명한 틈으로 시트를 잘라 프레임 ZIP을 내려받게 합니다. 각 PNG는 시트의 해당 상자를 그대로 복사한 것입니다.
스프라이트 시트를 PNG 파일 여러 개로 나눈다는 건, 마진·간격이 있는 격자나 투명한 틈을 따라 프레임 상자로 자르고 상자마다 이미지 하나로 저장한다는 뜻입니다. Nerulio의 기존 스프라이트 랩은 이를 브라우저에서 하고, 윤곽을 그린 프레임마다 PNG 하나가 든 ZIP을 내려받게 합니다. 이름은 시트 이름에 프레임 순서 번호를 붙입니다(hero_001.png, hero_002.png …). 모든 PNG는 상자를 픽셀 그대로 복사한 것이며 다시 샘플링하지 않고 위치 정보도 없습니다. 애니메이션, 피벗, 엔진 파일이 필요하면 같은 시트를 Studio에서 자르세요.
- Frame PNGs측정 확인· Pillow
상자, 크기, 이름
낱장 프레임 파일은 이미지 폴더로 애니메이션을 만드는 도구에 넣거나, 프레임을 다른 곳에서 하나씩 편집할 때 필요합니다. 파일에는 타이밍도 위치도 없습니다. 프레임의 자리는 크기와 투명한 테두리뿐입니다. 그래서 PNG마다 투명 여백을 포함한 상자 전체를 유지합니다. 한 격자에서 자른 프레임은 모두 크기가 같아서, 도구가 겹쳐 쌓아도 맞습니다.
투명한 틈으로 자른 불규칙한 시트는 상자마다 크기가 달라 PNG 크기도 달라지고, 모서리를 기준으로 그리는 도구에서는 애니메이션이 튑니다. 맞춰야 한다면 먼저 한 캔버스에 정렬하세요(기존 랩의 정규화 단계, 또는 Studio의 프레임 정렬).
이름은 시트 이름 + 0으로 채운 번호(최소 세 자리, 프레임이 1,000개 이상이면 더 길게)라서, 어느 파일 관리자에서든 이름순 정렬이 프레임 순서와 같습니다. 픽셀이 하나도 없는 칸은 빈 이미지로 쓰지 않고 건너뜁니다.
- 프레임 상자
- 시트에서 잘라낸 사각형. PNG는 정확히 이 크기.
- 0으로 채운 번호
- 001, 002 … 010처럼 써서 글자순 정렬이 프레임 순서와 같게 함.
예시: 64 × 64 프레임으로 된 256 × 128 시트
마진과 간격 없이 4열 × 2행:
격자 64 × 64 → 256 ÷ 64 = 4열, 128 ÷ 64 = 2행 = 프레임 8개
내려받기 → hero-frames.zip
파일 → hero_001.png … hero_008.png, 각 64 × 64, 행 순서
픽셀 검산 → 8 × 64 × 64 = 32,768 = 256 × 128: 모든 픽셀이 한 파일에 들어감
같은 그림에 마진 1px, 간격 2px(263 × 131 시트)
→ 여전히 64 × 64 PNG 8개. 마진과 간격은 어느 프레임에도 속하지 않음263 = 1 + 4 × 64 + 3 × 2 + 0, 131 = 1 + 2 × 64 + 1 × 2 + 0입니다(오른쪽·아래 마진 없음). 상자가 틈이 아니라 그림 위에 놓이면 자르기가 어긋날 때를 보세요.
이렇게 작동합니다
- 알파 섬(불규칙한 시트)이나 여백·간격이 있는 격자로 프레임을 찾습니다.
- 표시된 프레임마다 PNG 하나씩, 프레임 순서대로 담은 ZIP 하나.
- 모든 프레임 PNG가 시트의 해당 영역과 픽셀 단위로 같고 리샘플링하지 않습니다.
- 애니메이션·피벗·히트박스·엔진 파일이 필요하면 같은 시트를 Studio에서 여세요.
사용 방법
- 스프라이트 시트를 끌어다 놓습니다.
- 감지된 프레임을 확인하거나 격자를 정합니다.
- 필요하면 프레임 상자를 고칩니다.
- 프레임 ZIP을 받습니다.
결과 확인
- 내려받기 전에 시트 위 상자 윤곽을 봅니다. 상자마다 스프라이트 하나가 온전히 들어 있고 이웃 것은 없어야 합니다.
- ZIP을 엽니다. PNG 수가 윤곽 수와 같고, 격자 시트라면 이어진 프레임의 픽셀 크기가 같습니다.
- 이미지 뷰어에서 이름순으로 넘겨 봅니다. 기대한 순서대로 애니메이션이 이어져야 합니다.
문제 해결
| 증상 | 유력한 원인 | 확인 방법 | 해결 |
|---|---|---|---|
| PNG에 이웃 스프라이트 조각이 들어감 | 격자가 간격이나 마진을 무시해 상자가 다음 스프라이트에 겹침 | 시트 위 윤곽이 그림을 가로지름 | 내려받기 전에 간격·오프셋을 넣거나 상자를 드래그 |
| 파일로 재생하면 프레임이 튐 | 아일랜드로 잘라 상자 크기가 제각각이고, 도구가 PNG를 모서리 기준으로 그림 | PNG 두 개의 픽셀 크기 비교 | 같은 크기 격자로 자르거나, 내보내기 전에 한 캔버스로 정렬 |
| 있어야 할 프레임이 없음 | 그 칸에 불투명 픽셀이 없어 건너뜀 | 시트에서 그림이 있는 칸 세기 | 빈 칸이면 정상. 옅은 픽셀이 있다면 알파 임계값을 낮추기 |
| 프레임마다 색 있는 상자가 둘러쌈 | 시트에 불투명한 배경색이 있음 | PNG 모서리가 투명하지 않음 | 먼저 배경을 투명하게: 스프라이트 배경 제거 |
다른 방법
| 방법 | 이럴 때 더 낫습니다 |
|---|---|
| ezgif 스프라이트 커터 | JPG, BMP, WebP 프레임도 필요하거나 이어서 GIF 도구를 쓸 때. 시트는 ezgif 서버로 업로드됩니다. 비교는 ezgif 대안에 있습니다. |
| Studio의 스프라이트 작업 공간 | 프레임을 게임 엔진에 쓸 때: 낱장 파일 대신 태그, 타이밍, 피벗, 패킹된 아틀라스 하나. 스프라이트 시트 자르기에서 시작하세요. |
출력 파일과 검증 방법
"측정 확인"은 내려받은 파일을 페이지 밖에서(Pillow·numpy·별도 파서) 다시 열어 그 속성을 측정했다는 뜻입니다. 게임 엔진에서 불러오는 것은 시험하지 않았습니다.
| 대상 | 파일 | 검증 |
|---|---|---|
| Frame PNGs | <sheet>-frames.zip (one PNG per frame) | 측정 확인 Pillow모든 프레임 PNG가 시트에 표시된 상자와 같습니다(Chromium·Firefox). ZIP에 위치 정보는 없습니다. |
검증 근거
ZIP에서 다시 읽은 프레임이 원본 시트의 해당 영역과 픽셀 단위로 같습니다.
한계
- ZIP에는 PNG만 들어가며 위치나 타이밍 정보는 없습니다.
- 낱장 프레임 파일은 기존 스프라이트 랩의 내보내기이며, Studio는 아직 쓰지 않습니다.
- 기존 랩에는 타임라인과 태그가 없습니다. 애니메이션은 Studio를 쓰세요.
- 프레임은 알파 섬이나 확인한 격자로 자릅니다.
- 아주 큰 시트는 띠 단위로 자르며 진행 상황을 보여 줍니다.
버전과 출처
브라우저 테스트에서 실제 CC0 시트로 만든 ZIP의 각 PNG를 윤곽 영역과 비교해 Chromium과 Firefox 모두 픽셀 단위로 일치했습니다. ezgif의 출력 형식은 ezgif 페이지에서 인용했습니다.
참고한 공식 문서
자주 묻는 질문
왜 Studio에 없나요?
Studio는 엔진용 아틀라스와 애니메이션을 내보냅니다. 낱장 프레임 PNG ZIP은 아직 기존 스프라이트 랩의 기능입니다.
프레임이 트림되나요?
각 PNG는 시트에 표시된 상자 그대로입니다. 바꾸려면 내보내기 전에 상자 크기를 고치세요. ZIP에는 PNG만 있고 위치 정보는 없습니다.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).