【Unity】フェードアウトの実装（画面を徐々に暗くする）

2021年10月22日 21:37

今回参考にさせていただいた資料はこちらです．[1]

【Keyword】
・alpha

□ 説明＆環境

【説明】
資料を参考にして，
勉強になった点 → POINT!
失敗した点→ ERROR!
補足した点 → ADD!
と表記しています．

【環境】
MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)
HUAWEI nova lite3
Unity 2020.3.15f2 LTS
※ Unity内の画面レイアウトは異なるかもしれません．

□ 準備

まず，Plane を追加していきます．

Hierarchy内右クリック > UI > Panel

次に Color を変更していきます．

R, G, B を全て 0 にして黒い背景にします．

POINT!
A を 0 にすることを忘れないでください！
A とは alpha値のことで，透明度を表します．

つまり，alpha値を 0 から 100 に変更させるコードを書くことで
徐々に Plane の黒色を表そうとしています．

コードを書いていきます．

（ Fadeout.cs ）

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

public class Fadeout : MonoBehaviour
{


   public GameObject Panelfade;   //フェードパネルの取得

   Image fadealpha;               //フェードパネルのイメージ取得変数

   private float alpha;           //パネルのalpha値取得変数

   private bool fadeout;          //フェードアウトのフラグ変数

   public int SceneNo;            //シーンの移動先ナンバー取得変数


   // Use this for initialization
   void Start()
   {
       fadealpha = Panelfade.GetComponent<Image>(); //パネルのイメージ取得
       alpha = fadealpha.color.a;                 //パネルのalpha値を取得
       fadeout = true;                             //シーン読み込み時にフェードインさせる
   }

   // Update is called once per frame
   void Update()
   {

       if (fadeout == true)
       {
           FadeOut();
       }
   }

   void FadeOut()
   {
       alpha += 0.01f;
       fadealpha.color = new Color(0, 0, 0, alpha);
       if (alpha >= 1)
       {
           fadeout = false;
       }
   }


}

① Canvas > Fadeout (C# Script) > Add Component にドラッグ&ドロップ

② Panelfade > Panel をドラッグ&ドロップ

3のコピー

以上で準備は完了です．

実行してみると

徐々にフェードアウトしていきました．
（gif動画なのでカクカクしていますが自然にフェードアウトしています）

□ まとめ

次回は，ボタンクリックでフェードアウトするシステムを作りたいです．

□ 謝辞

ケロさんのブログを参考にさせていただきました．ありがとうございました！

21/10/22

【Unity】 フェードアウトの実装 （画面を徐々に暗くする）

□ 説明 ＆ 環境