シェアする

Unityアプリにフェードイン・フェードアウトを実装する方法|Part2

前回の記事でフェードイン・フェードアウトを実行するコードを紹介しました。

今回はコードの詳しい解説をしていきます。

はじめに

前回の記事を確認していない方はこちらからお願いします。

Unityアプリにフェードイン・フェードアウトを実装する方法|動画あり|Part1
Unityでゲームを作っていると、タイトル画面からステージ選択画面などへシーンを切り替えることがあると思います。 そん...

また、前回のコードを確認しながら解説を見ていただきたいので、同じコードを貼っておきます。解説のみ確認したい方は飛ばしてください。

using UnityEngine;
using System.Collections;

public class Fade : MonoBehaviour {

	GameObject fadeObj;

	float startTime;

	public int fadeTime;
	Color alpha;
	string fadeStart;

	// Use this for initialization
	void Start () {
	 
		fadeObj = GameObject.Find ("Fade");
		startTime = Time.time;
		fadeStart = "FadeIn";

	}
	
	// Update is called once per frame
	void Update () {

		switch (fadeStart) {
		case "FadeIn":
			alpha.a = 1.0f - (Time.time - startTime) / fadeTime;
			fadeObj.GetComponent ().color = new Color (0, 0, 0, alpha.a);
			break;
		case "FadeOut":
			alpha.a = (Time.time - startTime) / fadeTime;
			fadeObj.GetComponent ().color = new Color (0, 0, 0, alpha.a);
			break;
		}

		if (Input.GetButtonDown ("Jump")) {
			fadeStart = "FadeOut";
			startTime = Time.time;
			Invoke ("Load", 1.5f);
		}
	}
	public void Load(){
		Application.LoadLevel (Application.loadedLevelName);
	}
}

コードの説明

「fadeObj」-> 黒い画像

「startTime」-> 現在の時間

「fadeTime」-> フェードイン・フェードアウトが完了するまでの時間

「alpha」-> 画像の色

「fadeStart」-> フェードインなのかフェードアウトなのかの判定

になっています。自分でわかりやすい名前に変更してみてください。

Start(){ }

fadeObjを取得。

startTime -> シーンが開始されてから経過した時間を入れる。

fadeStart -> シーンの初回起動時にフェードインを実行。

Update(){ }

Update内がより重要な項目なので、細かく解説していきます。

switch(fadeStart){ }

-> fadeStartが”FadeIn”だったらフェードインを実行し、

“FadeOut”だったらフェードアウトを実行する。

case “FadeOut”:

-> 画像のalpha値を徐々に0に近づける。※この計算については後述します。

fadeObj.GetComponent<SpriteRenderer>().color = new Color(0,0,0,alpha.a);

-> 画像のalpha値を設定。alpha以外の色は0,0,0なら黒、1,1,1なら白です。

case”FadeIn”については同じような処理なので、割愛。計算については同じように後述します。

また、Input.GetButtonDown(“Jump”)はシーンの再読み込みに使っているので、実際にはGameOverなどのタイミングに変更してください。

fadeStart = “FadeOut”;

->フェードアウトを実行。

startTime = Time.time;

->時間を初期化。

Invoke(“Load”, ○○)

-> ○秒後にLoadを呼び出す。

public void Load( ) { }

シーンを再読み込みする。

計算式の解説

先ほどのコードの中に計算式がありました。この計算は少しややこしい処理になっているので、重点的に説明します。

まず計算式を確認してください。

フェードインの場合

alpha.a = 1.0f – (Time.time – startTime) / fadeTime;

これはフェードインで使った計算式なので「Time.time」=「startTime」になっています。(Start内でstartTime = Time.timeとなっているため)

つまり

alpha.a = 1.0f – 経過時間 / フェードインが完了する時間

になりますよね。

仮にfadeTimeが1秒だったとするとフェードが完了した時は「1.0f – 1秒 / 1秒」になります。

1/1は1なので、1-1は0になりalpha.aも0になります。

スクリプト上のalpha値は0〜1の間で指定されるので、0はalpha値0、1はalpha値255ということになります。

フェードインはTime.timeとstartTimeの値が同じなので少しわかりやすいと思いますが、フェードアウトではTime.time と startTimeの値が変わります。

フェードアウトの場合

alpha.a = (Time.time – startTime) / fadeTime;

基本的な動作は同じなのですが、startTimeの値は「シーンを切り替えるタイミング」で変わります。

シーンを切り替えるタイミングでstartTime = Time.timeにすることを忘れないようにしてください。

仮にシーンを起動してから10秒経ったとします。

そのタイミングで、startTime = Time.timeをすることでstartTime = 10になりますね。

時間は経過していくのでTime.timeは11秒12秒と増えていきますが、startTimeは10のままなので11秒 と 10秒の差は1秒となります。

1秒 / 1秒は1なのでalpha.a = 1となり、フェードアウトが完了します。フェードインと違って1.0fが無くなったのは最終的な値が1になるようにするためですね。

もしフェード完了時間を2秒にしたい時はfadeTimeの値を2に変更することで、(12秒 – 10秒) / 2 = 1になるという計算です。

最終的に1になるか0になるか判断するだけなので、計算がわかってしまえば簡単な処理ですね。

ここまで理解できたら、実際に動作を確認しましょう。

>こちらの記事もよく読まれています<

まとめ

今回の方法を使えばフェードイン・フェードアウトを簡単に実装することができます。

ただ動くゲームを作るだけでなく、シーンの切り替えにフェードアウトさせたりすることでより一層ゲームっぽさが出せるかと思います。

まだフェードを実装していない人はぜひ使ってみてください。

ではまた。

この記事が気に入ったら
いいね ! しよう

Twitter で

シェアする

フォローする