(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

SpriteやImageで9Sliceを使う【Unity】【uGUI】


このエントリーをはてなブックマークに追加

この記事でのバージョン
Unity 2017.1.0f3


はじめに

今回はタイトル通り、SpriteやImageで9Sliceを使ってみようという記事です。

ここで言う9Sliceとは画像を9分割し、分割した領域毎に拡大縮小を行う処理の事です。


f:id:kan_kikuchi:20170804073319g:plain


なお、記事中の画像は以下のアセットを使っております。





設定

9Sliceを使うには事前に画像の設定が必要になります。

と言っても対象の画像を選択、InspectorからSprite Editorを開き、


f:id:kan_kikuchi:20170805061054j:plain


任意の9分割になるよう、Borderを設定するだけです。


f:id:kan_kikuchi:20170804071108j:plain


なお、Mesh TypeをFull Rectにしてないと

Spriteで9Sliceを使う際に警告が出てしまうの注意が必要です。


f:id:kan_kikuchi:20170805061231j:plain
f:id:kan_kikuchi:20170805061239j:plain


Image(uGUI)

では、uGUIで9Sliceを使う方法ですが、ImageTypeを変更するだけです。


f:id:kan_kikuchi:20170804071726j:plain


ImageTypeをSlicedにすると一般的な9Sliceになります。

(中央だけが上下左右に拡縮を行い、四隅は拡縮を行わず、それ以外は一定方向にのみ拡縮を行う)


f:id:kan_kikuchi:20170804074150g:plain


またImageTypeをTiledにすると拡縮ではなく、繰り返しを行う9Sliceになります。

(中央だけが上下左右に繰り返しを行い、四隅はそのまま、それ以外は一定方向にのみ繰り返しを行う)


f:id:kan_kikuchi:20170804074320g:plain


なお、Fill Centerのチェックを外すと、中央部分を非表示にでき、

中央部分が透明の時は無駄な描画が無くなるので、処理軽減に繋がります。


f:id:kan_kikuchi:20170804074304j:plain


Sprite

次にSpriteでMaskを使う方法ですが、Imageと同様にDraw Modeを変更するだけです。


f:id:kan_kikuchi:20170805061622j:plain


Slicedにすると一般的な9Slice

Tiledにすると拡縮ではなく、繰り返しを行う9Sliceになる所も同じです。


ただし、TiledにするとImageにはなかったTile Modeという項目が追加されます。


f:id:kan_kikuchi:20170805062304j:plain


Continuousにすると一切の拡縮なしで繰り返され、

Adaptiveにすると一定の大きさまでは拡縮され、それを超えると繰り返されます。


f:id:kan_kikuchi:20170805063428g:plain


なお、Adaptiveで繰り返しが始まる境界はStretch Valueで設定できます。


f:id:kan_kikuchi:20170805063816j:plain


参考