トランジションを使った綺麗な画面切替・場面転換

新型
tsubakit1.hateblo.jp

ノーマルフェードアウトトランジションで画面遷移するアセットを自作してみた。
FadeCamera
ライセンスはとりあえずMITで公開。
その内AssetStoreにAssetStoreLicenseで公開する予定

UnityのApplication.LoadLevelで画面遷移した場合のような、画面が「ガッ」と停止し次のシーンが始まるのは嫌な人も多い。その為、多くの場合はフェードアウト・フェードインを行い画面が自然に遷移するような形の実装をする事が多い。

Unityであっさりとフェードインができた
 【Unity】シーン遷移時のフェードイン・フェードアウトを実装してみた

今回用意したトランジションは、これをもう少し発展させトランジションのルール画像（白黒画像）からフェードのパターンを作れるようにした。これを使用すると、もう少し複雑な形状のフェードが可能になる。例えば、下のようなパターンの画像を使用した場合、右のような形でトランジション画像が表示可能となる。

上記の画像はFor You様が公開されているルール画像を使用させていただきました。

一応フェードインするタイミング以外ではオブジェクトを非アクティブにしたりコンポーネントをdisableにしたり、フィルレートとかその辺りの物を可能な限り節約した。パフォーマンス的にも問題ないはず。（ただ画面全体を覆うので、フィルレートが厳しいのは…）

使い方

FadeCameraをダウンロードしてインポート
FadeCamera

シーンにFadeCameraプレハブを配置する。

Untitled_-_UnityUtilitys_-_PC__Mac___Linux_Standalone.jpg

スクリプト上で制御する場合、下のような形で制御する。例えばGameControllerでLoadLevelを実行している箇所で下のような感じに修正する。下のソースだと１秒間のフェードアウトを実行し暗転中にシーンをロード、フェードインで次のシーンを表示するような形の処理が実行される。


using UnityEngine;

using System.Collections;
public class Fade : MonoBehaviour

{

	void Update ()

	{

		if (Input.GetKeyDown (KeyCode.Space)) 

			LoadLevel ("次のシーン名");

	}
	void LoadLevel (string name)

	{

		float time = 1; // フェードアウト時間

		// フェードアウト

		FadeCamera.Instance.FadeOut (time, () =>

		{

			// フェードアウト完了後の処理（画面は真っ暗）

			Application.LoadLevel(name); //　シーン遷移
			// フェードイン

			FadeCamera.Instance.FadeIn (time, () =>

			{

				//  フェードイン完了後の処理

			});

		});

	}

}

ルール画像の更新は、FadeCameraプレハブ以下のfadein effectオブジェクトのマテリアルのMaskをルール画像に更新する。Baseの方はトランジション時に表示される画像。例えばこのBaseの画像を真っ赤すれば、画面を切り替える際に画面が真っ赤になる。

Fadecam_Sample2_unity_-_UnityUtilitys_-_PC__Mac___Linux_Standalone.jpg

スクリプトから変更する場合、以下の様な処理を実行することでマスク画像を変更出来る。基本的にはマスクやローディング時の画像はスクリプトから変更する事を推奨。


FadeCamera.Instance.UpdateMaskTexture(テクスチャ);

もう少し簡単な切替

スクリプト云々でやるのが面倒な人向けに、もう少し簡単に切り替えるFadeSwitchを用意した。このコンポーネントはFadeCameraに付けておくとコンポーネントのenableを切り替えるとフェードアウト・フェードインを切り替える。

方法は簡単、フェードインする場合は以下のようなコードを実行するだけ。


FadeSwitch.IsFadeIn = true;

方法は簡単、フェードアウトする場合はFadeSwitch.IsFadeIn=falseみたいな感じ。（FadeSwitch.IsFadeInがtrueだとゲーム画面が表示中、falseだとローディング画面みたいなイメージ）

FadeSwitchはFadeが完了したらGameControllerタグを持つオブジェクトにFadeFinishedを通知する。

サンプルシーンの紹介

Fadecam Crossfade	画面をクロスフェードする（非Proでも動く）
Fadecam Easy Switch	FadeSwitch.IsFadeInでの切替デモ
Fadecam Sample1	通常の方法（ローディング画面を表示）
Fadecam Sample2	通常の方法（黒い画面）
Fadecam transitionFirst	起動時にフェードインする