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

  • 9
    Like
  • 0
    Comment

fade.gif

 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のようなフェードイン・フェードアウトは非常に簡単に実現できます。