9スライス・ボタン状態・UIアトラス・ビットマップフォントを一つの画面で作り、実際の画面サイズで確認。
UIシート（ボタン・パネル・アイコンを1枚の透明PNGに描いたもの）は、エンジンが描画する前に名前つきの矩形に分ける必要があります。UIラボはアルファのしきい値を超えるピクセルのかたまり（島）を要素として見つけ、統合距離より近い島（ボタンと横のバッジ）をまとめ、余白と任意の縁の拡張を入れてui-atlas.pngにパックし、各矩形とナインスライスの境界をui-atlas.jsonに書き出します。書くのは数値で、GodotやUnityのリソースファイルではありません。9スライス・状態・フォント・チェックの各ステージは同じ画像で続けて使えます。
要素は手で輪郭をなぞるのと同じ考え方で見つけます。アルファがしきい値（既定は255中8）を超えるピクセルを8方向の隣とつないで島にし、最小サイズ（既定16ピクセル）未満の島はゴミとして捨てます。
島は候補にすぎず、意味はわかりません。アイコンの横に離れた点があれば島は2つです。統合距離（既定4px）は、すき間がその値以下の箱どうしを合わせ、合わせるものがなくなるまで繰り返すので、近くに並んだ部品はmergedタグつきの1要素になります。接している2つのボタンは最初から1つの島なので、統合距離に関係なく1要素のままです。
パックはMaxRectsで要素を最大4096 × 4096pxの1ページに置き、周りに余白（既定2px）を空けます。縁の拡張は要素のいちばん外側のピクセルをN px外へ複製し、フィルタリングやミップマップが要素のすぐ外をサンプリングしても要素自身の色を読むようにします。JSONの矩形は要素そのもので、拡張した縁はその外側にあります。
透明なシート上の図形5つを、ラボと同じ検出・統合・パックのコードで処理した結果です。
シート 256 × 128 アルファしきい値 8 最小 16px 統合距離 4
島 パネル 64×64 @8,8 ボタン 96×32 @96,8 アイコン 16×16 @200,12 点 4×4 @218,12 矢印 20×20 @96,64
アイコン → 点のすき間 = 218 − (200 + 16) = 2px ≤ 4 → 1要素 22×16 @200,12、タグ "merged"
結果 島5つ → 要素4つ（統合距離0なら5つのまま）
パック 余白 2、拡張 1 → ui-atlas.png 102 × 108
矩形 element-02 3,3 96×32 element-01 3,41 64×64 element-03 73,41 22×16 element-04 73,63 20×20要素の番号はパック前に上から下、左から右の順に付きます。element-01がパネル、element-03が統合されたアイコンです。名前はJSONのframesのキーになるので、書き出す前に変えておきましょう。
ui-atlas.jsonを開きます。framesには残した要素ごとに1項目あり、すべてのrectがmeta.sizeの内側にあるはずです。ui-atlas.pngからrectを1つ切り出し、元シートの同じ要素と比べます。同じピクセルのはずです。"tag": "merged"を探します。どれも意図してまとめた部品であるべきで、たまたま近くにあった2つのボタンであってはいけません。SETUP.mdにその名前の節と4つの数値があります。| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| 2つのボタンが1要素になる | 接している、またはすき間が統合距離以下 | 要素の箱が両方のボタンを覆い、島が複数ならタグがmerged | 統合距離を0に。接しているなら絵の上で透明ピクセルを1列以上空ける |
| 文字・光・影が別の要素になる | ボタンとの距離が統合距離より遠い、またはピクセルがアルファのしきい値より薄い | 期待する要素数と比べ、すき間を拡大して見る | 統合距離を数px上げる。柔らかい影が切れるならアルファのしきい値を下げる |
| 小さな点が要素として拾われる | 散らばったピクセルが最小サイズを超える島になっている | 要素一覧にごく小さい矩形がある | 最小ピクセル数を上げるか、絵のゴミを消す |
| エンジンで要素の縁に隣の要素の線が出る | エンジンが矩形の境界をまたいでフィルタリング・ミップマップし、余白0のため隣を読んでいる | 実行画面で縁を拡大する | 余白2と拡張1〜2を使う。ピクセルアートならNearestフィルター |
| アトラスのパックに失敗する | 要素が4096 × 4096の1ページに収まらない | 概要にサイズではなくエラーが出る | シートを分けてアトラスを2つ作る。複数ページのUIアトラスはない |
| 方法 | こんなときに向いています |
|---|---|
| 個別PNG向けのパッカー（スプライトシートパッカー、TexturePacker） | 要素がすでに1ファイルずつあるとき。検出は不要で、エンジン別のアトラス形式を書き出せます。TexturePackerなしでパックするも参照。 |
| UnityのSprite Editorでのスライス | シートをUnityだけで使い、矩形をUnityのインポート設定に保存したいとき。 |
GodotのAtlasTextureを手で作る | 要素が2〜3個だけのとき。atlasにシートを指定してregionを入力すれば、追加ファイルは一切不要です。 |
.tres、Unityの.meta）は書かず、矩形と境界の数値だけを書きます。docs/UI-LAB.mdのためにWindows 11のChromium（Playwright）で測定しました。ボタン1つと透明な穴がある128 × 64のシートから要素が4つ見つかり、統合距離40で1つにまとまりました。パックしたピクセルは元の矩形と一致し、拡張1は縁のピクセルを矩形の外に複製します。要素に付けた境界5/5/4/4はui-atlas.jsonに入ります。要素40個の1024 × 1024シートは検出・統合・パック・描画が76msで終わりました。GodotやUnityでアトラスを読み込んではいません。上のエンジン名はGodot 4.7の公式ドキュメントに基づきます。
9スライス・ボタン状態・UIアトラス・ビットマップフォントを一つの画面で作り、実際の画面サイズで確認。
PNG / JPG / WebP / AVIF / HEIC → PNG + JSON (ZIP) — 入力のデコードはブラウザ対応と追加エンジンに依存します。
9スライス・ボタン状態・UIアトラス・ビットマップフォントを一つの画面で作り、実際の画面サイズで確認。
advanced · nine-slice draw plan / parametric state ops / measured glyph metrics / exact EDT signed distance field. 品質検証中です。Pro・Flagship水準はまだ実証されていません。
出力はPNG・JSON・BMFontテキストのみ。.tresや.metaなどのエンジンリソースは生成せず、エンジン内での描画は検証していません。
出力はPNG・JSON・BMFontテキストのみ。.tresや.metaなどのエンジンリソースは生成せず、エンジン内での描画は検証していません。
このツールで開いたファイルはアップロードせず端末で処理します。コミュニティの投稿に明示的に添付する画像は別途アップロードされます。一部のエンジンやモデルは外部から取得するため、IPアドレスなどの接続情報は配信元に伝わります。
いいえ。画像と編集状態はこのタブに保持され、メディア出力は端末の一時保存を利用する場合があります。言語を変えても作業は残りますが、再読み込み、タブを閉じる操作、別のページへの移動で失われることがあります。