Unityに関連する記事です

ゲーム画面内の遷移時にトランジション(切り替え・フェイドアウト/フェイドイン)処理を追加する


 今回のゲームではGameSceneは1つですので別のシーンへの遷移は発生しませんが、
ゲームの開始時やゲーム終了時には画面内に動きや演出があることによって、
ゲームが開始されたことや、終了したという合図を、画面を通じてユーザーに伝えることが出来ます。

 そういった幕間を挟む処理のことをトランジション(切り替え)処理と言います。
ここでは代表的なトランジション処理である、画面のフェイドアウト/フェイドイン処理を追加していきます。

完成動画 .押璽牾始時のフェイドイン処理
https://gyazo.com/5ef4c6d2c30f32d68647109cfdd4477a

検証動画◆.押璽狃了時のフェイドアウト処理 → ゲーム開始時のフェイドイン処理
https://gyazo.com/17c6732ba356ab75710c43bcda868ca5


設計を考える


 トランジション用のゲームオブジェクトを作成し、そのゲームオブジェクトをスクリプトから制御を行うようにします。

 シーン間での遷移はありませんが、再スタートの処理にはシーンのロードが入りますので、通常のゲームオブジェクトのままでは破棄されて制御が出来ません。
そこで作成するスクリプトには、アタッチしたトランジション用のゲームオブジェクトをシーン遷移を行っても破棄されないように処理を用意しておきます。
またトランジション用の制御がどのスクリプトからでも呼び出せるように、シングルトンパターンを採用しておきます。
 
 今回はゲームのスタート時(再スタート含む)とゲームの終了時に、それぞれトランジション用の処理を行うようにします。

 ゲームのスタート時には真っ白な画面からゲーム画面が徐々に見えてくるように演出し(フェイドイン処理)、
ゲーム終了時には逆にゲーム画面が徐々に真っ白になっていくように演出(フェイドアウト処理)をします。
処理としては同じ部分を制御するため、メソッドは1つにして、引数によってフェイドイン処理にするか、フェイドアウト処理にするか選択出来るようにしておきます。


実装手順


 以下の手順で実装を行います。

 1.トランジション用の処理を行うためのTransitionCanvasゲームオブジェクトを作成する
 2.新しくTransitionManagerスクリプトを作成する
 3.TransitionCanvasゲームオブジェクトにTransitionManagerスクリプトをアタッチする
 4.TransitionCanvasゲームオブジェクトを利用して、ゲーム開始時とゲーム終了時にフェイド処理を追加する
 5.ゲームを実行して動作を確認する


1.トランジション用の処理を行うためのTransitionCanvasゲームオブジェクトを作成する


 トランジション用の処理を行うためのゲームオブジェクトを作成していきます。2つのゲームオブジェクトによって構成されていますので順番に作成します。


新しくCanvasゲームオブジェクトを作成し、TransitionCanvasに名前を変える


 ヒエラルキーのゲームオブジェクトが何もない部分で右クリックをし、UI => Canvas を選択します。現在のCanvasとは別のCanvasが作成されます。
名前を TransitionCanvas に変更します。

 TransitionCanvasゲームオブジェクトを選択し、インスペクターの Canvasコンポーネントを確認します。
カメラの設定や画面サイズなどを、元からヒエラルキーにある、Canvasゲームオブジェクトと同じになるように設定を行います。
下記の画像を参考にしてくさい。

TransitionCanvasゲームオブジェクトのインスペクター画像



参考用 Canvasゲームオブジェクトのインスペクター画像()



TransitionCanvasゲームオブジェクトの子オブジェクトとしてPanelゲームオブジェクトを作成する


 続いて、TransitionCanvasゲームオブジェクトの上で右クリックをし、UI => Panel を選択します。
TransitionCanvasゲームオブジェクトの子オブジェクトとしてPanelゲームオブジェクトが生成されます。

 Panelゲームオブジェクトを選択し、インスペクターからRectTransformコンポーネントを確認します。
