【超初心者】一から始めるアプリ開発

2023/1/22 PCビルドの記事を追加


長らくExcelVBAをイジってたので、
Unityを放置してましたが、そろそろ復帰していこうと思います。

復帰、第一弾としては、

過去記事の
「シーン移動時にトランジションで演出する」

これが当ブログで一番読んで頂いてる記事になるのですが、
いかんせん安定した動きが出来てなくて、うまく動かないと言う声が
多く聞こえてきます。

内容は、3年前に書いた記事で、
Unity＆C#を触り始めた頃、できた勢いで書いた記事になるので、
参考にしてい頂いた方には、いろいろと迷惑をお掛けして申し訳ないです。
（_ _（--;（_ _（--; pekopeko

そこで、もう一度、
FadeCamera2のスクリプトを見ながら、新しく処理を考えてみます。
また、初めての方にも分かる様に導入から説明していきます。


FadeCamera2とは、テラシュールブログさんで公開されてる、
フェード機能を追加できるAssetになります。

UIのFadeIn・FadeOutが行えるAssetなんですが、
それをシーン遷移時に、画面のFadeIn・Outに使ってみようってのが趣旨になります。

単純なフェードならFadeCamera2のみで行えるのですが、
渦を巻くようなフェードとか、格子状にフェードとか、
演出ができると楽しいですよね。

そこで、ルール画像を使って演出もできるように設定していきます。

・FadeCamera2のインポート
Unityのプロジェクトを立ち上げた状態で、下のURLをクリックして下さい。
https://github.com/tsubaki/FadeCamera2/blob/master/FadeCamera2.unitypackage?raw=true
FadeCamera2のファイルがDLできます。
このファイルを開くとPackageManagerが起動するので、

すべての項目にチェックがあるが確認したらインポートします。

インポートが終了したら、

AssetsフォルダにFadeフォルダが追加されます。
中に、二つのフォルダと二つのプレハブが入っていればOKでっす。

続いて、演出用のルール画像を取得します。
For Youさんが公開されてる画像をDLさせてもらいます。
ルール画像　←　クリックするとページが開きます。
このページにある”一括ダウンロード（16：9）”をクリックしてDLします。
ファイルはZIPで圧縮されてるので解凍する必要があります。

任意の場所に解凍出来たらファイルを開きます。

中身は、ルール画像の詰め合わせになります。

必要な物が揃ったので、使えるように設定していきます。

・ルール画像の設定
そのままの設定では使えないので、設定変更します。
使いたい画像をUnityにインポートして、画像のインスペクターを開いてください。

テクスチャタイプをSingleChannel
アルファソースをFromGrayScale

アルファ値を透明度として使用に、チェックが入ってると思いますが、
外れてる場合は、チェックを入れて下さい。

変更後は、下にあるApplyボタンを押して適用、画像の準備は以上となります。

・FadeCamera2の準備
Fadeフォルダの中のFadeCanvasをヒエラルキーにアタッチする。

これでフェードイン・アウトが実装できます。

FadeCamera2は、ScreenがOverlayに設定されてます。
Overlayってなんぞや？と思われる方に少し説明すると、

CanvasのRenderModeを見ると、ScreenSpace○○の設定があります。
Cameraの設定では、一番後ろにスクリーンが設定されます。
Overlayは、その前に設定されるスクリーンになります。

特徴は、映写角内に直接描画される点がCameraとの違いになります。
シーンViewを見るとCameraとOverlayでは、UIのサイズが変わります。
混在するとサイズ感が分かりにくいので、ゲームViewを確認すると、
同じ画面の中に納まって見えます。

※FadeCanvasアタッチ時の注意点
　Overlay設定なので、ScreenSpaceCameraのCanvasやUIの子に設定すると
　働かなくなります。
　FadeCanvasは、Sceneの直下にする必要があります。
　単体でアタッチして子には、何も入れないのが無難に思います。

　また、UIなどをOverlayに設定されてる場合は、
　FadeCanvasより低いソート順にしておかないと、
　FadeCanvasが隠れてしまいます。


