게임 UI 에셋 랩 · UI 시트를 여백 있는 아틀라스로
게임 UI 그림을 위한 한 작업 공간: 시트에서 요소를 찾고, 여백과 가장자리 확장으로 패킹하고, 패널에 나인 슬라이스 테두리를 주고, 실제로 그려질 해상도에서 점검합니다.
- Nine-slice측정 확인· Pillow
- Bitmap font측정 확인· independent .fnt parser
- Button states측정 확인· Pillow
- Engine import미검증
이렇게 작동합니다
- 합치기 거리를 둔 알파 섬으로 요소 감지(버튼과 그 위 글자가 한 요소가 됨).
- UI 아틀라스: 여백·가장자리 확장이 있는 MaxRects 패킹. 요소별 테두리가 JSON에 들어갑니다.
- 나인 슬라이스·버튼 상태·비트맵 폰트·점검(크기와 앵커·안전 영역·현지화 넘침·WCAG 대비) 단계.
- 설정 링크: 이미지가 아닌 모든 설정을 URL로 공유할 수 있습니다.
사용 방법
- UI 시트를 끌어다 놓습니다.
- 감지된 요소를 확인하고 이름을 바꾸고 합치기 거리를 조절합니다.
- 패널에 나인 슬라이스 테두리를 줍니다.
- 아틀라스 PNG + JSON을 내보냅니다.
출력 파일과 검증 방법
"측정 확인"은 내려받은 파일을 페이지 밖에서(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 테두리)은 문서 기준이며 엔진에서 시험하지 않았습니다.
자주 묻는 질문
맞닿은 버튼 두 개가 한 요소가 되는 이유는?
요소는 알파 섬이므로 닿아 있는 그림은 한 섬입니다. 그림에서 떼거나 나인 슬라이스 단계에서 잘라 내세요.
Godot·Unity 리소스를 쓰나요?
아니요. 엔진마다 필요한 값(patch margin, L·B·R·T 테두리)이 든 PNG + JSON과 SETUP.md를 씁니다. 엔진 가져오기는 시험하지 않았습니다.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).