Unityでフェードイン/フェードアウトを実装する方法

2017.07.02 自習室 0
Unityでフェードイン/フェードアウトを実装する方法

次のムービーのように、シーン遷移時などに画面を徐々に暗転させたり(フェードアウト)、暗転した画面を徐々に明るくする処理(フェードイン)の実装方法です。

環境

  • Unity 5.6.0f3

このページの構成

ポイント
パネルの設定
スクリプトの記述
完成!
参考リンク

ポイント

  • 画面全体に広げたパネルの透明度を徐々に変化させることでフェードイン/フェードアウトを表現する
  • スクリプトからUIにアクセスする時は必ず「using UnityEngine.UI;」の記述を追加する
  • 透明度(ColorのA)の設定は、エディター上では0〜255の間で値を指定するが、スクリプトから操作する時は0〜1の間で値を指定する

パネルの設定

パネルを設置する

① フェードイン/フェードアウトを実装したいシーンを開いてください。まずパネルを設置します。Hierarckyビューのcreateから「UI」ー「Panel」を選択します。

② 自動的に作成されるcanvasの設定を変更します。
RenderModeを「Screen Space – Camera」に変更し、RenderCameraでパネルを表示するCameraを指定します。CanvasScalerのUI Scale Modeを「Scale With Screen Size」にし、Reference Resolutionを画面の解像度と合わせ、ScreenMatchModeを「Expand」にしておきます。

③ 先ほど作成したPanelを選択し、Colorを変更してみます。R,G,B,Aをそれぞれ「 0, 0, 0, 255」に設定してみてください。
R(red),G(green),B(blue)が色を、A(alpha)が透明度を表すコードです。スクリプトでこの透明度を操作し、徐々に透明にしたり不透明にすることでフェードイン/フェードアウトを表現します。ここではゲームビューを確認し、画面全体が黒く描画されていればOKです。もし隙間ができているようならPanelのScaleを少し大きくし、隙間がないようにしておいてください。

④ これでPanelの設定は完了です。フェードイン/フェードアウトしない間はパネルを表示しておく必要がないので、PanelのImageコンポーネントのチェックを外し、表示しないようにしておきます。

スクリプトの記述

スクリプトを作成する

① projectビューのcreateから「C#スクリプト」を選択し、適当な名前をつけます。ここでは「FadeController」という名前にしています。作成したC#スクリプトを先ほど作成したPanelにアタッチしておきます。

② スクリプトを記述していきます。まずはじめに、必ず「using UnityEngine.UI;」の記述を追加しておいてください。この記述がないとUIにスクリプトからアクセスすることができず、エラーになってしまいます。

③ スクリプトのテストを行います。今回、必要な機能は「Panelのオンオフを操作する」ことと「Panelの不透明度を変更する」ことです。
以下のスクリプトを記述し、ゲーム画面の表示を確認してみてください。画面全体が赤っぽく表示されていればOKです。
注)不透明度の指定は0〜1の間。0で透明、1で不透明になります。

④ 必要な機能の動作確認ができたので、具体的に処理を記述していきます。まずフェードアウトの処理(暗転)から考えます。

a) 処理が始まったらPanelをオンにして表示できるようにする
b) 不透明度を毎フレーム上げていく
c) 不透明度の変更をパネルに反映する
d) 完全に不透明になったら処理を抜ける

の順で処理すればよさそうです。

⑤ パネルがすでに不透明になっている場合(「Panel」-「Image」-「Color」-「a」が255になっている場合)は「a」の値を「0」に変更しておいてください(最初から真っ暗だと徐々に暗転する処理ができないので)。ゲーム画面を再生し、inspector上の「isFadeOut」にチェックをつけてみてください。画面が暗転すればOKです。

⑥ 同様にフェードインの処理も実装していきます。

a) 不透明度を毎フレーム下げていく
b) 不透明度の変更をパネルに反映する
c) 完全に透明になったら処理を抜ける
d) Panelをオフにして非表示にしておく

の順で処理すればよさそうです。ゲーム画面を再生し、inspector上の「isFadeOut」「isFadeIn」にチェックをつけてみてください。画面が暗転・明転すればOKです。

完成!

最終的なスクリプトはこちら

参考リンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です