이미지를 타일로 나누기 · 타일마다 PNG (ZIP)
도구가 이미지를 따로따로 원할 때(Tiled의 "Collection of Images" 타일셋, 레벨 편집기 등) 시트를 tile-NNN.png 파일로 자르세요. 격자는 픽셀에서 측정하고 모든 타일은 영역을 그대로 복사합니다.
타일셋을 낱장 이미지로 자르려면 축마다 세 숫자가 필요합니다. 타일 크기, 여백(첫 타일 앞의 픽셀), 간격(타일 사이 픽셀)입니다. 이 도구는 픽셀에서 그 값을 재고 후보에 순위를 매기며, 확인하거나 직접 입력하면 영역을 그대로 복사한 tiles/tile-NNN.png와 각 타일의 영역·열·행이 든 metadata.json을 씁니다. 빈 타일은 기본으로 건너뛰고 중복은 별칭으로 표시할 수 있습니다. 대부분의 엔진은 같은 여백·간격으로 시트 전체를 읽으므로, 낱장 파일은 도구가 요구할 때만 필요합니다.
- Tiles측정 확인· Pillow
- Padded atlas측정 확인· Pillow
- Seam report측정 확인· Pillow
타일 크기·여백·간격
열 c, 행 r의 타일은 x = 여백 + c × (타일 너비 + 간격), y = 여백 + r × (타일 높이 + 간격)에서 시작합니다. 들어가는 열 수는 floor((이미지 너비 − 여백 + 간격) ÷ (타일 너비 + 간격))이고, 오른쪽·아래 가장자리에 남는 픽셀은 무시합니다. 각 타일은 디코딩한 시트에서 정확한 사각형으로 복사하며 리샘플링하지 않습니다.
측정은 그림의 주기를 찾습니다. 축마다 각 줄과 앞 줄의 차이로 윤곽을 만들고, 4px부터 이미지 절반까지 모든 주기로 접어 각 접기가 윤곽을 얼마나 잘 설명하는지 점수를 매깁니다. 여백이나 간격이 차지할 줄은 비어 있거나 단색이어야 하고, 모든 타일의 첫 줄이나 마지막 줄이 비어 있으면 타일이 더 작고 그 줄이 간격이며("16px + 1px 간격"이 "17px 타일"을 이김), 실제 주기의 배수는 약수에 집니다. 4메가픽셀을 넘으면 측정하지 않고 크기를 입력합니다.
엔진은 시트 전체에 같은 숫자를 씁니다. Godot 4의 TileSetAtlasSource에는 margins, separation, texture_region_size가, Tiled의 이미지 기반 타일셋에는 margin과 spacing이, Phaser addTilesetImage에는 tileMargin과 tileSpacing이, Unity Sprite Editor의 격자 자르기에는 Pixel Size·Offset·Padding이 있습니다. 타일마다 자기 이미지 파일을 가리키는 Tiled의 "Collection of Images" 타일셋만 낱장 PNG가 필요합니다.
- 여백(margin)
- 이미지 가장자리와 첫 타일 사이의 픽셀.
- 간격(spacing, separation)
- 이웃한 두 타일 사이의 픽셀.
- 빈 타일
- 모든 픽셀의 알파가 0인 타일. 기본으로 건너뛰며
skippedBlank에 셉니다. - 별칭
- 앞의 타일과 똑같은 타일. 한 번만 쓰고
aliases에 대응을 기록합니다.
예시: 16px 타일, 간격 1px인 203 × 186 시트
도구가 쓰는 숫자와, 같은 배치를 세 엔진에 넣는 값입니다.
시트 203 × 186, 타일 16 × 16, 여백 0, 간격 1
열 floor((203 − 0 + 1) / (16 + 1)) = floor(204 / 17) = 12
행 floor((186 − 0 + 1) / 17) = floor(187 / 17) = 11 → 타일 132개
13번 1열, 1행 → x = 0 + 1 × 17 = 17, y = 17, 16 × 16 → tiles/tile-013.png
이름 1000개까지 3자리(tile-005), 그 이상은 4자리(1600타일 시트에서 tile-0005)
다른 예 100 × 64 시트, 여백 1, 간격 2 → 5 × 3 타일, x = 1, 19, 37, 55, 73; 오른쪽 11px 미사용
엔진 Godot margins (0, 0), separation (1, 1) · Tiled margin 0, spacing 1 · Phaser addTilesetImage(name, key, 16, 16, 0, 1)파일 이름은 타일의 격자 번호를 유지하므로, 빈 타일을 건너뛰면 번호에 일부러 빈자리가 생깁니다. tile-013은 이 시트에서 언제나 1열 1행입니다.
이렇게 작동합니다
- 격자 후보(타일 크기·여백·간격)를 측정해 순위를 매기며, 모든 값은 수정할 수 있습니다.
- 빈 타일이 아닌 타일마다 PNG 하나와, 각 타일의 영역·열·행이 든 metadata.json.
- 정확히 같은 중복과 거의 같은 중복을 별칭으로 표시하고, 회전·뒤집기 변형을 선택적으로 만듭니다.
- 번짐 없는 렌더링용 여백 아틀라스(가장자리 확장)를 선택할 수 있고, 긴 작업은 취소할 수 있습니다.
사용 방법
- 시트를 끌어다 놓습니다.
- 측정된 격자를 확인하거나 타일 크기·여백·간격을 입력합니다.
- 빈 타일 건너뛰기·중복·변형을 정합니다.
- ZIP을 받습니다.
결과 확인
- 격자선을 켭니다. 모든 선이 틈이나 타일 경계에 있어야 하고 그림을 가로지르면 안 됩니다.
metadata.json을 엽니다.tileSet.columns × rows가 격자,count가 쓴 파일 수이고, 차이는skippedBlank와deduplicated로 설명됩니다.- 타일 PNG 하나를 엽니다. 정확히 타일 크기이고,
frames의rect가 x = 여백 + 열 × (타일 + 간격)을 만족해야 합니다.
문제 해결
| 증상 | 유력한 원인 | 확인 방법 | 해결 |
|---|---|---|---|
| 모든 타일에 이웃 타일의 선이 붙거나 한 픽셀 밀림 | 여백이나 간격이 틀림. 흔히 16 + 1 대신 17px 타일 | 격자선이 틈이 아니라 그림을 가로지름 | 순위 목록의 다른 후보를 고르거나 여백·간격을 입력 |
| 격자의 타일보다 파일이 적음 | 빈 타일을 건너뛰었거나, 중복을 별칭으로 한 번만 씀 | metadata.json의 skippedBlank, deduplicated, aliases | 격자 칸마다 파일이 필요하면 빈 타일 건너뛰기나 중복 찾기를 끄기 |
| 타일은 16px인데 32px 주기를 찾음 | 그림이 더 큰 무늬를 반복해 타일의 배수도 점수가 높음 | 16px와 32px 후보의 점수 비교 | 16px 후보를 고르거나 크기를 입력 |
| 타일 크기가 전혀 제안되지 않음 | 이미지가 4메가픽셀을 넘어 격자를 측정하지 않음 | 칸이 비어 있고 직접 입력하라는 안내가 나옴 | 타일 크기·여백·간격을 입력. 자르기는 그대로 작동 |
다른 방법
| 방법 | 이럴 때 더 낫습니다 |
|---|---|
| 엔진에서 여백·간격을 지정해 시트 전체를 불러오기 | 거의 모든 타일맵. Godot TileSetAtlasSource, Tiled 이미지 기반 타일셋, Phaser addTilesetImage는 이미지 하나를 읽으므로 관리할 타일 파일이 없습니다. |
| 타일셋 자르기 | 낱장 PNG가 아니라 Godot·Tiled·Unity·LDtk용 지형 규칙이 있는 엔진 타일셋이 필요할 때. |
| Unity Sprite Editor, Grid By Cell Size | 시트를 Unity에서만 쓸 때. Pixel Size·Offset·Padding으로 Unity 가져오기 안에서 스프라이트 영역을 만듭니다. |
출력 파일과 검증 방법
"측정 확인"은 내려받은 파일을 페이지 밖에서(Pillow·numpy·별도 파서) 다시 열어 그 속성을 측정했다는 뜻입니다. 게임 엔진에서 불러오는 것은 시험하지 않았습니다.
| 대상 | 파일 | 검증 |
|---|---|---|
| Tiles | tiles/tile-NNN.png · metadata.json | 측정 확인 Pillow잘라 낸 모든 타일이 원본 영역과 픽셀 단위로 같습니다(여백·간격·빈 타일·중복 포함). |
| Padded atlas | padded-atlas.png | 측정 확인 Pillow가장자리 픽셀을 바깥으로 복제하며, 기록된 atlas-padding 품질 점검이 Chromium·Firefox에서 통과합니다. |
| Seam report | PNG (healed) · measurements on screen | 측정 확인 Pillow이어지는 타일은 이음새 없음, 그라데이션은 이음새 있음으로 보고하며, 고친 타일의 경계 차이는 평균 8단계 미만입니다. |
검증 근거
합성 시트 10개 중 10개에서 실제 격자를 1순위로 감지(여백 1·간격 2 포함). 잘라 낸 타일 13/13이 원본 영역과 바이트 동일. 1600타일 자르기가 2.2초에 끝나고 취소할 수 있음. 이음새 판정은 타일 내부 기준으로 측정.
한계
- 한 번에 최대 4096타일, 비슷한 타일 묶기는 2048타일까지입니다.
- ZIP에 엔진 타일셋은 없습니다.
metadata.json은 영역·열·행이 든 일반 형식입니다. - 규칙적인 격자만 지원하며, 4메가픽셀을 넘으면 타일 크기를 측정하지 않고 직접 입력합니다.
- 비슷한 타일 찾기는 픽셀 차이 기준이며 지각적 유사도가 아닙니다.
- "이음새 없애기"는 혼합 띠 안의 그림을 바꾸며 새로 그려 넣지 않습니다. 전후를 보여 줍니다.
- 2 × 2보다 작은 타일은 이음새를 잴 수 없습니다.
버전과 출처
docs/TILE-LAB.md를 위해 측정했습니다. 합성 시트 10개 중 10개에서 실제 격자가 1순위였고(여백 1·간격 2, 홀수 15px, 16 × 32 타일, 외곽선 타일), 잘라 낸 타일 13개 중 13개가 원본 영역과 바이트 동일했으며(Chromium + Pillow), 48개 중 47개를 쓰고 빈 타일 1개를 건너뛰고 별칭 1개를 만들었고, 8px 타일 1600개를 2.2초에 자르며 취소도 작동했습니다. 엔진 매개변수 이름은 Godot 4.7, Tiled, Phaser, Unity 공식 문서를 따릅니다.
참고한 공식 문서
자주 묻는 질문
타일이 리샘플링되나요?
절대 아닙니다. 각 타일은 디코딩한 시트의 영역을 그대로 복사합니다(점검에서 13/13 바이트 동일).
지형 규칙이 있는 엔진 타일셋은요?
Godot·Tiled·Unity·LDtk 타일셋은 Studio의 타일 작업 공간을 여는 타일셋 자르기를 쓰세요.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).