テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】Spriteで9 Sliceを使う

f:id:tsubaki_t1:20170405210606j:plain

今回はUnity 5.6から可能になったSpriteでの9 Sliceについて紹介します。

Unity 5.6から搭載された 9 Slice(スプライト向け)

Spriteで表現しているスプライトのスケールを引き伸ばした場合、通常では下のように指定軸に引き伸ばされていました。

このため、ピクセルと一致するような連続したスプライトを表現したい場合下のような手法が必要でした。

  • 大量のスプライトを並べる
  • TextureをRepeatに設定し、UV値のTilingを小さくする

f:id:tsubaki_t1:20170405211607j:plain

f:id:tsubaki_t1:20170405212147j:plain

 

で今回Unity 5.6にやっと搭載された9 Sliceで、そういった手法からはある程度オサラバ出来るようになりましたヤッター。
下のアニメのようにスケールを変更しても、絵が引き伸ばされるような事はありません

f:id:tsubaki_t1:20170405211128g:plain

また、SpritePackerも使えます。

そのため「TextureをRepeatに設定し、UV値のTilingを小さくする」手法と比較してバッチングが効きやすいのも魅力的です。

f:id:tsubaki_t1:20170405224758j:plain

9 Sliceって?

tsubakit1.hateblo.jp

 

9 Sliceを使ってみる

スプライトの用意

今回搭載された9Sliceは、uGUIの9Sliceで使用していたような設定をそのまま使用します。

  1. SpriteEditorを開く
  2. 緑枠の範囲を繰り返したい範囲に設定
  3. Applyする

f:id:tsubaki_t1:20170405214823j:plain

なお、Tileを使用するSpriteのMeshTypeは、FullRectが良いそうです。

Sprite Tiling might not appear correctly because the Sprite used is not generated with Full Rect. To fix this, change the mesh type in the sprite's import settings to Full Rect

f:id:tsubaki_t1:20170405215833j:plain

タイリング(Tiled)

実際にタイルで表現してみます。

やることは簡単で、Draw ModeをTiledに設定するだけです。

これでスプライトを操作するモードf:id:tsubaki_t1:20170405220330j:plainでスプライトを動かすと、スプライトの表示を繰り返してくれます。

f:id:tsubaki_t1:20170405220235j:plain

f:id:tsubaki_t1:20170405215514g:plain

このモードになると、Scaleとは別にSize(Wideth、Height)が付きます。
TransformのScaleは単純な大きさ、WidethとHeightは高さと幅といった使い分けになるみたいです。

TiledのTile Mode

f:id:tsubaki_t1:20170405220742j:plain

Tile Modeは少し面白いです。

TileModeがContinuousだとスプライトは綺麗にタイル表現されますが、Adaptiveだと綺麗に本数が増えます。

f:id:tsubaki_t1:20170405220550g:plain

f:id:tsubaki_t1:20170405220834g:plain

TiledとSlicedの違い

DrawModeの設定にはTiledとSlicedの2種類があります。この中身は、中身を繰り返すかどうかです。

試しに下のようなスライトの挙動をわ~や~フレームも一緒に比較してみます。

f:id:tsubaki_t1:20170405221335j:plain

Slicedは四隅は固定していますが、上下左右中央を引き伸ばしています。

f:id:tsubaki_t1:20170405221552j:plain

Tiledは四隅は固定されていますが中身を繰り返しています。

f:id:tsubaki_t1:20170405221515j:plain

Colliderの大きさをあわせる

BoxCollider2D等はオブジェクトのScaleを見て初期値を判定しているのか、WidthとHeightで引き伸ばしたSpriteに使用すると大きさが一致しません。

これはAuto Tilingにチェックを入れると一致するみたいです。

f:id:tsubaki_t1:20170406082645j:plain

注意点

FullRectが使用される

Spriteの9Slice版の機能は、ポリゴンを繰り返す訳では無いみたいです。その為、Spriteと比較してフィルレート的な部分が無駄になるかもしれません。

f:id:tsubaki_t1:20170405223126j:plain

また5.6f3ではSingle SpriteのFull Rectでは無駄な領域を作ってしまうので、無駄なアルファ部分がある場合はMulti Spriteにして無駄な部分を刈り取った方が良さそうです。

f:id:tsubaki_t1:20170405222638j:plain

f:id:tsubaki_t1:20170405222647j:plain

長さに限界がある

残念ながら長さに限界があります。

あまりに長い(繰り返しの多い・ポリゴンの多い 多分6万頂点ぐらい)スプライトになると、下のようなエラーが出ます。

Cannot generate 9 slice most likely because the size is too big.

 UV Scrollは出来ない

ポリゴンのリピートの為、UV Scrollは出来ません。

いや、なんとか出来そうな気がしなくも…?

アニメーションは動くが使用するスプライトの大きさは固定にすべき

アニメーションはTiledの状態でも動きますが、アニメーションに使用するSpriteのサイズを固定にしないと変な動作になります。

 

感想

2Dプラットフォームゲーム(横スクロールアクション)を作る時とかには便利そうですね。タイルマップの次に欲しかったです。

関連

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp