15
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
15
Help us understand the problem. What are the problem?