i-school - 2Dタワーディフェンス 発展14
 シーン遷移の処理に付随する、トランジションの処理について実装を行います。
 
 トランジションとは「場面転換」のことを意味します。ゲームに置いては、シーン遷移を行い、次のシーンが始まるまでの繋ぎの処理になります。
この機能は前回のシーン遷移の処理と同じように、すべてのゲームに実装可能な機能になります。


<実装動画>
動画ファイルへのリンク


 以下の内容で実装を進めていきます。

発展14 ートランジション機能の実装ー
20.トランジション機能を活用して、シーン遷移の処理の前後にフェードインとフェードアウトの処理を実装する



 新しい学習内容は、以下の通りです。

 ・アセットの活用



20.トランジション機能を活用して、シーン遷移の処理の前後にフェードインとフェードアウトの処理を実装する

1.設計


 トランジションの機能として、フェードインとフェードアウトの機能を実装します。
シーン遷移を行う直前にフェードインをおこなって、現在のシーンを隠します。隠したあとに、シーン遷移の処理を実行します。

 シーン遷移の処理が完了したことを確認した上で、フェードアウトをおこなって、新しいシーンを表示します。
これがトランジションの機能の役割になります。上手く機能させることによって、場面転換が華やかになり、ゲームのクオリティが高まります。


2.トランジション機能用のアセットをインポートする


 無料のアセットを作成し、公開されている方がいますので、そちらのアセットを活用させていただきます。
ありがとうございます。

テラシュールブログ 様
【Unity】Unityでトランジションを使用した綺麗な場面転換(uGUI対応版)
https://tsubakit1.hateblo.jp/entry/2015/11/04/0153...


 インポート後の手順も参考にしますが、まずは、インポートが済んだら次の手順を行います。


3.FadeCanvas ゲームオブジェクトを SceneStateManager ゲームオブジェクトの子オブジェクトとして配置する


 トランジション機能用のアセットは、Fade フォルダとして Unity 内に追加されます。

 シーンをステージ選択シーンに切り替えてください。
Fade フォルダ内にある FadeCanvas プレファブ・ゲームオブジェクトを、ヒエラルキーにある SceneStateManager ゲームオブジェクトにドラッグアンドドロップして子オブジェクトにします。


ヒエラルキー画像



 SceneStateManager ゲームオブジェクトはシーン遷移を行っても破壊されない処理が実装されています。
この設計にすることにより、FadeCanvas ゲームオブジェクト自体も SceneStateManager ゲームオブジェクトと一緒にシーン遷移を行うようになり、破壊されない状態になります


4.トランジション機能用の設定を行う

 
 テラシュールブログ 様の記事を参考にし、FadeCanvas ゲームオブジェクトに必要な情報や、マスク用のルール画像をダウンロードして、設定を行ってください。


参考用 インスペクター画像




5.SceneStateManager スクリプトを修正する


 トランジション機能用のアセットを利用するための変数を新しく2つ宣言します。
また、PreparateNextScene メソッド内の処理と LoadNextScene メソッド内の処理をそれぞれ修正し、
トランジション機能用のアセットを利用するかしないかによって自動的に切り替えるようにします。


SceneStateManager.cs

 <= クリックすると開きます。


 スクリプトを修正したらセーブを行います。


6.SceneStateManager ゲームオブジェクトの設定を行う


 インスペクターに新しい情報が追加されていますので、設定を行います。

 Fade 変数には、SceneStateManager ゲームオブジェクトの子オブジェクトになっている FadeCanvas ゲームオブジェクトをドラッグアンドドロップしてアサインします。
この操作により、Fade クラスの情報が登録されます。
 
 FadeDuration 変数はトランジション機能を利用する際の時間を設定します。この時間をかけてフェードインとフェードアウトの処理が動きます。


インスペクター画像



 設定が完了したら、SceneStateManager ゲームオブジェクトをプレファブにしている場合には、Overrides を行って、プレファブの情報を上書きしておきます。


7.ゲームを実行して動作を確認する


 実際にシーン遷移を行って、トランジションの機能が動作するかを確認しておきます。

 処理を確認する場合、FadeCanvas ゲームオブジェクトの Fade スクリプト内にある Cutout Range プロパティの部分をチェックしてください。
この値が動くことによって、画面全体へのフェードインとフェードアウトが行われます。


<実装動画>
動画ファイルへのリンク


 アセットを利用する場合、どの部分が動作することによって処理が実装されているかを理解しておきましょう。
理解しておくことができれば、エラーが発生した場合や、自分で処理を修正することができるようになるためです。


<アセットの処理の確認>
動画ファイルへのリンク



 以上でこの手順は終了です。

 次は 発展15 ークリアポイント機能の実装− です。