本文へスキップ

9スライスエディター · Godot・Unity向けナインパッチ境界

境界は元画像のピクセル単位の4つの数値です。エディターは同一の列・行が最も長く続く区間から値を提案し、ドラッグ・入力・微調整ができ、すべての目標サイズを四隅が変わらないように描画します。

UIパネル・ボタン・グリフシート・UIシート(PNG)をドロップ
UIラボを開く
ブラウザ内で処理し、ファイルはアップロードされません。
UIラボ:ナインスライスのガイドと複数サイズのプレビューがあるCC0のUIパネル
CC0アセット(Kenney)を開いた実際のUIラボ画面です。
出力
  • Nine-slice測定確認· Pillow
  • Bitmap font測定確認· independent .fnt parser
  • Button states測定確認· Pillow
  • Engine import未検証

できること

  • 同一の列・行から境界を提案。根拠の区間を表示し、勝手に適用しません。
  • 縁は引き伸ばしかタイル。タイルは元の大きさで繰り返し、最後の1枚は切り取り。
  • どのサイズでも四隅は拡大されません(100×40・300×80・800×200・420×120で確認)。Chromiumではバイト一致、Firefoxでは半透明の角のピクセルがアルファの丸め1段階ぶん変わることがあります。
  • 書き出し:プレビュー、ピクセル・正規化値・Godotのpatch_margin_*・Unityのborder(L・B・R・T)入りのnine-slice.json、SETUP.md。

使い方

  1. パネルかボタンのPNGをドロップ。
  2. 提案された境界を採用するか、ドラッグ・入力(矢印で1px、Shiftで10px)。
  3. 目標サイズで引き伸ばし・タイルをプレビュー。
  4. ZIPで書き出し。

出力ファイルと検証方法

「測定確認」は、ダウンロードしたファイルをページ外(Pillow・numpy・独立したパーサー)で開き直して性質を測ったという意味です。ゲームエンジンでの読み込みは試していません。

書き出し先ファイル検証
Nine-slicenine-slice.json · previews · SETUP.md測定確認 Pillowリサイズした全プレビューで四隅のブロックは拡大されません。Chromiumではバイト一致、Firefoxでは半透明ピクセルがアルファの丸め1段階ぶん変わることがあります。すき間・重なり0。
Bitmap fontfont.png · font.fnt (BMFont text) · font.json測定確認 independent .fnt parserテスト内で別に書いたパーサーで.fntを読み戻し、ヘッダーと全グリフ範囲が一致。
Button statesstates/*.png · strip · states.json測定確認 Pillownormalは元と一致(Chromiumではバイト一致、Firefoxでは半透明ピクセルの色がアルファの丸め1段階以内)。states.jsonの各範囲がストリップから該当状態を正確に切り出します。
Engine importGodot 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の境界)はドキュメント基準で、エンジンでは未検証です。

よくある質問

Unityはどの順序?

UnityのSprite Editorのborderは左・下・右・上の順で、原点は左下です。JSONにはその順で書き、名前も付けます。

GodotやUnityの中で試しましたか?

いいえ。値は両エンジンが文書化しているもので、エンジンでの描画は行っていません。

無料ですか?アカウントは必要ですか?

このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。

スプライトはアップロードされますか?

いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ(IndexedDB)に自動保存され、.nerulioファイルとして保存できます。

Asepriteやエンジンのプラグインは必要ですか?

いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています(Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト)。