CanvasGroupとDoTweenでお手軽フェードイン・フェードアウト

　Unityでは、uGUIのCanvasGroupとアニメーションライブラリ DoTween を用いることで、上のGIFのようなフェードイン・フェードアウトは非常に簡単に実現できます。

　下記にフェードイン・フェードアウトを行うことができる、自作CanvasGroupの拡張メソッドを示します。

using DG.Tweening;
using UnityEngine;

namespace Murosta.Utility
{
    public static class CanvasGrouopExtensions
    {
        public static Tweener FadeOut(this CanvasGroup canvasGroup, float duration)
        {
            return canvasGroup.DOFade(0.0F, duration);
        }

        public static Tweener FadeIn(this CanvasGroup canvasGroup, float duration)
        {
            return canvasGroup.DOFade(1.0F, duration);
        }
    }
}

　以下、CanvasGroupのドキュメントより。

Canvas Group は、個別に処理することなく一ヶ所から UI 要素のグループ全体における特定の機能を与えるのに用いることができます。CanvasGroupのプロパティーは、そのコンポーネントがアタッチされているゲームオブジェクトだけでなく、すべての子要素に影響を与えます。

　CanvasGroupを使うと、対象ゲームオブジェクトとその子階層のゲームオブジェクトの全てのUIコンポーネントの設定をまとめて行うことができます。設定項目は、Interactableかどうか、Raycastをブロックするかどうか、そしてα値などです。

　さて、アニメーションライブラリ DoTweenには、CanvasGroupクラスの拡張メソッドとして、DOFadeというメソッドが定義されており、このメソッドを使うことでCanvasGroupのα値を刻々と変化させることができます。

　このようにUnityでは、uGUIのCanvasGroupとアニメーションライブラリ DoTween を用いることで、上のGIFのようなフェードイン・フェードアウトは非常に簡単に実現できます。

• キャラクターグラフィック【臼井の会 RPGツクール素材支部】 様
• エネミーグラフィック【Ｒド】 様