こんにちは、とまです。
本日は、画像の9-Slice加工について学習していきましょう！

UnityでUIを作っていると、

「この画像を横長にしたいけど、端っこまで引き伸ばされてしまう……」

という問題に遭遇することがあります。

例えば、ゲームのUIに使う「木製の看板」や「羊皮紙」「金属製のパネル」などです。

普通に画像を拡大すると、四隅や枠まで一緒に引き伸ばされてしまいます。

そこで便利なのが、今回紹介する 9-Slice（9スライス） です。

9-Sliceを使うと、画像を9つの領域に分けて、四隅などの重要な部分を維持したまま、中央部分を伸縮させることができます。

この記事では、Unityで実際に9-Sliceを設定する方法を、初心者向けに順番に解説します。

この記事で作るもの

今回は、ゲームで使うUIパネルを例にします。

例えば、こんな羊皮紙の画像があるとします。

この羊皮紙を、ゲーム画面の幅に合わせて、

のように横長にしたいとします。

普通に拡大すると、羊皮紙の端まで引き伸ばされてしまいます。

9-Sliceを使うと、

のように、端を維持したまま中央部分を伸ばすことができます。

9-Sliceとは？

まず、9-Sliceがどのような仕組みなのか簡単に確認しておきましょう。

9-Sliceでは、1枚の画像を次の9つの領域として扱います。

このうち、主に次のような役割になります。

• ①③⑦⑨：四隅
• ②⑧：上・下の辺
• ④⑥：左・右の辺
• ⑤：中央

9-Sliceでは、四隅をそのまま維持しながら、辺や中央部分を必要なサイズに合わせて伸縮できます。

そのため、UIの枠やパネルなど、サイズが変わる可能性がある画像に向いています。

UnityのSprite Editorでは、Left / Top / Right / BottomのBorderをピクセル単位で指定できます。

9-Sliceを使うと何が便利？

例えば、メニュー用のUIを作るとします。

スマートフォンの画面サイズに合わせて横幅を変更するには
横幅を増やせばいいですよね？

しかし、普通の画像をそのまま拡大すると、
横に長いという見た目にはなっても、
画像そのものが全体的に引き伸ばされます。

特に枠や装飾がある画像では、

• 四隅が横に伸びる
• 枠が太くなる
• ドット絵が崩れる
• 装飾が不自然になる

といった問題が起きます。

9-Sliceなら、四隅を維持したまま中央部分を伸ばせるため、このようなUIを作りやすくなります。

9-Sliceに使う画像を用意する

まず、9-Sliceに使用する画像を用意します。

今回は例として、羊皮紙のUIパネルを使います。

ゲーム用のUI素材として生成する場合は、中央部分をなるべくシンプルにしておくと9-Sliceが使いやすくなります。

重要なのは、

「伸ばしたくない装飾を端に配置する」

ことです。

Unityに画像を追加する

用意したPNG画像を、UnityプロジェクトのAssetsフォルダへドラッグ＆ドロップします。

例えば、

Assets
└── Art
    └── UI
        └── Parchment
            └── parchment_panel.png

という構成にしておくと分かりやすいです。

UI素材をまとめて管理したい場合は、

Assets
└── Art
    └── UI

の中に、

• Parchment
• Metal
• Buttons
• Icons
• Windows

などのフォルダを作っておくのもおすすめです。

Texture TypeをSpriteに変更する

UnityのProjectウィンドウから、

parchment_panel.png

をクリックします。

するとInspectorに画像の設定が表示されます。

まず、

Texture Type

を確認します。

ここを、

Sprite (2D and UI)

に変更します。

Sprite Editorを開くためには、画像のTexture TypeをSprite (2D and UI)に設定する必要があります。

Filter Modeを設定する

今回の画像はドット絵なので、

Filter Mode

も設定しておきます。

Point (no filter)

を選択します。

ドット絵では、Pointにしておくことで画像を拡大したときにピクセルの境界がぼやけにくくなります。

最後に、

Apply

を押します。

Sprite Editorを開く

画像を選択した状態でInspectorを見ると、

Sprite Editor

というボタンが表示されます。

これをクリックします。

Sprite Editorは、Spriteの範囲やBorderなどを設定するためのUnityの編集画面です。

Texture TypeがSprite (2D and UI)になっていない場合、Sprite Editorボタンは表示されません。

Sprite EditorでBorderを設定する

Sprite Editorを開くと、画像が表示されます。

ここで今回の9-Sliceで最も重要な設定を行います。

それが、

Border

です。

Borderは、

「ここから外側は、9-Sliceで伸ばしたくない部分です」

とUnityに教えるための設定です。

Borderの設定方法

Sprite Editorで画像を選択すると、画像の周囲に緑色の線が表示されます。

この線をドラッグすることでBorderを設定できます。

また、Sprite Editorの設定欄から、

• Left
• Top
• Right
• Bottom

を数値で指定することもできます。

Borderはピクセル単位で設定できます。

どこまでBorderにすればいい？

ここが初心者にとって一番分かりにくいところです。

基本的には、

「絶対に引き伸ばしたくない部分」までBorderにする

と考えると分かりやすいです。

例えば羊皮紙なら、四隅の破れや装飾を守りたい場合は、その部分をBorderに含めます。

例えば画像が128×32pxなら、

Left   = 6
Right  = 6
Top    = 6
Bottom = 6

などから試してみることができます。

ただし、これは決まった正解ではありません。

画像によって、

Left   = 8
Right  = 8
Top    = 5
Bottom = 5

などに調整します。

Borderを設定したらApply

Borderを設定したら、Sprite Editorの

Apply

をクリックします。

これで設定したBorderがSpriteに保存されます。

