【NGUI】スライスの設定して画像を引き延ばす

UIに限らず画像のサイズはできるだけ最小に抑える必要があります。メモリーの節約もあるし、アプリ容量の削減にもなります。今回紹介するNGUIのスライス機能を使えば、最小限の画像データで大きなUI画像を作成することができます。

スライス Sliced

「NGUI Sprite」をアタッチすると、以下のようなコンポーネントが作成されます。今回の引き伸ばしを実装したい場合にはTypeを「Sliced」に合わせてください。

次に使用する画像を選択します。そして、画像の右側にある「Edit」ボタンを押します。

そうすると、テクスチャアトラスの設定画面が出てきます。ここで、どのように画像を引き延ばすかを調整できます。下記赤い枠の数字を調整します。

各線の内側が引き伸ばされる領域になります。

こうすれば、実際の画像は以下のようになります。

この画像Slicedを使わなければ、このような感じです。

このように画像を工夫すれば、小さい画像データから適切なUIを作ることができます。この辺りは画像を作成するときに、同引き伸ばしをすればいいのかを予め考えて作る必要があるのですが、実際の効果は大きいのでぜひ利用をしてみましょう。