後は、用意されてるコマンドを、自作するスクリプトから呼び出せば、
フェードイン・アウトが簡単に行われるようになります。

・FadeCanvasの設定
FadeCanvasの中にFadeImageコンポーネントがあるので、

・色
・マスクテクスチャ
この二項目を好みに変更します。

色はカラーバーをクリックするとパレットが表示されます。
マスクテクスチャには、ルール画像をアタッチします。

・CutoutRange
マスクテクスチャの透明度を操作するバーです。
0の時は、FadeImageコンポーネント自体を非表示にします。

色・ルール画像が設定できたら、CutoutRangeのバーを左右に動かしてみて下さい。
ゲームView上で、ルール画像のフェードが再生されてると思います。

この時、
ゲームView上でルール画像が再生されない、
シーンViewには映ってるのにゲームViewでは見えない。
シーンViewにすら映らない。

などがあれば、この項目を確認して見て下さい。
・ルール画像の設定を確認する
・FadeCanvasの階層をScene直下になってるか確認する
・UI用のCanvasがScreenSpaceOverlayならソート順を確認する

この辺りがあやしいので、設定を見直してください。
バーの手動操作でフェードが掛からないと、スクリプトからも無理になります。

無事に再生されていれば、
後は、スクリプトからCutoutRangeを動かせばOKとなります。

設定は、これだけです。
実に簡単なもんです。ヽ(´▽｀)/～♪

それでは、実際にスクリプトを組んで動かしてみようと思います。

・FadeCamera2で用意されてるコマンド
FadeOut(秒数)：設定秒間で消失させる
FadeIn(秒数)設定秒間で出現させる

このコマンドを使いたい所で呼び出せば、機能してくれます。

簡単な操作でフェードテストしたいので、

ボタンを二つだけ配置して、それぞれのコマンドを呼び出してみます。
新規スクリプトを立ち上げて、ButtonManagerとでもしておきます。
ButtonManager

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

public class ButtonManager : MonoBehaviour
{
    //FadeCanvas取得
    [SerializeField]
    private Fade fade;

    //フェード時間取得（秒）
    [SerializeField]
    private float fadeTime;


    public void PushFadeout()
    {
        fade.FadeOut(fadeTime);
    }

    public void PushFadein()
    {
        fade.FadeIn(fadeTime,() =>
        {
            fade.FadeOut(fadeTime);
        });
    }
}

コマンドの入力方法は、配信元に書かれてる通りにします。

FadeInは、徐々にルール画像が出現するコマンドです。
出現後は、塗潰されたルール画像が画面を覆うので、消さないとなにも出来ません。

なので、そのままFadeOutコマンドで消すように設定しました。

FadeInの書き方は特殊なんですが、実行後に次の関数を呼び出す書式になってます。
実行中に次の関数が呼ばれるとフェードさせてる意味がなくなるので、
こんな書き方になっています。

スクリプトができたので、
変数のアタッチとボタンの割り当てをします。

追加されたButtonManagerコンポーネントを見ると、

設定した変数が表示されてるので、FadeにはFadeCanvasをアタッチ。
FadeTimeは、好きな時間を秒で入力します。今回は2秒にしておきます。

各ボタンの呼び出しは、FadeOutボタンには、PushFadeout()を
FadeInボタンには、PushFadein()を割り当てます。

最後は、FadeCanvasの色とルール画像を設定したら準備完了です。
今回は、

色：濃い目の赤
画像：041

準備ができたのでテストPLAYしてみます。
FadeInボタンは機能してますが、FadeOutボタンは機能してません。

ただし、FadeInで出現させた後、FadeOutを呼び出すと消去してくれました。
単発のFadeOutの場合は、機能しないって事になります。

これは、FadeCamera2の設計を理解しておく必要があります。

ゲーム中にキャラクターなどをフェードさせる条件は、

・出現：何も無いところにフェード処理がされて徐々に出現する
・消失：表示されてる物がフェード処理で徐々に消えていく

