Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

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

いつもひよこのたまごをご利用下さいましてありがとうございます!
おかげ様でチュートリアル数も10ゲーム目となりました!
チュートリアル一覧は
こちら からどうぞ!


スポンサーリンク

Unity5.1.1f1 Personal(2015年6月)
f:id:hiyotama:20150624205139p:plain

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

以前書いたこちらの記事の、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を開いて下さい〜


f:id:hiyotama:20150624222725p:plain
設定し、Sprite Editorを開く


Sprite EditorではPositionを以下のように設定して画像を囲い、Borderを以下のように設定し画像を9分割して下さい〜


f:id:hiyotama:20150624223043p:plain
画像を9分割する


ここまで設定できたらImage Type: Slicedを有効にすることができるので、Source ImageにWindow画像を指定して画面に表示してみましょう〜


f:id:hiyotama:20150624223433p:plain
Width: 100、Height: 100


この状態で画像を大きくしても小さくしても、画像を9分割したうちの四隅は変わりません〜


f:id:hiyotama:20150624223549p:plain
WIdth: 50、Height: 50


f:id:hiyotama:20150624223630p:plain
WIdth: 400、Height: 200


また、Fill Centerをfalseにすると9分割したうちの中央部分を消去することができます〜


f:id:hiyotama:20150624223804p:plain
Fill Center: false


③Image Type: Tiled
Image TypeをTiledにすると、Sprite画像が自動的に並べて表示されます〜


Width: 256、Height: 256にして、128 * 128のひよこの画像を並べてみます〜


f:id:hiyotama:20150624224220p:plain


④Image Type: Filled
Image TypeをFilledにすると、画像の表示割合を指定することができます〜


Fill MethodをHorizontalにしてFillOriginをLeftにすると、画像の左端を基点にしてFill Amountに指定した割合分だけ画像が表示されます〜例えば以下の設定にすると

f:id:hiyotama:20150624224633p:plain
画像左側を基点にして横向きに3割表示


このように表示されます〜

f:id:hiyotama:20150624224716p:plain


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のひよこエッセンスでした〜

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