ゲームUIアセットラボ · UIシートを余白つきアトラスに
ゲームUIの絵のための作業画面：シートから要素を見つけ、余白と縁の拡張でパックし、パネルにナインスライスの境界を付け、実際に描画される解像度でチェックします。
- Nine-slice測定確認· Pillow
- Bitmap font測定確認· independent .fnt parser
- Button states測定確認· Pillow
- Engine import未検証
できること
- 統合距離つきのアルファの島で要素を検出（ボタンとその上の文字が1要素に）。
- UIアトラス：余白・縁の拡張つきMaxRectsパック。要素ごとの境界がJSONに入ります。
- ナインスライス・ボタン状態・ビットマップフォント・チェック（サイズとアンカー・セーフエリア・ローカライズのあふれ・WCAGコントラスト）の各ステージ。
- 設定リンク：画像以外のすべての設定をURLで共有可能。
使い方
- UIシートをドロップ。
- 検出された要素を確認し、名前を変え、統合距離を調整。
- パネルにナインスライスの境界を付ける。
- アトラスPNG + JSONを書き出し。
出力ファイルと検証方法
「測定確認」は、ダウンロードしたファイルをページ外（Pillow・numpy・独立したパーサー）で開き直して性質を測ったという意味です。ゲームエンジンでの読み込みは試していません。
| 書き出し先 | ファイル | 検証 |
|---|---|---|
| Nine-slice | nine-slice.json · previews · SETUP.md | 測定確認 Pillowリサイズした全プレビューで四隅のブロックは拡大されません。Chromiumではバイト一致、Firefoxでは半透明ピクセルがアルファの丸め1段階ぶん変わることがあります。すき間・重なり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では半透明ピクセルの色がアルファの丸め1段階以内）。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を測定。画像はブラウザのCanvasを通ります。Chromiumはバイトがそのまま、Firefoxは半透明ピクセルの色を乗算済みの値で1段階に丸めます（Kenneyのボタンで測定：アルファ63で最大4段階）。アルファと不透明ピクセルはそのままです。
制限
- カーニングペアなし、フォントは1ページ、MSDFなし。SDF出力はベータです。
- TTFのcmapを解析しないため、欠落グリフのチェックには.fntかラボのフォントが必要です。
- アトラスは1ページで、接している要素は1つとして扱います。
- Godot・Unityでの描画は行っていません。エンジン用の値（patch margin、L・B・R・Tの境界）はドキュメント基準で、エンジンでは未検証です。
よくある質問
接している2つのボタンが1要素になるのはなぜ？
要素はアルファの島なので、接している絵は1つの島です。絵の上で離すか、ナインスライスのステージで切り出してください。
GodotやUnityのリソースを書き出しますか？
いいえ。エンジンごとに必要な値（patch margin、L・B・R・Tの境界）入りのPNG + JSONとSETUP.mdを書き出します。エンジンでの読み込みは試していません。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。