シーンを遷移するときに画面が瞬時に切り替わります。シーン遷移するときにエフェクトなどを入れたいなと思い、調べたところ下記の記事を発見しました。
tsubaki_t1様のFadeCamera2を使わせていただこうかと思います。
FadeCamera2をプロジェクトへのインポート
FadeCamera2はGitHubの以下のアドレスにあります。
リンク先のFadeCamera2.unitypackageをダウンロードしておきます。
ダウンロードしたファイルをドラッグ＆ドロップでUnityプロジェクトへインポートします。
importボタンを押して、インポートします。
フェードイン/フェードアウトを実装
実装は簡単、インポートした中にあるFadeCanvasという名前のPrefabをHierarchyにもっていくだけ
InspectorのCutout Rangeを変更することでフェードイン/フェードアウトができるようです。
プログラムに実装してみる
Scriptを確認したところFadeというスクリプトにFadeInとFadeOutというのが用意されているのでこれを使っていきます。
遷移元のシーンでFadeInを呼び出します。
using UnityEngine;
using UnityEngine.SceneManagement;
public class TitleScript : MonoBehaviour
{
[SerializeField] GameObject FadeObject;
private void OnAttack()
{
Debug.Log("OnAttack");
CallScene();
}
private void CallScene()
{
//Fadeを取得し、FadeInする
Fade fade = FadeObject.GetComponent<Fade>();
fade.FadeIn(1f, () => {
//FadeInが終わった後に呼び出される
SceneManager.LoadScene("StageScene");
});
}
}以下のように書いても同じです。
private void CallScene()
{
//Fadeを取得
Fade fade = FadeObject.GetComponent<Fade>();
fade.FadeIn(1f, ChangeScene); //フェードインが終わった後にChangeSceneを呼ぶ
}
private void ChangeScene()
{
SceneManager.LoadScene("StageScene");
}遷移先ではFadeOutさせます。どうやらFadeのスクリプトは、実行時強制的にCutout Rangeが0になってしまいます。これをどうにかしようと思いFadeのScriptを修正しました。
public class Fade : MonoBehaviour
{
IFade fade;
//追加したプロパティ ここから----＞
public float FadeRange
{
get {
return fade.Range;
}
set {
cutoutRange = value;
fade.Range = cutoutRange;
}
}
//<---- ここまで
void Start ()
{
Init ();
fade.Range = cutoutRange;
}
・・・それでは遷移先を以下のようにしました。
using UnityEngine;
public class StageScript : MonoBehaviour
{
[SerializeField] GameObject FadeObject;
private Fade fade;
void Awake()
{
fade = FadeObject.GetComponent<Fade>();
//Fadeにする
fade.FadeRange = 1f;
}
// Start is called once before the first execution of Update after the MonoBehaviour is created
void Start()
{
//１秒でFadeOutする
fade.FadeOut(1f);
}
}遷移先もFadeCanvasをHierarchyに入れてセットします。以下のようになりました。
ルール画像
ルール画像を利用することでいろんなアニメーション(トランジション)ができるように作られています。素晴らしいですね。
トランジションを行うためのルール画像が必要になるのでそれを用意します。
ルール画像は下記のサイト様のものを使わせていただきます。
このルール画像もドラッグ＆ドロップでUnityプロジェクトへインポートします。
インポートした画像の設定を変更します。
設定した画像をFadeImageのMask Textureにセットします。
以下のようになりました。
Hierarchyに置いてやりましたが、もし一度切り替わったらしばらく使わないのであればPrefab化されているので都度、InstantiateしてFadeIn、FadeOutしてDestoryするのもいいですね。
コメント