【Unity】Unityでトランジションを使ったフェードイン・アウトでシーン推移する方法 第一回

 今回紹介するテーマは「Unityでトランジションフェードイン・アウトでシーン推移する方法」です。

 Unityでは、画面を推移する際のエフェクトなどが標準で用意されていないので、自前で用意する必要があります。ゲームのみを開発している人にとっては、あまり気にならないところかもしれませんが、私のように動画編集も併せてやっている人からすると不便で仕方ないです。

 ないものは仕方ないので、自前で用意する方法をまとめましたので、興味のある方ぜひチャレンジしてみて下さい。

目次

この記事での環境について

 この記事は、以下の環境で作成しております。

  • Unity 2020.3.30f1
  • Visual Studio 2022

前準備

  • FadeCamera2(トランジションのUnityパッケージ)
  • ルール画像

をダウンロードします。

トランジションのUnityパッケージ

 テラシュールさんが配布してくれている「FadeCamera2」パッケージをダウンロードします。

「FadeCamera2.unitypackage」を保存して下さい。

ルール画像

 以下のリンクからルール画像を使用条件を確認の上ダウンロードします。

For You
ルール画像 | For You 吉里吉里2/KAG3・Artemis Engine・Unity・AviUtlなどトランジション対応動画編集ソフト用ルール画像集です。お好みのトランジションがあれば幸いです。ご意見・ご感想...

 ダウンロード後、圧縮ファイルを解凍しておいて下さい。

パッケージを読み込んで修正する

 ここからはUnityプロジェクト内での操作になります。

「FadeCamera2」をインポートする

Unityのプロジェクトを作成して、上記でダウンロードしたトランジションパッケージを読み込みます。ProjectのAssetsの中にドラッグアンドドロップすることで読み込むことができます。

「FadeCamera2」のインポート画面が出ますので「Import」をクリックします。

読み込んだ「FadeCamera2」を修正する

 「FadeCameara2」を読み込むだけだと、配布された時期が古いせいかうまく機能しません。

そのため以下の修正を行います。

Assets>Fade>Scripts へ移動し、

 次に、Fade.csをエディタで開きます。
以下のようにプログラムを治すか、そのまま全てコピーして貼り付けて下さい。

FadeOutさせる際の機能不足を実装することができます。

using UnityEngine;
using System.Collections;
using UnityEngine.Assertions;

public class Fade : MonoBehaviour
{
	IFade fade;
	[SerializeField] bool startFade;

	void Start ()
	{
		Init ();
		fade.Range = cutoutRange;
	}

	float cutoutRange;

	void Init ()
	{
		if (startFade)
		{
			cutoutRange = 1;
		}
		fade = GetComponent<IFade> ();
	}

	void OnValidate ()
	{
		Init ();
		fade.Range = cutoutRange;
	}

	IEnumerator FadeoutCoroutine (float time, System.Action action)
	{
		float endTime = Time.timeSinceLevelLoad + time * (cutoutRange);

		var endFrame = new WaitForEndOfFrame ();

		while (Time.timeSinceLevelLoad <= endTime) {
			cutoutRange = (endTime - Time.timeSinceLevelLoad) / time;
			fade.Range = cutoutRange;
			yield return endFrame;
		}
		cutoutRange = 0;
		fade.Range = cutoutRange;

		if (action != null) {
			action ();
		}
	}

	IEnumerator FadeinCoroutine (float time, System.Action action)
	{
		float endTime = Time.timeSinceLevelLoad + time * (1 - cutoutRange);
		
		var endFrame = new WaitForEndOfFrame ();

		while (Time.timeSinceLevelLoad <= endTime) {
			cutoutRange = 1 - ((endTime - Time.timeSinceLevelLoad) / time);
			fade.Range = cutoutRange;
			yield return endFrame;
		}
		cutoutRange = 1;
		fade.Range = cutoutRange;

		if (action != null) {
			action ();
		}
	}

	public Coroutine FadeOut (float time, System.Action action)
	{
		StopAllCoroutines ();
		return StartCoroutine (FadeoutCoroutine (time, action));
	}

	public Coroutine FadeOut (float time)
	{
		return FadeOut (time, null);
	}

	public Coroutine FadeIn (float time, System.Action action)
	{
		StopAllCoroutines ();
		return StartCoroutine (FadeinCoroutine (time, action));
	}

	public Coroutine FadeIn (float time)
	{
		return FadeIn (time, null);
	}
}

 次に、FadeUI.csをエディタで開きます。
こちらも、以下のようにプログラムを治すか、そのまま全てコピーして貼り付けて下さい。

FadeMaskがうまく動作しない問題を解決できます。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

[RequireComponent (typeof(RawImage))]
[RequireComponent (typeof(Mask))]
public class FadeUI : UnityEngine.UI.Graphic, IFade
{
	[SerializeField]
	private Texture maskTexture = null;

	[SerializeField, Range(0, 1)]
	private float cutoutRange;

	protected override void Start()
	{
		base.Start();
		UpdateMaskTexture(maskTexture);
	}

	public void UpdateMaskTexture(Texture texture)
	{
		material.SetTexture("_MaskTex", texture);
		material.SetColor("_Color", color);
	}

	public float Range {
		get {
			return cutoutRange;
		}
		set {
			cutoutRange = value;
			UpdateMaskCutout (cutoutRange);
		}
	}

	[SerializeField] Material mat = null;
	[SerializeField] RenderTexture rt = null;

	[SerializeField] Texture texture = null;

	private void UpdateMaskCutout (float range)
	{
		mat.SetFloat ("_Range", range);
		
		UnityEngine.Graphics.Blit (texture, rt, mat);
		
		var mask = GetComponent<Mask> ();
		mask.enabled = false;
		mask.enabled = true;
	}
#if UNITY_EDITOR
	protected override void OnValidate()
	{
		base.OnValidate();
		UpdateMaskCutout(Range);
		UpdateMaskTexture(maskTexture);
	}
#endif


}

 これで準備完了です。

