Unityに関連する記事です

 シーン遷移の前後にゲーム画面をフェードイン・フェードアウトする機能を追加します。



発展13 ーシーン遷移時のフェード機能ー


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



設計


 ゲーム画面が急に切り替わってしまわないように、シーンの切り替えの際にはゲーム画面に暗転用の処理を行い(フェードイン)、
その後、次のシーンの開始時に暗転から戻って(フェードアウト)、新しいゲームシーンが表示される演出を追加します。

 こちらには、下記のサイトのあるアセットを採用させていただいております。
ありがとうございます。

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


 サイト内にも実装例がありますが、今回の実装内容とは異なるため、まずはアセットのインポートを行い、その後、このゲームに即した形でのフェード機能として利用します。
そして、前回作成した SceneStateManager スクリプトと連携して、シーン遷移時にフェード処理を行うようにします。


FadeCamera アセットをインポートする


 先ほど紹介したサイトより、FadeCamera アセットを Unity にインポートします。

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


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


フェード暗転時に利用する画像をインポートし、設定を行う


 フェード時に利用するマスク用の画像(ルール画像)をダウンロードして、Unity へインポートします。

 ルール画像は、こちらのサイト様よりダウンロード出来ます。
ありがとうございます。
for you 様
https://4you.bz/


 数多くのルール画像が用意されていますので、任意の画像をダウンロードして、Unity へインポートしてください。



 Unity にインポートした画像の設定を行います。

 TextureType は Default、Alpha Source は From Gray Scale に設定してください。


インスペクター画像



 以上で設定は完了です。


TransitionManager スクリプトを作成する


 シーン遷移の前後で FadeCanvas ゲームオブジェクトの制御を行い、フェード機能を実行するための機能を持つスクリプトを作成します。
このスクリプトは、FadeCanvas ゲームオブジェクトにアタッチします。

 いずれのスクリプトからでもアクセスしやすいように、シングルトンクラスとして作成します。
また、シーン遷移を行った際にも FadeCanvas ゲームオブジェクトが破壊されないようにするため、DontDestroyOnLoad メソッドも記述しています。
FadeCanvas ゲームオブジェクトがシーン遷移によって破壊されてしまうと、フェードアウトが機能しなくなるためです。


TransitionManager.cs

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


 スクリプトを作成したら、セーブを行います。


FadeCanvas プレファブ・ゲームオブジェクトをヒエラルキーに配置して設定を行う


 ここからは、メインシーンではなく、タイトル(あるいはホームなどのメイン以外の)シーンにて操作を行います。

 インポートしたアセットを設定します。

 Fade フォルダ内にある FadeCanvas プレファブをドラッグアンドドロップしてヒエラルキーに配置します

 インスペクターを確認し、FadeImage コンポーネント内の MaskTexture に、インポートしたマスク用のルール画像をドラッグアンドドロップしてアサインします。
この時点で、FadeImage コンポーネント内の Cut Range の値を操作してみてください。成功していれば、ゲーム画面にフェード機能が働くようになります。

 続いて、先ほど作成した TransitionManager スクリプトをドラッグアンドドロップしてアタッチします。
インスペクターを確認し、Fade 変数には Fade コンポーネントを、FadeImage 変数には FadeImage コンポーネントを、それぞれアサインします。
どちらも FadeCanvas ゲームオブジェクトにアタッチされているコンポーネントになります。


インスペクター画像



 以上で設定は完了です。


Title スクリプトを作成する


 タイトルシーンからスタートし、ゲームのメインシーンへ遷移する、という前提でこのスクリプトを作成しています。
他のシーンからも同じように応用できます。


Title.cs

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


 スクリプトを作成したらセーブします。


Title ゲームオブジェクトを作成し、Title スクリプトをアタッチする


 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create Empty で新しいゲームオブジェクトを作成します。
名前を Title に変更し、Title スクリプトをアタッチしてください。


インスペクター画像



 以上で設定は完了です。


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


 完成しましたので、ゲームを実行してフェード機能の確認を行います。

 Title シーンからスタートし、マウスの左クリックをします。
それに合わせてフェードインが始まり、次のシーンへ遷移してからフェードアウトが終了すれば成功です。


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


 フェード機能が動かない場合には、TransitionManager スクリプトや、FadeCanvas ゲームオブジェクトの設定を見直してください。



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

 => 次は 発展14 ーBGM再生の準備ー です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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