【Unity】iTweenを使って簡単にフェードイン＆フェードアウトを実装する

こんにちは(ؓؒؒؑؑؖؔؓؒؐؐ⁼̴̀ωؘؙؖؕؔؓؒؑؐؕ⁼̴̀ )

iTween、便利ですよね‹‹\(´ω` )/›› ‹‹\( 　´)/›› ‹‹\( ´ω`)/››

今回はiTweenを使ってフェードインとフェードアウトの実装の仕方を紹介していきます。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

この記事を書いた時のバージョン（Mac）

・Unity PersonalEdition 5.1.3f1
・iTween 2.0.5

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

１、準備

iTweenを持ってない方はAsset Storeからダウンロードしておきましょう。

iTweenがあればめんどくさいコードを書かずに、簡単にアニメーションさせることができるので非常に役に立ちます(๑•̀ㅂ•́)و✧

// 例えば、gameObjectをVector3(10, 0, 10)の位置に５秒かけて移動させるとしたら、
// Update()内にめんどくさいコードを書かなくてはなりませんが、iTweenならこれでおっけ。
iTween.MoveTo(gameObject, new Vector3(10, 0, 10), 5f);

f:id:MegumiSoft:20150908214858p:plain

https://www.assetstore.unity3d.com/jp/#!/content/84

インポート時にポップアップが出ますが、「Go Ahead!」をクリックで問題ないです。

f:id:MegumiSoft:20150908215136p:plain:w400

＊iTweenの基本的な使い方が知りたい方は、このページがわかりやすいかと思います。www40.atwiki.jp

２、フェードイン＆アウト

まずは「Panel」を用意します。

f:id:MegumiSoft:20150908215842p:plain:w300

次に、アンカーの位置を中心に変更します。

f:id:MegumiSoft:20150908221640p:plain:w300

そうしたら「Panel」のサイズを、Canvasから少しはみ出すくらいの大きさにします。

f:id:MegumiSoft:20150908220155p:plain:w300

これで準備完了！(๑˃̵ᴗ˂̵)وﾖｼ

あとはスクリプトでPanelのImageのアルファ値を変えてあげればOKです。

↓ここの値をいじることになります。

f:id:MegumiSoft:20150908220522p:plain:w300

「FadeScript」という名前でC#のスクリプトを用意して、以下のコードをコピペします。

using UnityEngine;

public class FadeScript : MonoBehaviour {

	void Start () {
		// ２秒後にFadeIn()を、５秒後にFadeOut()を呼び出す
		Invoke("FadeIn", 2f);
		Invoke("FadeOut", 5f);
	}
	
	void FadeIn() {
		// SetValue()を毎フレーム呼び出して、１秒間に０から１までの値の中間値を渡す
		iTween.ValueTo(gameObject, iTween.Hash("from", 0f, "to", 1f, "time", 1f, "onupdate", "SetValue"));
	}
	void FadeOut() {
		// SetValue()を毎フレーム呼び出して、１秒間に１から０までの値の中間値を渡す
		iTween.ValueTo(gameObject, iTween.Hash("from", 1f, "to", 0f, "time", 1f, "onupdate", "SetValue"));
	}
	void SetValue(float alpha) {
		// iTweenで呼ばれたら、受け取った値をImageのアルファ値にセット
		gameObject.GetComponent<UnityEngine.UI.Image>().color = new Color(0,0,0, alpha);
	}
}