超簡単なフェードアニメーションの作り方！【ゲーム制作記12】

はじめに

今回は、シーン切り替え時にフェードアウトの演出を作りたい時によく使っている方法を紹介します！
こちらの方法。コードはほとんど書かなくてヨシ、アニメーションウィンドウで直感的に操作が可能で、すごく簡単にフェードアウトを作ることができます！

動作環境は

• macOS

• Unity 2021.3.0f1

です。
よろしくお願いします！

フェードアウトのアニメーションを作る

①アニメーションビューを用意する

上部メニューバーから「Windou」を選択
「Animation」にカーソルを合わせるorクリックして、一番上の「Animation」を選択します

これができると、下記のようなアニメーションウィンドウが開きます！
これを使ってアニメーションは編集していきます。

こちらのウィンドウはメインで使っているウィンドウの好きな場所にドラックアンドドロップすることで、好きな場所に置くことができます！毎回別窓に移動するのは少し面倒なので、使いやすい位置に置いておくといいかと思います！

②オブジェクトを用意する

今回必要なのは黒いパネル1個です！
しっかり画面全体を覆えるように、少し画面サイズより大きめに作っておくことをオススメします。

③アニメーションを作成する

上部メニューバーの「Assets」を選択
「Create」にカーソルを合わせるorクリックして、「Animation」を選択します

そうすると、「.anim」ができるので一旦名前をつけます。できたら、先ほど作成した黒いパネルにアタッチ。

ここまでできたら、いざアニメーションウィンドウを使って編集していきます！
フェードアウトが作りたいので、いじるべきは透明度だけです！

アニメーションウィンドウを開いて、「Add Property」をクリックします。
次に「Image」の中の「Color」の横にあるプラスマークをクリック。

下のような画面になったかなと思います！
透明度はこのうちの「Color.a」で変更ができます。

フェードアウトは透明度0から数秒かけて透明度を1に変更するようにすれば表現できます。

デフォルトでColor.aは1になってるので、0秒のところにあるColor.aのダイヤマークをクリックして青色にしたら、Color.aの値を「0」にします。

これだけでOK！
デフォルトのままだとフェードアウトの長さは1秒で行うことになっていますが、もう少し長くしたい場合は1秒のところにあるマークたちを右側に移動させればOKです。

試しに2秒に伸ばしてみました！

ボタンを押したらアニメーションを流した後にシーンを切り替えるようにしてみる

コードはこんな感じ。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class Scene: MonoBehaviour {

    [SerializeField] private string loadScene; //読み込むシーン
    [SerializeField] Animator MoveObject; //アニメーションをつけたオブジェクトをアタッチ
    public GameObject Fedeout; //フェードアウト用のパネル

    void Start()
    {
        Fedeout.SetActive(false);
    }

    public void timeLag()
    {
        Invoke("scene", 2); //2秒後にシーン遷移する。フェードアニメーションの時間と合わせる
        Fedeout.SetActive(true);
        MoveObject.Play("Sample"); //流したいアニメーションファイルの名前に書き換える
    }

    public void scene()
    {
        SceneManager.LoadScene(loadScene);
    }

}

シーン切り替えのやり方についてはこちらの記事でやり方を紹介しているので、わからない方はぜひこちらを見てみてください！

Inspector画面の設定はこんな感じで行いました。

これで完了です！

最後に

最後まで見ていただき、ありがとうございました！

アニメーションは動画編集スキルが生きますね……！嬉しい！

また次回の記事でお会いしましょう！