Sprite Editorで変更した内容は、Applyで反映し、Revertで破棄できます。

ここまでで、

画像側の9-Slice設定は完了です。

Canvasを作る

次に、実際にUIとして使ってみます。

Hierarchyウィンドウで右クリックします。

右クリック
↓
UI
↓
Canvas

Canvasがすでにある場合は、新しく作る必要はありません。

UI Imageを作る

Canvasを右クリックして、

UI
↓
Image

を選択します。

Hierarchyは、

Canvas
└── Image

となります。

Source Imageに羊皮紙を設定する

作成したImageを選択します。

Inspectorに、

Image

コンポーネントがあります。

その中に、

Source Image

という項目があります。

ここへ、

parchment_panel

をドラッグ＆ドロップします。

すると、Canvas上に羊皮紙が表示されます。

Image TypeをSlicedに変更する

ここが最後の重要ポイントです。

Imageコンポーネントには、

Image Type

という項目があります。

通常は、

Simple

になっています。

これを、

Sliced

に変更します。

これでUnityがSpriteのBorder設定を使って9-Sliceとして表示してくれます。

UnityのImageにはSimple、Sliced、Tiled、Filledなどの表示方式があり、Slicedでは9つに分割されたSpriteとして扱い、端を維持しながらサイズ変更できます。

RectTransformのサイズを変更してみる

Imageを選択したまま、

RectTransform

の、

• Width
• Height

を変更してみましょう。

例えば、

Width  = 400
Height = 100

にします。

さらに、

Width  = 800
Height = 100

に変更してみます。

すると、羊皮紙の端は維持されたまま、中央部分が伸びるはずです。
これが9-Sliceです。

うまくいかないときの確認ポイント

9-Sliceがうまく動かない場合は、次の項目を確認しましょう。

チェック1：Texture Type

画像を選択して、

Texture Type
↓
Sprite (2D and UI)

になっているか確認します。

チェック2：Border

Sprite Editorを開いて、

Left
Top
Right
Bottom

のBorderが設定されているか確認します。

BorderはSprite Editorで設定できます。

チェック3：Apply

Sprite EditorでBorderを変更したあと、

Apply

を押したか確認します。

チェック4：Image Type

UIのImageを選択して、

Image
└── Image Type
      ↓
    Sliced

になっているか確認します。

チェック5：Sprite Rendererではないか

ここは初心者が間違えやすいポイントです。

9-SliceのBorder設定は、UnityのUIシステムで使うものです。Unity公式マニュアルでも、Sprite Editorで設定したBorderはUIシステムでサポートされ、2D Sprite Rendererではサポートされないと説明されています。

今回のような、

画面上部のアイテムバー
画面下部のツールバー
ボタン
ウィンドウ
ダイアログ

などには、基本的にUIのImageを使うと考えると分かりやすいです。

「背景」と「文字・アイコン」は分ける

UIを作るときに、もう一つ重要なポイントがあります。

例えば、

┌──────────────────────────┐
│ DAY 12                   　　　　　　　　　　　　　│
│ [食料] 1250 [木材] 5320  　　　　　　　　　　　　　│
└──────────────────────────┘

というUIを作るとしても、これを1枚の画像にしてはいけません。

おすすめは、

TopBar
├── Background
├── DayText
├── Food
│   ├── Icon
│   └── Amount
├── Wood
│   ├── Icon
│   └── Amount
└── Parts
    ├── Icon
    └── Amount

という構成です。

この場合、

Backgroundだけ9-Slice

にします。

文字やアイコンはUnityのUIとして別々に配置します。

9-Sliceの基本手順まとめ

最後に、今回行った操作をまとめます。

① 9-Slice用の画像を用意
        ↓
② UnityにPNGを入れる
        ↓
③ Texture Typeを
   Sprite (2D and UI)にする
        ↓
④ Filter Modeを
   Point (no filter)にする
        ↓
⑤ Apply
        ↓
⑥ Sprite Editorを開く
        ↓
⑦ Borderを設定
   Left / Top / Right / Bottom
        ↓
⑧ Apply
        ↓
⑨ Canvasを用意
        ↓
⑩ UI > Imageを作成
        ↓
⑪ Source Imageに画像を設定
        ↓
⑫ Image Typeを
   Slicedに変更
        ↓
⑬ RectTransformのサイズを変更
        ↓
⑭ 端が維持されて中央だけ伸びれば完成！

9-Sliceを一言で覚えるなら

9-Sliceを難しく考える必要はありません。

覚えることは、

「画像の端を守って、中央を伸ばす」

これだけです。

Unityでは、

Sprite EditorでBorderを設定する

↓

UI ImageのImage TypeをSlicedにする

という2つの操作が基本になります。

まとめ

今回はUnityの9-Sliceについて、実際の操作方法を紹介しました。

9-Sliceは、画像を9つの領域として扱い、四隅などを維持したまま中央部分を伸縮させる機能です。

特に、

• UIパネル
• ボタン
• ウィンドウ
• ツールバー
• メッセージボックス
• アイテムバー

など、サイズが変わる可能性のあるUIで活躍します。

今回のようなドット絵ゲームでは、普通に画像を拡大すると枠や装飾まで引き伸ばされてしまいます。

そこで9-Sliceを使えば、枠をきれいに保ったままUIを拡大できます。

特に覚えておきたい操作は、

Texture Type
↓
Sprite (2D and UI)

Sprite Editor
↓
Borderを設定

UI Image
↓
Image Type = Sliced

の3段階です。

これさえ覚えておけば、Unityでサイズ変更可能なUIを作るときにかなり便利になります。

今回の説明は以上です！
それでは、またお会いしましょう～！