9슬라이스 편집기 · Godot·Unity용 나인 패치 테두리
테두리는 원본 픽셀 기준 숫자 네 개입니다. 편집기는 가장 긴 동일 열·행 구간에서 값을 제안하고, 드래그·입력·미세 이동을 지원하며, 모든 목표 크기를 모서리가 변하지 않게 그립니다.
- Nine-slice측정 확인· Pillow
- Bitmap font측정 확인· independent .fnt parser
- Button states측정 확인· Pillow
- Engine import미검증
이렇게 작동합니다
- 동일한 열·행으로 테두리 제안. 근거 구간을 함께 보여 주며 몰래 적용하지 않습니다.
- 가장자리 늘이기 또는 반복. 반복은 원래 크기로 되풀이되고 마지막 조각은 잘립니다.
- 모든 크기에서 모서리를 늘이지 않습니다(100×40·300×80·800×200·420×120에서 확인). Chromium에서는 바이트 동일, Firefox에서는 반투명 모서리 픽셀이 알파 반올림 한 단계만큼 다를 수 있습니다.
- 내보내기: 미리보기, 픽셀·정규화 값·Godot patch_margin_*·Unity border(L·B·R·T)가 든 nine-slice.json, SETUP.md.
사용 방법
- 패널이나 버튼 PNG를 끌어다 놓습니다.
- 제안된 테두리를 받아들이거나 드래그·입력합니다(화살표 1px, Shift 10px).
- 목표 크기로 늘이기·반복을 미리 봅니다.
- ZIP으로 내보냅니다.
출력 파일과 검증 방법
"측정 확인"은 내려받은 파일을 페이지 밖에서(Pillow·numpy·별도 파서) 다시 열어 그 속성을 측정했다는 뜻입니다. 게임 엔진에서 불러오는 것은 시험하지 않았습니다.
| 대상 | 파일 | 검증 |
|---|---|---|
| Nine-slice | nine-slice.json · previews · SETUP.md | 측정 확인 Pillow크기를 바꾼 모든 미리보기에서 네 모서리 블록을 늘이지 않습니다. Chromium에서는 바이트 동일, Firefox에서는 반투명 픽셀이 알파 반올림 한 단계만큼 다를 수 있습니다. 빈틈·겹침 0. |
| Bitmap font | font.png · font.fnt (BMFont text) · font.json | 측정 확인 independent .fnt parser테스트에 따로 작성한 파서로 .fnt를 다시 읽어 헤더와 모든 글리프 영역이 일치했습니다. |
| Button states | states/*.png · strip · states.json | 측정 확인 Pillownormal은 원본과 같습니다(Chromium에서는 바이트 동일, Firefox에서는 반투명 픽셀의 색이 알파 반올림 한 단계 이내). states.json의 모든 영역이 스트립에서 해당 상태를 정확히 잘라 냅니다. |
| Engine import | Godot NinePatchRect · Unity Sprite border · BMFont import | 미검증Godot·Unity에서 실행하지 않았습니다. |
검증 근거
나인 슬라이스 모서리가 100×40·300×80·800×200·420×120에서 늘어나지 않음, 동일한 열 12개에서 테두리 6·6·6·6 제안. 버튼 상태: normal이 원본과 같음, disabled는 알파 128 회색, focus 링 정확. .fnt 글리프 레코드가 JSON과 일치. .po의 누락 글리프를 정확히 나열. 흰 바탕 검정 글자 21:1 측정. 이미지는 브라우저 캔버스를 거칩니다. Chromium은 바이트가 그대로이고, Firefox는 반투명 픽셀의 색을 미리 곱한 값 한 단계로 반올림합니다(Kenney 버튼에서 측정: 알파 63에서 최대 4단계). 알파와 불투명 픽셀은 그대로입니다.
한계
- 커닝 쌍 없음, 폰트 페이지 1장, MSDF 없음. SDF 출력은 베타입니다.
- TTF의 cmap을 해석하지 않으므로 누락 글리프 점검에는 .fnt나 랩의 폰트가 필요합니다.
- 아틀라스는 1페이지이고, 서로 닿은 요소는 하나로 셉니다.
- Godot·Unity에서 렌더링해 보지 않았습니다. 엔진용 값(patch margin, L·B·R·T 테두리)은 문서 기준이며 엔진에서 시험하지 않았습니다.
자주 묻는 질문
Unity는 어떤 순서를 쓰나요?
Unity 스프라이트 편집기의 border는 왼쪽·아래·오른쪽·위 순서이고 원점이 왼쪽 아래입니다. JSON에 그 순서로 쓰고 이름을 붙입니다.
Godot·Unity 안에서 시험했나요?
아니요. 값은 두 엔진이 문서화한 것이며 엔진에서 렌더링하지는 않았습니다.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).