こんな感じで表現されると思います。

いきなり画面上にキャラクターが現れて、
フェードして消えていくなんて事は起こりません。(^.^; オホホホ

これを踏まえて設計されてるので、当然FadeImageが非表示の時は、
FadeOutコマンドを使っても何も起こらないって事になります。

一度、FadeInコマンドでFadeImageを出現させると
塗潰されたFadeImageが残ってるので、FadeOutさせる事ができるようになります。


ここからが本題！
シーン開始時にどうやってフェードさせるかです。

シーン開始時は、FadeImageは消去されてる状態なので、
当然、FadeOutを掛けても何も起こらい状態になります。

FadeImageをシーン開始時に表示できるようにすれば…　
FadeCamera2のスクリプトを見ながら考えてみようと思います。
(｡-`ω-) .｡oO(考え中


まず、FadeCamera2には、4つのスクリプトがあります。
・コンポーネント用のFadeImage.cs
・マスク用のFadeUI.cs
・インターフェースIFade.cs
・実行用のFade.cs

実行用のFade.csからコンポーネントを操作するように設計されてるので、
Fade.csを開いてみます。
Fade

/*
 The MIT License (MIT)

Copyright (c) 2013 yamamura tatsuhiko

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
using UnityEngine;
using System.Collections;
using UnityEngine.Assertions;

public class Fade : MonoBehaviour
{
	IFade fade;

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

	float cutoutRange;

	void Init ()
	{
		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);
	}
}

ここでは、二つのコマンド設定とcutoutRangeの計算が行われています。
コマンド入力すると対応したコルーチンが計算をするようになっています。

直接、FadeImageのCutoutRangeを操作してる訳ではないんですね～
Fade.csで計算された値は、interfaceを使って、FadeImageに渡されています。

Fade.csからFadeImage.csに計算値を渡すのが、

fade.Range = cutoutRange;

この代入式になります。

受け取り側は、
FadeImage.cs

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

	private void UpdateMaskCutout (float range)
	{
		enabled = true;
		material.SetFloat ("_Range", 1 - range);

		if (range <= 0) {
			this.enabled = false;
		}
	}

計算値が渡ってくると、都度UpdateMaskCutout関数を呼び出して、
FadeImageの表示・非表示を管理しています。
マテリアルは、おそらく透明度だと思います。

となると、ここに塗潰し状態の数値を送れば、
FadeImageを表示してくれる事になります。

Fade.csからcutoutRangeを1として送信できるように処理を追加してみます。
Fade.cs

----冒頭省略
	void OnValidate ()
	{
		Init ();
		fade.Range = cutoutRange;
	}

	//強制的にFadeImageを塗潰す
	void ImageFill()
        {
		cutoutRange = 1f;
		fade.Range = cutoutRange;
        }

	IEnumerator FadeoutCoroutine (float time, System.Action action)
	{
		ImageFill();

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

OnValidate関数の下くらいに、新しくImageFill関数を作成しました。
cutoutRangeを1にして、FadeImage.csに渡す関数です。

これをFadeOutコルーチンの冒頭で呼び出す事で、
強制的にFadeImageを塗潰し表示させます。

それでは、早速テストPLAYでっす。

FadeOutボタンが機能しています。ヽ(´▽｀)/～♪

これでシーン開始でもフェードが掛けられるようになるはずでっす。
早速、移動シーンを用意してテストしてみます。

最後は、Android実機にビルドして機能してるか確認します。

Fade1とFade2の二つのシーンを用意して、ボタンを設置します。
ボタンを押すごとにシーンを移動して、フェードのテストを行います。

Scene:Fade1

新規Sceneを作成したらFade1にリネームして、
カメラ下にFadeCanvasをアタッチします。

Scene:Fade2

こちらも同じく、Fade2にリネームして、
FadeCanvasをアタッチします。

このプロジェクトが完成したら、Android実機で動作確認したいので、
platformをAndroidに変更しておきます。

同時に、二つのSceneも登録しておきます。
これを忘れるとシーン遷移が起こらない(´^｀).｡oஇ


これでシーン遷移できるので、
各シーンにUIを追加して見た目を作ります。

Scene:Fade1

Canvasを追加して、UICanvasにリネームします。
RenderModeは、ScreenSpaceCameraで設定します。画面比率はお好みでどうぞ。
追加するUIは、Scene名のテキスト・背景Image・遷移ボタンを追加しておきます。

Scene:Fade2

Fade1と同じ設定にします。

ルール画像をアタッチする

インポートしたルール画像をマスクテクスチャにアタッチします。
Fade1：画像092
Fade2：画像093

ここまで準備できたら、CutoutRangeのバーをドラッグしてFadeするか試してみます。
ゲームView上でフェードが掛かればOKでっす。

これで画面上の設定が完了したので、
お待ちかねのスクリプトになります。ヽ(´▽｀)/～♪ﾏｯﾃﾏｼﾀ

新規スクリプトの追加とオブジェクトの追加を忘れなく。

Fade2シーンにも同じくオブジェクトを作っておきます。

新規のスクリプトファイルを作成して、FadeManagerにリネームして、
VisualStudioで開きます。
FadeManager

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

public class FadeManager : MonoBehaviour
{
    //FadeCanvas取得
    [SerializeField]
    private Fade fade;

    //フェード時間（秒）
    [SerializeField]
    private float fadeTime;


    // Start is called before the first frame update
    void Start()
    {
        //シーン開始時にフェードを掛ける
        fade.FadeOut(fadeTime);
    }

    //各ボタンを押した時の処理
    public void SceneTransition(int sceneNum)
    {
        //フェードを掛けてからシーン遷移する
        fade.FadeIn(fadeTime, () =>
        {
            SceneManager.LoadScene("Fade" + sceneNum);
        });
    }
}

変数の設定は、インスペクターで行います。

シーン開始時にフェードを掛ける場合は、
Startメソッド内にFadeOutコマンドを仕込めばOKでっす。

ボタンの設定は、引数にシーン番号を仕込んで遷移させます。

これでスクリプトができたので、
Unityに戻って割り当てを行います。

FadeCanvasのアタッチと時間設定をお忘れなく。

続いて、UIで設定したボタンを選択して、

FadeManagerオブジェクトをアタッチして、SceneTransition()関数を呼び出します。
引数を設定してるので、遷移先の数値を入力します。

Fade1→Fade2なら、2と入力
Fade2→Fade1なら、1と入力

これで準備ができたのでテストPLAYでっす。

上手く機能しました。

配信元を読んでると、Fade.csに手を入れるといろいろできます。
と書かれています。

なので、関数の追加等はOKなので、問題はないでしょう。
ただ、この辺りは、初心者には難しい所なんですが… ( ´~`).｡


ここで一点、大事な注意点があります。
Fade.csをWindowsPCのVisualStudioで編集すると、

こんな警告文が出る事があります。

これは、改行コードの不一致を表す警告になります。

エディタでコードを見ても改行時になにも表記されてないのですが、
実際には改行する度に改行コードが書き込まれています。

この改行コードが、スクリプトエディタによって/ｎや/ｒ、両方など
書き込み方が変わります。

VisualStudioと違うエディタで書かれたコードの場合、
統一出来てないから問題ありますよ！と
警告を受ける場合があります。

2017以降のVisualStudioを使ってる事を前提なんですが、
書き換えたスクリプトを保存して、一度VisualStudioを終了します。

再度、書き換えたスクリプトを開き直すと

こんなダイアログが出てくるので、はいを選択すると一貫した扱いになります。

あとは、Unityに戻っても警告文が出なくなります。

ただ、このやり方では、改行コードが修正されてる訳ではないらしいので、
根本的に対策したい方は、Unity 改行コード 不一致　で、検索すると情報が出てくると思います。

こういう部分も初心者にとっては、高いハードルなんですよね。
正直パニくります。(T-T) グスッ

これでUnity上でのテストは、無事動いてくれたので、
いよいよAndroidビルドでテストしてみます。

ビルド開始…
長いので、(-。-)y-゜゜゜

ここからはGalaxyS8の画面になります。
OSは、Android9です。

古くて申し訳ないです。(ToT)>゛スンマセン
使い勝手がいいので、買い換えられないんですぅ(´^｀).｡oஇ

実機でも問題なく動いてくれてます。

意図した動きになってくれてるので問題ないでしょう。

以前の処理では、動作が不安定でしたが、
この処理なら問題なく動くとは思うんですが…

何かあればコメント頂ければ対応したいと思います。


FadeCamera2導入時のtip
・いきなり開発中のプロジェクトに導入しない
　テストプロジェクトを作って動作を確認してから導入するようにしましょう。
　上手く動作しない時の原因が、どこで発生してるのか分からなくなるので、
　単体で動作確認しておく方が、後々修正しやすくなります。

・FadeCanvasはScene直下に複製する
　途中でも書きましたが、UIなどの全面で再生されるので、
　UIの中や後ろで再生しても何も見えません。

・FadeCanvasを複製したら必ず手動で動作確認
　コンポーネントのバーをドラッグで動かして、
　ゲームViewで再生されるか確認しましょう。
　ルール画像の設定ミスやFadeCanvasの階層間違いも確認できます。

この辺りをチェックしながら導入してもらえると、
上手く導入できるんじゃないかと思います。

初心者の方やUnityC＃に慣れてない方は、
FadeCamera2のスクリプトを勉強すると大いに為になると思います。

・interfaceと継承
・デリゲートとEvent
・エディタ拡張とOverride
・コルーチンの使い方
・ラムダ式

読めるようになると、この辺りが理解できます。
ほんとに良い教材でっす。(っ˘ω˘c ).oOｷﾞｼﾞｭﾂﾉﾎｳｾｷﾊﾞｺﾔｰ

導入については以上となります。

まだ完全には理解できてないんですが、
ようやくFadeCamera2のスクリプトが、少し読めるようになってきました。

それで、以前の処理が動作不良を起こす原因なんかも考えていきたいので、
次回は、少しスクリプトの解説なんかをしながら原因の推測をしてみたいと思います。

長らく動作不安定な情報を修正できなかったことをお詫びします。
m(_ _)m

今回のコードは、恐らく問題ないと思いますが、
何かトラブルが起こるようなら、気軽にコメントでお叱り頂くと幸いに思います。

長くなったので、今回はこのあたりで。
(^.^/)))~~~ｂｙｅ！！






