Unity5.1.1f1 Personal(2015年6月)
ひよこエッセンスの時間です〜
以前書いたこちらの記事の、Image Typeについて解説致します〜
uGUIのImageまとめ(Image Type)
①Image Type: Simple
まずはImage TypeのSimpleからいきましょう〜こちらはSprite画像をそのまま表示します〜
WidthとHeightを大きくすると、そのままSprite画像は引き伸ばされます〜
また、Preserve Aspectを使用することができます〜
②Image Type: Sliced
Image TypeをSlicedにすると、画像を引き伸ばした時も画像の四隅はそのままで、中間画像のみを引き伸ばしてくれます〜
Image TypeのSlicedは、Sprite EditorにてBorderを設定した画像に対してしか使えませんので、素材サイトさんから画像をダウンロードしましょう!
こちらのサイトのこちらのページのwindow.zipを使わさせて頂きます〜ありがとうございます〜
ダウンロードが完了したら、windowblue.pngをImportして下さい〜
Importしたら、Texture TypeをSprite(2D and UI)、Sprite ModeをMultipleに変更し、Sprite Editorを開いて下さい〜
設定し、Sprite Editorを開く
Sprite EditorではPositionを以下のように設定して画像を囲い、Borderを以下のように設定し画像を9分割して下さい〜
画像を9分割する
ここまで設定できたらImage Type: Slicedを有効にすることができるので、Source ImageにWindow画像を指定して画面に表示してみましょう〜
Width: 100、Height: 100
この状態で画像を大きくしても小さくしても、画像を9分割したうちの四隅は変わりません〜
WIdth: 50、Height: 50
WIdth: 400、Height: 200
また、Fill Centerをfalseにすると9分割したうちの中央部分を消去することができます〜
Fill Center: false
③Image Type: Tiled
Image TypeをTiledにすると、Sprite画像が自動的に並べて表示されます〜
Width: 256、Height: 256にして、128 * 128のひよこの画像を並べてみます〜
④Image Type: Filled
Image TypeをFilledにすると、画像の表示割合を指定することができます〜
Fill MethodをHorizontalにしてFillOriginをLeftにすると、画像の左端を基点にしてFill Amountに指定した割合分だけ画像が表示されます〜例えば以下の設定にすると
画像左側を基点にして横向きに3割表示
このように表示されます〜
Fill MethodがVerticalだと縦、Radial90だと90度、Radial180だと180度、Radial360だと360度で円を描くように増減します〜
ちなみにFill Amountはスクリプトから操作することもできます〜以下のソースをImageオブジェクトに付けると、クリックしている間はFill Amountが増え続けます〜(1を超えると0に戻ります!)
using UnityEngine; using UnityEngine.UI; using System.Collections; public class FIllAmountScript : MonoBehaviour { Image image; void Start () { image = GetComponent<Image>(); } void Update () { if (Input.GetMouseButton (0)) { image.fillAmount += 0.02f; if (image.fillAmount >= 1) { image.fillAmount = 0; } } } }
FillAmountScript.cs
続いてClockwiseの説明に入ります〜Fill Amountを増やした時、Clockwiseがtrueだと時計回りに、falseだと反時計回りに画像の表示領域が増加していきます〜
最後に、Image Type: FilledはSimpleと同様、Preserve Aspectが使えます〜
以上、Image typeのひよこエッセンスでした〜
ありがとうございました〜