シーン移動時のトランジションを実装する

ルール画像の設定

 まずは、先程ダウンロードしたルール画像の中から好きなルール画像を選んで、Assetsへドラッグアンドロップで読み込みます。

読み込んだルール画像をクリックし、インスペクターから以下の内容に修正します。

  • Texture Type :Single Channel
  • Alpha Source:Grom Gray Scale

修正したら「Apply」をクリックして下さい。

「FadeCamera2」の設定

  Assets>Fadeの中にある「FadeCanvas」をHierarchyにドラッグアンドドロップします。

 「FadeCanvas」をクリックして、インスペクターの「Fade Image」の中のMask Textureに先程設定したルール画像をドラッグアンドドロップで設定します。

 この時点で、CutoutRangeを操作することで、フェードのイメージを確認することができます。
確認したら0に戻しておきます。

 これでFadeCamera2プレハブの設定は完了です。

フェードインしたあとにシーン移動する

 フェードインしたあとに、シーン移動をするプログラムを作っていきます。
今回は、ボタンを押すとシーン移動をするという流れのプログラムを作成します。

まず、今作成しているSceneを保存して、移動先のシーンを作成します。

 Assets>Scenesフォルダで「右クリック→Create→Scene」でシーンを作成します。
名前を「Scene2」とします。

 File>Build Settingsを開き、ドラッグアンドドロップで、Scene2をシーンに含めます。

 次に、ボタンを作成していきます。
HierarchyのUIからCanvasとButton作成します。
このボタンに利用するスクリプトを作成します。

 ProjectのAssetsフォルダで、右クリック→Create→C# Scriptでファイルを作成し、名前をFadeInとします。

 FadeInのプログラムを以下のように修正します。

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class FadeIn : MonoBehaviour
{
    [SerializeField] Fade fade;
    public void NextScene()
    {
        Action act = () => SceneManager.LoadScene("scene2");
        float time = 1f;

        //1秒間フェードしてからにシーン移動する
        fade.FadeIn(time, act);
    }
}

 1秒間フェードインしてからシーンを移動するプログラムです。

これを先程作成したボタンに適応させます。

 まず、Hierarchy>Create>CreateEmpty を作成して、名前を「FadeControler」とします。
ここに今作成したFadeInをドラッグアンドドロップでコンポーネントに追加します。

そして、FadeInのところのFadeにHierarchyのFadeCanvasをドラッグアンドドロップします。

 次にHierarycy>Canvas>ButtonからインスペクターのOn Clickのところで+マークを押します。
ここのNone(Object)に今作成した「FadeControler」をドラッグアンドドロップします。
そして、「NextScene」が実行されるように設定します。

 これでフェードインの設定完了です。ちゃんと動作するか確認してみましょう。

 シーンを保存しましょう。

シーン移動後にフェードアウトさせる

 フェードインはできたので、scene2でフェードアウトさせるプログラムを作成します。

 scene2に移動して、Hierarchyより、「Create Emtpy」で空のオブジェクトを作成します。
名前を「FadeControler」に変更します。

 Project>Assetsで右クリック>Create>C# scriptからファイルを作成します。
名前を「FadeOut」にして、Visual Studioでスクリプトを開きます。

「FadeOut」のコードを以下のように修正します。

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class FadeOut : MonoBehaviour
{
    [SerializeField] Fade fade;
    // Start is called before the first frame update
    void Start()
    {
        float time = 1f;

        //1秒間フェードしてからにシーン移動する
        fade.FadeOut(time);
    }
}

 修正が完了しましたら、Unityに戻って、さきほど作成した「FadeControler」にこのスクリプトをドラッグアンドドロップでコンポーネントに追加します。

 次にさきほどと同様に、Project>Assets>FadeからFadeCanvasプレハブをHierarchyにドラッグアンドドロップします。

 フェードアウトさせたいルール画像を先程と同様に設定します。
この時、CotoutRangeのバーを一番右まで移動させて、1にします。
そして、Fadecanvas>Fade(Script)内のStart Fadeにチェックを入れます。

 この作成したFadeCanvasを先程作成した「FadeControler」のFadeにドラッグアンドドロップします。

これで設定完了です。Scene2を実行してみましょう。

 これで完成したので、最初のシーンからシーンの移動する流れを確認してみます。

UIだけをフェードイン、フェードアウトさせる

記事が長くなってしまったので、別記事で紹介します。

あわせて読みたい
【Unity】GUIのみをトランジションを使ってフェードイン・アウトする方法 第二回  前回の「Unityでトランジションを使ったフェードイン・アウトでシーン推移する方法」に引き続き、今回のテーマは、「GUIのみをトランジションを使ってフェードイン・...

まとめ

 今回、Unityで画面全体をトランジションにてフェードイン・アウトする方法を紹介しました。

 動画編集をやっている身としては、このあたりは最初から機能としてあればいいのにと思ってしまいますが、ないものは用意するしかないので仕方ないですね。

 次の記事で、UIだけをフェードアウトする方法を紹介しますので、そちらの方法を知りたい方は併せてご確認下さい。

 今回の記事が、皆さんの技術力向上につながると嬉しいです。
以上、おつかれさまでした!

参考

【Unity】Unityでトランジションを使用した綺麗な場面転換(uGUI対応版)
【Unity】シーン移動時にトランジションで演出する
【Unity】テラシュールさんのuGUI対応トランジションがうまく動かず、某めるくまさんが解決方法考えてくれたので、自分の手柄としてブログにかいときますね! 

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次