타일 격자 분리

타일 크기를 지정해 격자 PNG를 개별 이미지로 분리하세요.

타일셋을 낱장 이미지로 자르려면 축마다 세 숫자가 필요합니다. 타일 크기, 여백(첫 타일 앞의 픽셀), 간격(타일 사이 픽셀)입니다. 이 도구는 픽셀에서 그 값을 재고 후보에 순위를 매기며, 확인하거나 직접 입력하면 영역을 그대로 복사한 tiles/tile-NNN.png와 각 타일의 영역·열·행이 든 metadata.json을 씁니다. 빈 타일은 기본으로 건너뛰고 중복은 별칭으로 표시할 수 있습니다. 대부분의 엔진은 같은 여백·간격으로 시트 전체를 읽으므로, 낱장 파일은 도구가 요구할 때만 필요합니다.

이미지을(를) 여기에 놓으세요여러 개를 한 번에 처리할 수 있습니다

업로드 없음 · 이 기기에서 처리

타일 크기·여백·간격

열 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행입니다.

결과 확인

격자선을 켭니다. 모든 선이 틈이나 타일 경계에 있어야 하고 그림을 가로지르면 안 됩니다.
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 가져오기 안에서 스프라이트 영역을 만듭니다.

이 방법의 한계

한 번에 최대 4096타일, 비슷한 타일 묶기는 2048타일까지입니다.
ZIP에 엔진 타일셋은 없습니다. metadata.json은 영역·열·행이 든 일반 형식입니다.

버전과 출처

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 공식 문서를 따릅니다.

참고한 공식 문서

예제

도구로 처리한 샘플 · 32 × 32

이 도구로 만든 예제입니다. ZIP 도구는 미리보기를 표시하며 전체 파일은 내려받은 압축 파일에서 확인하세요.