Unityで9-sliceテクニックを使った効果的なUI作成方法

ゲームを作っている時にメッセージウィンドウなどのUIでサイズが異なる場合、引き伸ばしたりすると元の素材が崩れたりしませんか?
例えばこんな感じです。
アスペクト比が崩れた素材
こういう時にサイズ別に素材を作り直すってめんどくさいですよね?
そんな時に便利なテクニックが9-slice(ナインスライス)と呼ばれるものです。
UI作成時に非常に便利な方法で、Unityでもよく使用されます。
9-sliceは、画像を9つのセクションに分割し、それぞれの部分を個別にスケーリングできるようにするテクニックです。
これにより、さまざまなサイズに対応するUIエレメントを作成する際に、画像がピクセル化したり歪んだりするのを防ぐことができます。
今回はそれをやっていきたいと思います。

Unityスキルアップ、
始めるなら今

パズル、脱出、RPG...目標のゲームを完成させよう!

人気のUnity講座はこちら

Udemy講座

素材を準備する

まずは素材が無いとなんともなりませんね。
16*16のドットで適当な枠を作ってみました。
プロジェクトにインポートしてInspectorから設定をしていきましょう。
大切なのはMeshTypeをFull Rectにしておくことです。
MeshTypeをFull Rectに変更
公式のドキュメントによると9-SliceではMeshTypeがTightに設定されていると正常に機能しない可能性があるそうです。
この理由は、Sprite Renderer が 9 スライス用に設定されている場合のスプライトの生成と描画の方法に関係しています。だそうです。

SpriteEditor

次にSpriteEditorを開きます。
SpriteEditorボタン
開いたら画像を中央、四隅、および四辺の9つの部分に分割しますので、緑の線を移動してあげましょう。

こんな感じで9つに画像を分けました。
最後に忘れないようにApplyをクリックします。
Applyボタン
では実際に素材を配置してみましょう。

SpriteRenderer

とりあえず先程の素材をゲームシーンに配置してみて実験してみましょう。
SpriteRendererコンポーネントのDrawModeを色々設定していきます。

初期状態ですとSimpleになっていますが、これをSlicedかTiledに変更します。

Sliced

中央の部分が伸縮し、角の部分は固定サイズで保持され、辺の部分は一方向にのみ伸縮します。これにより、元のアスペクト比を保ちつつ、異なるサイズへの適応が可能になります。
WidthとHeightの値を変更していけばサイズが変わります。
この時に最初の画像のように横のラインが膨張したりしません。

Tiled

続いてTiledモードです。
こちらでは画像がタイル状に並べられて拡大されます。
画像の全体または一部が、繰り返しタイルのように配置されて、指定した領域を埋めます。これは、パターンやテクスチャが繰り返されるようなデザインに適しています。
先程の素材はシンプルでしたのでちょっとデザイン性のある枠素材を使ってみましょう。

このような感じで枠のデザインが引き伸ばされることがなく繰り返し使われてサイズが変わっていきます。

こういう素材の場合はSlicedモードにすると辺の部分が伸び縮みしてしまうので注意が必要です。

ちょっとライン部分が伸びちゃってますね。
素材に合わせてSlicedかTiledを使い分けると良いと思います。
ちなみにTiledモードにするとTileモードという選択肢が出てきます。
ContinuousAdaptiveをプルダウンで選択できるのですがそれぞれどういうことか触れておきます。

Continuous

初期状態ではこのContinuousになっています。
画像を均一なサイズのタイルとしてエリアに繰り返し配置します。
画像の元のサイズが保持され、どのようなエリアサイズであってもタイルのサイズは変わりません。
この結果、エリアの端でタイルが切れてしまうことがありますが、タイル自体の比率は常に一定です。

Adaptive

Adaptiveを選択すると、Unityは画像をタイル状に繰り返す際に、エリアのサイズに応じて画像のタイルサイズを自動的に調整します。
つまり、タイルのサイズが拡大・縮小され、エリアに合わせて最適なタイリングが行われるようになります。
これにより、タイルの切れ目が目立たない、滑らかなタイリングが実現されるそうです。

どちらが自分のやりたいことに適しているか実際に調整してみるとよいかと思います。

UI Image

ここまではSpriteRendererで実験してきましたが、勿論UIのImageでも使えます。
ちょっとやってみましょう。
このような感じでImageを配置し先程の画像を設定しましょう。
UIImageで9-slice
Inspectorを見るとImage Typeというプルダウンがあります。
ImageType
これがSpriteRendererで言うところのDrawModeにあたります。
9-Sliceに関係してくるのはSlicedとTiledです。
ではまずSlicedから見ていきましょう。

