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にスクリプトからアクセスすることができず、エラーになってしまいます。
|
1 2 3 4 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; //パネルのイメージを操作するのに必要 |
③ スクリプトのテストを行います。今回、必要な機能は「Panelのオンオフを操作する」ことと「Panelの不透明度を変更する」ことです。
以下のスクリプトを記述し、ゲーム画面の表示を確認してみてください。画面全体が赤っぽく表示されていればOKです。
注）不透明度の指定は0〜1の間。0で透明、1で不透明になります。
|
1 2 3 4 |
void Start () { GetComponent<Image> ().enabled = true; //オフにしていたPanelのImageコンポーネントをオンに変更 GetComponent<Image> ().color = new Color (255, 0, 0, 0.5f); //Imageのカラーを変更。Colorの引数は（ 赤, 緑, 青, 不透明度 ）の順で指定 } |
④ 必要な機能の動作確認ができたので、具体的に処理を記述していきます。まずフェードアウトの処理（暗転）から考えます。
a) 処理が始まったらPanelをオンにして表示できるようにする
b) 不透明度を毎フレーム上げていく
c) 不透明度の変更をパネルに反映する
d) 完全に不透明になったら処理を抜ける
の順で処理すればよさそうです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
float fadeSpeed = 0.02f; //透明度が変わるスピードを管理 float red, green, blue, alfa; //パネルの色、不透明度を管理 public bool isFadeOut = false; //フェードアウト処理の開始、完了を管理するフラグ Image fadeImage; //透明度を変更するパネルのイメージ void Start () { fadeImage = GetComponent<Image> (); red = fadeImage.color.r; green = fadeImage.color.g; blue = fadeImage.color.b; alfa = fadeImage.color.a; } void Update () { if (isFadeOut) { StartFadeOut (); } } void StartFadeOut(){ fadeImage.enabled = true; // a)パネルの表示をオンにする alfa += fadeSpeed; // b)不透明度を徐々にあげる SetAlpha (); // c)変更した透明度をパネルに反映する if(alfa >= 1){ // d)完全に不透明になったら処理を抜ける isFadeOut = false; } } void SetAlpha(){ fadeImage.color = new Color(red, green, blue, alfa); } |
⑤ パネルがすでに不透明になっている場合（「Panel」-「Image」-「Color」-「a」が255になっている場合）は「a」の値を「0」に変更しておいてください（最初から真っ暗だと徐々に暗転する処理ができないので）。ゲーム画面を再生し、inspector上の「isFadeOut」にチェックをつけてみてください。画面が暗転すればOKです。
⑥ 同様にフェードインの処理も実装していきます。
a) 不透明度を毎フレーム下げていく
b) 不透明度の変更をパネルに反映する
c) 完全に透明になったら処理を抜ける
d) Panelをオフにして非表示にしておく
の順で処理すればよさそうです。ゲーム画面を再生し、inspector上の「isFadeOut」「isFadeIn」にチェックをつけてみてください。画面が暗転・明転すればOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
float fadeSpeed = 0.02f; //透明度が変わるスピードを管理 float red, green, blue, alfa; //パネルの色、不透明度を管理 public bool isFadeOut = false; //フェードアウト処理の開始、完了を管理するフラグ public bool isFadeIn = false; //フェードイン処理の開始、完了を管理するフラグ Image fadeImage; //透明度を変更するパネルのイメージ void Start () { fadeImage = GetComponent<Image> (); red = fadeImage.color.r; green = fadeImage.color.g; blue = fadeImage.color.b; alfa = fadeImage.color.a; } void Update () { if(isFadeIn){ StartFadeIn (); } if (isFadeOut) { StartFadeOut (); } } void StartFadeIn(){ alfa -= fadeSpeed; //a)不透明度を徐々に下げる SetAlpha (); //b)変更した不透明度パネルに反映する if(alfa <= 0){ //c)完全に透明になったら処理を抜ける isFadeIn = false; fadeImage.enabled = false; //d)パネルの表示をオフにする } } void StartFadeOut(){ fadeImage.enabled = true; // a)パネルの表示をオンにする alfa += fadeSpeed; // b)不透明度を徐々にあげる SetAlpha (); // c)変更した透明度をパネルに反映する if(alfa >= 1){ // d)完全に不透明になったら処理を抜ける isFadeOut = false; } } void SetAlpha(){ fadeImage.color = new Color(red, green, blue, alfa); } |
完成！
最終的なスクリプトはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; //パネルのイメージを操作するのに必要 public class FadeController : MonoBehaviour { float fadeSpeed = 0.02f; //透明度が変わるスピードを管理 float red, green, blue, alfa; //パネルの色、不透明度を管理 public bool isFadeOut = false; //フェードアウト処理の開始、完了を管理するフラグ public bool isFadeIn = false; //フェードイン処理の開始、完了を管理するフラグ Image fadeImage; //透明度を変更するパネルのイメージ void Start () { fadeImage = GetComponent<Image> (); red = fadeImage.color.r; green = fadeImage.color.g; blue = fadeImage.color.b; alfa = fadeImage.color.a; } void Update () { if(isFadeIn){ StartFadeIn (); } if (isFadeOut) { StartFadeOut (); } } void StartFadeIn(){ alfa -= fadeSpeed; //a)不透明度を徐々に下げる SetAlpha (); //b)変更した不透明度パネルに反映する if(alfa <= 0){ //c)完全に透明になったら処理を抜ける isFadeIn = false; fadeImage.enabled = false; //d)パネルの表示をオフにする } } void StartFadeOut(){ fadeImage.enabled = true; // a)パネルの表示をオンにする alfa += fadeSpeed; // b)不透明度を徐々にあげる SetAlpha (); // c)変更した透明度をパネルに反映する if(alfa >= 1){ // d)完全に不透明になったら処理を抜ける isFadeOut = false; } } void SetAlpha(){ fadeImage.color = new Color(red, green, blue, alfa); } } |