버튼 상태 생성기 · hover·pressed·disabled·focus
버튼 하나로 다섯 가지 상태. 상태마다 밝기·대비·채도·덧씌우기·오프셋·외곽선·알파 연산이 순서대로 보이고 수정할 수 있습니다. 픽셀 계산일 뿐이라 원본에 없는 것을 그리지 않습니다.
- Nine-slice측정 확인· Pillow
- Bitmap font측정 확인· independent .fnt parser
- Button states측정 확인· Pillow
- Engine import미검증
이렇게 작동합니다
- 기본값: hover 밝기 +10%, pressed −10%와 1px 아래로, disabled 채도 제거와 알파 50%, focus 2px 링.
- 상태마다 모든 연산 값이 보이고 수정할 수 있습니다.
- 출력: 상태마다 PNG 하나, 패킹된 스트립, 영역과 정확한 연산 값이 든 states.json.
- 투명 픽셀은 다시 칠하지 않습니다.
사용 방법
- 버튼 PNG를 끌어다 놓습니다.
- 상태별 연산을 조절합니다.
- 다섯 미리보기를 나란히 확인합니다.
- 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 테두리)은 문서 기준이며 엔진에서 시험하지 않았습니다.
자주 묻는 질문
focus 이미지가 더 큰 이유는?
focus 링이 외곽선 두께만큼 캔버스를 키우며, 그 크기는 states.json에 기록됩니다.
normal 상태도 바뀌나요?
아니요. normal은 원본과 바이트 동일합니다(확인함).
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).