UI ImageのSliced

SpriteRendererのときとは異なりWidthとHeightがありませんね。
どこで縦横を設定するかというとRectTransformのWidthとHeightです。
試しに値を変更してみましょう。

SpriteRendererのSlicedのときと同じような挙動になりますね。
続いてTiledで見てみます。

UI ImageのTiled

こちらもサイズを変更するにはRectTransformのWidthとHeightの値を変更します。
この様になりました。

素材によってはこっちのモードの方が良さそうですね。

もう一つのFilledというImage Typeですがこれは今回の9-Sliceでは使いません。
一応動かしてみるとこんな感じです。

このモードを使った記事は過去に投稿していますので良かったら見てみてください。

ちなみにどちらのモードにも存在するFill CenterPixels Per Unit Multiplierについても触れておきます。

Fill Center

このチェックを外すと真ん中部分をくり抜いてくれます。

Pixels Per Unit Multiplier

UI Image内の画像に適用されるスケーリングファクターです。
この値を調整することで、画像の表示サイズを細かくコントロールできます。
具体的には画像のインポート時のPixels Per Unit(ピクセル・パー・ユニット)設定に乗算される値です。
たとえば、Pixels Per Unit Multiplierを2に設定すると、画像は元のサイズの2倍の大きさで表示されます。

詳しくは過去に紹介していますので、よかったら参考にしてみてください。

以上9-sliceに関しての紹介でした。
なにかの参考になれば嬉しいです。

おすすめUnityオンライン学習

一人でゲーム開発が不安な方はオンラインスクールで学習すると効率が良いと思います。
以下に当てはまる人は検討してみると良いかもしれません。

「ゲーム作りけど何から初めればいい?」
「入門書をの次に何をしたらいいの?」
「疑問や問題を一人で解決出来ない。。」
「ゲームを完成させる自信がない。。」
「気軽に質問できる環境が欲しい。。」

自分で学習することに限界を感じたら
オンライン学習しましょう!

Udemy

Udemy
特徴:教材動画買い切り型
レッスン方法:動画教材/Q&Aで質問
習得スキル:教材動画によって異なる
コース概要: ピンポイントで作りたいゲームジャンルの動画を見つけることができるかもしれません。 また頻繁にセールを開催していますのでゲーム開発講座が1500円~で購入することも可能です。
ゲームジャンル別おすすめ講座はこちら Udemy 詳細

テックアカデミー

テックアカデミー
特徴:現役エンジニア伴走型レッスン
レッスン方法:チャット(週2回)/テキストチャット/課題レビュー
習得スキル:オリジナルゲームアプリの作成
コース概要: 途中で挫折しないためにメンター(相談者)が週2回、マンツーマンであなたの質問・相談に答えてくれるので、ゲーム開発・プログラミング未経験の人でも安心してゲーム開発に取り組めます。転職したい人向けのサポートもあります。無料体験もあります。
テックアカデミー 詳細

テックスタジアム

テックスタジアム
特徴:ゲーム開発の為のオンラインスクール
レッスン方法:動画教材,Slackでの質問(24時間)
習得スキル: Unity,UnrealEngine、CG、企画、サーバー、AI、XR等
コース概要: ゲーム業界で必須な技術の習得が可能です。Slack上で待機している先生への24時間、何度でも質問できます。またIT・ゲーム業界への就職サポートが無料で受けられます。
ゲーム開発に特化したオンラインスクールですので、Unityはもとより、他のゲームエンジンやゲーム業界に興味がある方にはオススメです。
テックスタジアム 詳細

デジハリONLINE

デジハリONLINE
特徴:動画カリキュラム型レッスン
レッスン方法:動画講座/Slack/予約制Zoom相談
習得スキル:Unity基礎,実践/ハイクオリティ3Dゲーム
コース概要: デジタルハリウッド大学・大学院などを通じたデジタルコンテンツ業界とのつながりを活かし、最新かつ実践的なカリキュラムを提供しています。【基礎編】【実践編】とカリキュラムが分かれていて、それぞれに課題があり、ご自身の理解度を把握できます。最終的にはハイクオリティの3Dゲームが作れるようになります。
デジハリONLINE 詳細

関連記事

最後までご覧頂いてありがとうございました。

2dパズル

作って覚える 7つの2Dパズル

段階的にUnityゲーム開発をレベルアップ