Unity-フェードインとフェードアウト

はじめに

この記事はUnityを用いてFade in と Fade out を行うための記事です。
この作業に自分はそこそこ四苦八苦したのでまとめておきます。
Fade in と Fade out はゲームを作る際に場面転換（暗転・明転）によく使われる技術です。この記事を読んで自分の作品をグッとそれっぽくしよう！

流れ

今回はFade out (暗転) を作ります。
Fade in と Fade out は色のついたオブジェクトをUI上に設置し、透明度を変化させて実装していきます。今後の説明をスムーズに行うためにまずは全体の流れを説明します。

1. 透明化させるオブジェクトを作成
2. 透明度を変化させるスクリプト(C#)を書く

以上の2ステップで解説していきたいと思います。

1.透明化させるオブジェクトを作成

まずは透明化させるオブジェクトを作ります。
Hierarchy > Create > UI > Panel でPanelを作成してください。
次にPanelについてるImageコンポーンネントのColorの値を変更します。
暗転させたいのでRGBは(0,0,0),Aという値も0にしましょう。
このAという値はα値と呼ばれ、透明度を表します。0で完全に透明、255で完全に不透明となります。

最後にチェックとしてAを0にすると透明、Aを255にすると真っ黒になることを確認します。これで透明化させるオブジェクトは完成です。

2. 透明度を変化させるスクリプト(C#)を書く

次に透明度を変更するためのスクリプトを作成します。
ここではスクリプトの名前をFadeScriptにしています。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;     //UIを使用可能にする

public class FadeScript : MonoBehaviour {

最初はここですねスクリプトの1番上のやつです。
デフォルトでほぼ書かれていると思いますが、１箇所だけ書き足さなくてはいけません。
using UnityEngine.UI;　　//UIを使用可能にする
ここですね。これはUIに関する部分を触るときに書かなくてはならないものです。あまり深くは考えずおもじない程度に認識しておいてください。

次はこちらです。

    public float speed = 0.01f;  //透明化の速さ
    float alfa;    //A値を操作するための変数
    float red, green, blue;    //RGBを操作するための変数

        void Start () {
　　　　　//Panelの色を取得
             red = GetComponent<Image>().color.r;
             green = GetComponent<Image>().color.g;
             blue = GetComponent<Image>().color.b;
    }

コメントアウトで書いてある通りですが、使用する変数を宣言しておきます。ポイントは全部floatで宣言してることくらいですかね。
余談ですが「using UnityEngine.UI;」を書き忘れると「GetComponent()」でエラーが出ます。

最後にこちらです。

void Update () {
        GetComponent<Image>().color = new Color(red, green, blue, alfa);
        alfa += speed;
    }

ここで注意しなければならないのが画面上でA値を変更するときは値の範囲は0~255ですがスクリプトから扱う場合は範囲が0~1となります。そのため、speedは小数で設定しています。
Update()が呼び出される度にA値が少しずつ高くなっていき次第に透明ではなくなってくわけですね。

以上で解説は終わりです。

最後に

ここまで読んでいただきありがとうございます。
speedはpublicで宣言しているのでFade outの速さ細かいところはGUIからいじれます。
スクリプトもGUI操作もかなり簡単なものにしたので、様々な応用をしていただければ幸いです。
最後にスクリプトのまとめたものを貼っておきます。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class FadeScript : MonoBehaviour {
    float alfa;
    float speed = 0.01f;
    float red, green, blue;

    void Start () {
        red = GetComponent<Image>().color.r;
        green = GetComponent<Image>().color.g;
        blue = GetComponent<Image>().color.b;
    }

    void Update () {
        GetComponent<Image>().color = new Color(red, green, blue, alfa);
        alfa += speed;
    }