追記　PCビルドテスト

PCビルドにて動作しないと、お困りのコメントを頂きまして、
検証してみる事にしたので、少しまとめようと思います。

まず、動画も作成されていたので、拝見させて頂きました。
見た感じ、最小構成にてUnity上では、フェードが働いてる事が確認できました。

最後にRedアウトしてるのが、PC上で動作した物だろうと判断できます。

ここで、一点気になったのが3Dプロジェクトで作成されてる事です。

当方、Androidのアプリを作りたいって事で勉強してるので、
3DやPCビルドをした事がなんですよ～ (( ´-` ) .｡oO

正直、どうなるのか分からないので、2点ほどテストしてみようと思います。

・当ブログで作ったテストプロジェクトをPCビルドしてみる
・3Dで新規プロジェクトを作成してPCビルドしてみる

これでどうなるか検証していこうと思います。

まずは、ブログで作ったテストプロジェクトをPCビルドしてみます。

PCビルドと言うことでプラットフォームは、PC、Mac&Linux Standaloneを選択します。

当方のPCはWindows10なので、ターゲットはWindows
アーキテクスチャは、×86のままでいきます。

設定はデフォルトのままでビルドON！

Androidとは違って、フォルダー指定なんですね～ ( ˘•ω• )
先に作っておいたフォルダーを指定してビルド開始。

5つほどファイルが作成されたので、Unityマークのある実行ファイルをクリックすると
動作するようなので、ダブルクリックします。

テレビ画面を撮影したので、少し見にくくて申し訳ないです。
（レグザをモニター代わりにしてます）

問題無く動作してくれました。

続いて、3Dプロジェクトを新規作成します。
ブログのテストプロジェクトと同じ構成にしていきます。

まず、FadeCamera2インポート＆ルール画像セッティングです。
ルール画像は16：9を使用します。

当方のモニター設定で、画面画素数を1920×1080にしているので、
16：9を適用する感じになります。

PCモニターなんかだと、4：3の方がいいかもしれないですね。
4：3画像は、For YouさんのサイトでDLできます。

FadeCamera＆ルール画像の準備ができたので、
SampleSceneをFade1に書き直して、FadeCanvasをアタッチします。

ルール画像は、005をアタッチして、色はグリーンにしておきます。

ここでCutoutRangeを手動で動かします。

ゲームViewでも再生されてるので問題なしです。

後はCanvasを追加して、UIを並べます。

UI用のCanvasの設定は、RenderModeは、ScreenSpaceCamera設定です。
RenderCameraは、MainCameraをアタッチします。
CanvasScalerは、解像度が変わるので、UIScaleModeを画面サイズに拡大にして、
1920×1080に設定します。

これでUIも、ゲームViewと同じようにモニターに映し出されると思います。

ImageやButtonは、ブログの内容と同じにします。

Fade1シーンができたので、保存・ビルド設定にシーン登録をしておきます。

後は、Fade2シーンを同じようにして作成・ビルド設定にシーン登録します。
ちなみにルール画像は、029をアタッチ、色は青色に設定しました。

続いて、スクリプトの編集にかかります。
まず、Fade.csを開いて、
Fade.cs

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

public class Fade : MonoBehaviour
{
        一部省略

	void ImageFill()
        {
		cutoutRange = 1.0f;
		fade.Range = cutoutRange;
        }

	IEnumerator FadeoutCoroutine (float time, System.Action action)
	{
		ImageFill();

		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 ();
		}
	}
        以下省略
}

塗潰し状態を準備して、FadeManagerを作成します。
FadeManager

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

public class FadeManager : MonoBehaviour
{

    [SerializeField]
    private Fade fade;

    [SerializeField]
    private float fadeTime;

    // Start is called before the first frame update
    void Start()
    {
        fade.FadeOut(fadeTime);
    }


    public void SceneMove(int num)
    {
        fade.FadeIn(fadeTime, () =>
         {
             SceneManager.LoadScene("Fade" + num);
         });
    }
}

FadeManagerの注意点は、変数をprivateにしてる所です。
publicは使わない方がいいです。

privateだとUnity上に表示されないので、頭に [SerializeField]をつければ、
コンポーネントに表示されるようになります。

publicはバグの可能性が残るので、出来るだけ使わないようにして下さい。

これでスクリプトの準備ができたので、
Unityに戻ってボタンの設定を行います。

ボタンの割り当ては、ブログ本編で触れてるので参考にして下さい。

これで全て準備できたのでビルドします。
Unityのプラットフォームは、デフォでPCになっているので、
そのまま確認だけしてビルド開始でっす。

無事にファイルが作成されたので、実行ファイルをダブルクリック！

あいかわらず見にくくて申し訳ないです。m(_ _)m

3Dでも無事に動いてくれてます。

コメント頂いた状況にはならないですね～　T^T）

再現ができないと原因を把握するのも難しいです。
細かい部分になると、環境設定やプロジェクト設定を変更すると、
同じUnityでも別物になったりします。

ちなみに当方は、Unityの設定はデフォルトで使用しています。
versionは、2020.2.3f1 Personal

versionが変わると動かなくなったりするのもUnityの特徴なので、
開発中は、バージョンをUpdateしないようにしています。

検証してみましたが、何も見つける事が出来ませんでした。
御役に立てなくて申し訳ないです。m(_ _)m