読者です 読者をやめる 読者になる 読者になる

藍と淡々

Unityでゲーム制作日記


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

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

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

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


===================

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

・Unity PersonalEdition 5.1.3f1
・iTween 2.0.5

===================


1、準備

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

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

// 例えば、gameObjectをVector3(10, 0, 10)の位置に5秒かけて移動させるとしたら、
// 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



2、フェードイン&アウト

まずは「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 () {
		// 2秒後にFadeIn()を、5秒後にFadeOut()を呼び出す
		Invoke("FadeIn", 2f);
		Invoke("FadeOut", 5f);
	}
	
	void FadeIn() {
		// SetValue()を毎フレーム呼び出して、1秒間に0から1までの値の中間値を渡す
		iTween.ValueTo(gameObject, iTween.Hash("from", 0f, "to", 1f, "time", 1f, "onupdate", "SetValue"));
	}
	void FadeOut() {
		// SetValue()を毎フレーム呼び出して、1秒間に1から0までの値の中間値を渡す
		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);
	}
}


最後に「FadeScript」を「Panel」にアタッチしてあげれば完了です。

プレイボタンを押してみましょう!



・・・無事フェードイン&アウトできたでしょうか。

iTweenを使えばとっても簡単ですね!

実はiTweenにFadeToというメソッドがあるんですが、GUITextかGUITextureでしか使えないので、uGUI環境下では動きません。。

一応Unity 5 に対応済みとは書いてあるんですが、細かい修正はまだのようです。。(*>_<*)ザンネン