【Unity開発】uGUIのImageの使い方(Image Type)【ひよこエッセンス】

Unity5.1.1f1 Personal(2015年6月)

ひよこエッセンスの時間です〜

以前書いたこちらの記事の、Image Typeについて解説致します〜

hiyotama.hatenablog.com

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を設定した画像に対してしか使えませんので、素材サイトさんから画像をダウンロードしましょう！

WOLF RPGエディター 画像・音声素材データ集

こちらのサイトのこちらのページの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のひよこエッセンスでした〜

ありがとうございました〜