Unityアプリにフェードイン・フェードアウトを実装する方法|動画あり|Part1

シェアする

Unityでゲームを作っていると、タイトル画面からステージ選択画面などへシーンを切り替えることがあると思います。

そんな時にパッと切り替わっても良いのですが、少し味気ないですよね。そのような時はフェードイン・フェードアウトを実装してみましょう。

はじめに

まずフェードインとフェードアウトの説明をします。既に知っている方は飛ばしてください。

フェードイン・フェードアウトとはシーンの切り替え時や再読み込み時に、ゆっくりと画面を暗くしたり逆にゆっくり明るくしたりという処理です。

音楽の編集などでも再生終了に近づくと少しづつ音量が小さくなりますよね。それと同じと考えていただければわかりやすいと思います。

詳しくは動画を撮影しましたのでこちらから確認してください。


今回作成する処理では必要になるものは「黒い画像」「コード」だけです。コードもわかってしまえば簡単なものなので、ぜひ試してみてください。

ではまず黒い画像の配置から説明します。

オブジェクトを配置しよう

まずはフェードに使うオブジェクトを配置しなければなりません。

黒い画像(無ければ背景画像の色を黒に変更したもの)を用意します。そのオブジェクトをカメラが映る範囲と同じサイズにしてください。

念のためカメラの範囲より少し大きくしておくと良いかもしれません。

スクリーンショット 2016-02-26 8.44.46

Unityでの操作はこれだけで一旦完了です。簡単ですね。続いて、コードを作成していきましょう。

コードを作成

Fadeなど適当な名前のスクリプトを新規作成してください。新規作成したスクリプトに以下のコードを追加します。

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);
	}
}

fadeTimeにはフェードイン・フェードアウトが完了するまでにかかる時間を設定してください。

また、フェードアウトを実行している間に次のシーンが読み込まれてしまっては意味がないので、今まで呼び出していた次シーンはLoad( ) に書くようにしてください。

このコードがフェードイン・フェードアウトさせるものになっています。若干ややこしいので、次回このコードの詳しい説明をしていきます。

まとめ

フェードインやフェードアウトは最近のゲームでは必ずと言って良いほど実装されています。そうすることがゲームっぽさをより引き出すということに繋がるので、ぜひ実装してみてください。

フェードイン・フェードアウトを実装することで、シーン切り替えのタイミングがわかりやすくもなりますしね。

では詳しい解説を見ていきましょう。

Part2へ続く>>

Unityアプリにフェードイン・フェードアウトを実装する方法|動画あり|Part1
この記事が気に入ったら
いいねで応援おねがいします!

~クリアメモリ~

シェアする

フォローする

%d人のブロガーが「いいね」をつけました。