TransitionCanvasゲームオブジェクトと同じ大きさで作られますので、それよりも少しだけ大きくなるように Width、Height の設定を行います。

 インスペクターの一番下にある Add Compnent ボタンを押して、CanvasGroupコンポーネントを Add します。

 Block Raycastsのチェックを外しておいてください。このチェックが入っていると画面のタップがこのCanvasGroupコンポーネントによって受け付けなくなります。


 下記の画像を参考に設定してください。

Panelゲームオブジェクトのインスペクター画像



 ヒエラルキーはこのような親子関係になっていれば問題ありません。


ヒエラルキー画像



TransitionCanvasゲームオブジェクトのSceneビュー画像



 ここでのポイントは、ゲーム画面であるCanvasゲームオブジェクトが完全に隠れるようにPanelゲームオブジェクトを作成することです。
このPanelゲームオブジェクトがトランジション用の処理を行い、ゲーム画面を覆うためです。

検証動画(Canvasゲームオブジェクトよりも少し大きくTransitionCanvasゲームオブジェクトを作成して、ゲーム画面が完全に隠れるようにする)
https://gyazo.com/0adade00c9b85530140454e4d88bf535

 以上でこの手順は完成です。
 

2.新しくTransitionManagerスクリプトを作成する


 Project内のScriptsフォルダ内で右クリックして、Create => C# Script を選択し、名前を TransitionManager に変更します。

 このスクリプトにトランジション用のPanelゲームオブジェクトの制御処理を記述し、トランジション用の処理を行えるようにします。


TransitionManager.cs

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



3.TransitionCanvasゲームオブジェクトにTransitionManagerスクリプトをアタッチする


 作成したTransitionManagerスクリプトを、TransitionCanvasゲームオブジェクトにドラッグアンドドロップしてアタッチします。
TransitionCanvasゲームオブジェクトのインスペクターを確認し、TransitionManagerスクリプトがアタッチされていることを確認します。

 2つのアサイン情報が表示されていますので、CanvasGroup 変数についてはPanelゲームオブジェクトのCanvasGroupコンポーネントを参照しますので
Panelゲームオブジェクトをヒエラルキーからドラッグアンドドロップしてアサインします。

 Duration 変数はトランジション用の処理を行う際の処理時間です。今回はフェイドイン/フェイドアウト処理の時間になりますので 1 を設定します。
この値を変更するとフェイドイン/フェイドアウトの時間が変更されますので、適宜な値に調整してください。
初期値の 1 であれば、1秒かけてフェイドイン/フェイドアウトします。
 

TransitionCanvasゲームオブジェクトのインスペクター画像



4.TransitionCanvasゲームオブジェクトを利用して、ゲーム開始時とゲーム終了時にフェイド処理を追加する


 TransitionCanvasゲームオブジェクトにアタッチしたTransitionManagerスクリプトのFadePanelメソッドを利用することで
TransitionCanvasゲームオブジェクトのCanvasGroupが制御されて、フェイドイン/フェイドアウト処理が実装できます。
 
 以下のような状態をTransitionManagerスクリプトを利用して制御しています。

検証動画 CanvasGroupのAlpha値の変化
https://gyazo.com/7390a44cd647a8be7116b9fd62395605


 ここでは各スクリプトを修正して、ゲーム内にフェイドイン/フェイドアウト処理を追加します。


GameManagerスクリプトを修正して、ゲーム開始時のフェイドイン処理を追加する


 GameManagerスクリプトのStartメソッドを修正して、ゲーム開始時のフェイドイン処理を追加します。

GameManager.cs

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




検証動画 ゲーム開始時のフェイドイン処理
https://gyazo.com/5ef4c6d2c30f32d68647109cfdd4477a


GameDataスクリプトを修正して、ゲーム終了時のフェイドアウト処理を追加する


 GameDataスクリプトのRestartGameメソッドを修正し、ゲーム終了時のフェイドアウト処理を追加します。

GameData.cs

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




検証動画 ゲーム終了時のフェイドアウト処理 → ゲーム開始時のフェイドイン処理
https://gyazo.com/17c6732ba356ab75710c43bcda868ca5


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


 以上でトランジション用の作成手順は終了です。

 ゲームを実行して動作を確認します。上記の検証動画のようにトランジション用の処理が動作していれば完成です。



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

 次は 発展13 です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます