【Unity】DOTweenを使ったUICanvasのフェード

DoTween（DOTween）は、Unityで使われる非常に人気の高いアニメーションライブラリです。特に、UIコンポーネントのアニメーションに関して高い柔軟性とパフォーマンスを提供します。CanvasGroup コンポーネントを使ってUIをフェードイン・アウトする場合、DoTweenを活用することで簡単かつ効果的にアニメーションを実装することができます。

CanvasGroup について

CanvasGroup はUnityのUI要素に対するコンポーネントで、複数のUI要素（Canvas 内のすべての要素）に対して一括で透明度（Alpha）、インタラクティビティ、レイキャストブロッキングの設定を適用することができます。特にフェードアウトやフェードインの際には、このコンポーネントのalpha プロパティを 0 から 1、または 1 から 0 に変化させることで実現します。

実行結果

シーン構成

DoTweenを使用したフェードイン・フェードアウトの基本的な使い方

以下は、CanvasGroupのalpha値を操作してフェードインおよびフェードアウトを実行する基本的なコードです。

using UnityEngine;
using DG.Tweening;  // DOTweenを使用するために必要

public class UIFader : MonoBehaviour
{
    public CanvasGroup canvasGroup;
    public float fadeDuration = 1.0f;  // フェードにかける時間

    void Start()
    {
        // フェードアウトを実行
        FadeOut();
    }

    // フェードアウトを行うメソッド
    public void FadeOut()
    {
        canvasGroup.DOFade(0f, fadeDuration).SetEase(Ease.InOutQuad);
    }

    // フェードインを行うメソッド
    public void FadeIn()
    {
        canvasGroup.DOFade(1f, fadeDuration).SetEase(Ease.InOutQuad);
    }
}
  • using DG.Tweening; はDoTweenライブラリを使用するための名前空間をインポートしています。
  • public CanvasGroup canvasGroup; でCanvasGroupをインスペクターからアサインできるようにしています。
  • DOFade() メソッドは、指定した値（第一引数）へ alpha 値を指定した時間（第二引数）でアニメーションします。このメソッドはDoTweenによって拡張されたメソッドです。
  • SetEase(Ease.InOutQuad) はアニメーションのイージングタイプを設定しています。イージングはアニメーションの開始と終了時に速度を調整することで、より自然な動きを作り出します。

利用シナリオ

  • ゲームメニューの表示と非表示: ゲームのポーズメニューや設定ウィンドウなど、ゲームプレイ中に表示するUIのフェードイン・アウトに利用できます。
  • シーンの遷移: シーンが切り替わる前後でのフェードアウト・インを行うことで、スムーズな画面遷移を実現できます。
  • インタラクティブなUI反応: ユーザーのアクションに応じて情報パネルをフェードイン・アウトすることで、視覚的なフィードバックを強化できます。

DoTweenを使うことで、これらのアニメーションを簡単に実装し、コードの複雑さを低減しながらパフォーマンスも向上させることが可能です。また、DoTweenは多くのカスタマイズオプションを提供しており、プロジェクトのニーズに合わせた細かな調整が行えます。

フェード処理終了時にゲームオブジェクトのアクティブ・非アクティブを実行したい

using UnityEngine;
using DG.Tweening;  // DoTweenライブラリを利用するための名前空間

public class CanvasGroupFader : MonoBehaviour
{
    [SerializeField]
    private CanvasGroup canvasGroup; // CanvasGroupコンポーネントへの参照

    // フェードアウトメソッド
    public void FadeOut(float duration)
    {
        // CanvasGroupの透明度を0にアニメーションする。時間はduration秒。
        canvasGroup.DOFade(0f, duration).SetEase(Ease.InOutQuad) // イージングはインアウトのクアッドに設定
            .OnComplete(() =>
            {
                // アニメーションが完了したら、GameObjectを非アクティブに設定
                canvasGroup.gameObject.SetActive(false);
            });
    }

    // フェードインメソッド
    public void FadeIn(float duration)
    {
        // CanvasGroupの透明度を1にアニメーションする。時間はduration秒。
        canvasGroup.DOFade(1f, duration).SetEase(Ease.InOutQuad) // イージングはインアウトのクアッドに設定
            .OnComplete(() =>
            {
                // アニメーションが完了したら、GameObjectをアクティブに設定
                canvasGroup.gameObject.SetActive(true);
            });
    }
}

このコードはUnityで使用するCanvasGroupFader1というクラスを定義しており、このクラスを使ってUIのフェードアウトおよびフェードインのアニメーションを制御しています。DoTweenライブラリを利用して、CanvasGroupコンポーネントの透明度をアニメーションすることにより、スムーズなフェード効果を実現しています。以下、コードの各部分の詳細な説明です：

コードの構造

using UnityEngine;
using DG.Tweening;  // DoTweenライブラリを利用するための名前空間

public class CanvasGroupFader : MonoBehaviour
{
    [SerializeField]
    private CanvasGroup canvasGroup; // CanvasGroupコンポーネントへの参照
  • using DG.Tweening;: DoTweenアニメーションライブラリを使用するための名前空間です。
  • [SerializeField] private CanvasGroup canvasGroup;: CanvasGroup コンポーネントへの参照を保持します。SerializeField 属性により、Unityエディターからこのフィールドを設定できるようになりますが、スクリプト外部からの直接アクセスは制限されます。

フェードアウトメソッド

    // フェードアウトメソッド
    public void FadeOut(float duration)
    {
        // CanvasGroupの透明度を0にアニメーションする。時間はduration秒。
        canvasGroup.DOFade(0f, duration).SetEase(Ease.InOutQuad) // イージングはインアウトのクアッドに設定
            .OnComplete(() =>
            {
                // アニメーションが完了したら、GameObjectを非アクティブに設定
                canvasGroup.gameObject.SetActive(false);
            });
    }
  • public void FadeOut(float duration): フェードアウトを行うためのメソッドで、引数durationにはフェードアウトにかける時間（秒）を指定します。
  • DOFade(0f, duration): CanvasGroupのalphaプロパティを0にアニメーションします。これにより、関連するUI要素は完全に透明になり、視覚的には非表示の状態になります。
  • SetEase(Ease.InOutQuad): アニメーションのイージング関数を設定します。InOutQuadは開始と終了がゆっくりで中間が速い、自然な動きを作り出します。
  • OnComplete: アニメーション完了時に実行されるコールバックを設定します。ここではcanvasGroup.gameObject.SetActive(false);を呼び出して、フェードアウト完了後にGameObjectを非アクティブ化しています。

フェードインメソッド

    // フェードインメソッド
    public void FadeIn(float duration)
    {
        // CanvasGroupの透明度を1にアニメーションする。時間はduration秒。
        canvasGroup.DOFade(1f, duration).SetEase(Ease.InOutQuad) // イージングはインアウトのクアッドに設定
            .OnComplete(() =>
            {
                // アニメーションが完了したら、GameObjectをアクティブに設定
                canvasGroup.gameObject.SetActive(true);

            });
    }
  • public void FadeIn(float duration): フェードインを行うためのメソッドです。こちらもdurationでアニメーションの時間を指定します。
  • DOFade(1f, duration): CanvasGroupのalphaプロパティを1にアニメーションし、UI要素を完全に不透明にします。これによりUI要素が視覚的に表示されます。
  • OnComplete: アニメーション完了時のコールバックです。フェードイン後にGameObjectをアクティブにします

このクラスはCanvasGroupを使ってUI要素全体に影響を及ぼすため、シンプルで効果的なUI制御が可能です。

フェード処理終了時に「何か」をしたい

using UnityEngine;
using UnityEngine.Events;
using DG.Tweening;

public class CanvasGroupFader : MonoBehaviour
{
    [SerializeField]
    private CanvasGroup canvasGroup;

    // UnityEventの公開
    public UnityEvent onFadeOutComplete;
    public UnityEvent onFadeInComplete;

    // フェードアウトメソッド
    public void FadeOut(float duration, bool deactivateOnComplete = false)
    {
        canvasGroup.DOFade(0f, duration).SetEase(Ease.InOutQuad).OnComplete(() => {
            if (deactivateOnComplete)
            {
                canvasGroup.gameObject.SetActive(false);
            }
            onFadeOutComplete.Invoke();  // イベントの呼び出し
        });
    }

    // フェードインメソッド
    public void FadeIn(float duration, bool activateOnStart = false)
    {
        if (activateOnStart)
        {
            canvasGroup.gameObject.SetActive(true);
        }
        canvasGroup.DOFade(1f, duration).SetEase(Ease.InOutQuad).OnComplete(() => {
            onFadeInComplete.Invoke();  // イベントの呼び出し
        });
    }
}

このコードは、Unityプロジェクト内でCanvasGroupコンポーネントを使ってUI要素のフェードインおよびフェードアウトを制御するクラスCanvasGroupFaderを定義しています。CanvasGroupを使用すると、透明度だけでなく、子要素のインタラクティビティとブロッキング（レイキャスト）も管理できます。コードの各部分を詳しく説明します：

インポートとクラス定義

using UnityEngine;
using UnityEngine.Events;
using DG.Tweening;
  • UnityEngineとUnityEngine.EventsはUnityエンジンの基本機能とイベントシステムへのアクセスを提供します。
  • DG.TweeningはDOTweenアニメーションライブラリを使用するための名前空間です。これにより、スムーズなトランジションやアニメーションを容易に実装できます。

プライベート変数と公開イベント

[SerializeField]
private CanvasGroup canvasGroup;

public UnityEvent onFadeOutComplete;
public UnityEvent onFadeInComplete;
  • [SerializeField] private CanvasGroup canvasGroup;は、エディターから直接CanvasGroupコンポーネントを割り当てることを可能にしますが、他のスクリプトからはアクセスできないようにします。
  • onFadeOutComplete と onFadeInComplete は公開されたUnityEvent、これにより他のスクリプトやエディタから特定のアクションをフェード完了時に実行するよう設定できます。

フェードアウトメソッド

public void FadeOut(float duration, bool deactivateOnComplete = false)
{
    canvasGroup.DOFade(0f, duration).SetEase(Ease.InOutQuad).OnComplete(() => {
        if (deactivateOnComplete)
        {
            canvasGroup.gameObject.SetActive(false);
        }
        onFadeOutComplete.Invoke();
    });
}
  • FadeOutメソッドは指定された時間（duration）をかけて透明度を0にします。SetEase(Ease.InOutQuad)はアニメーションにイージングを適用し、自然な動きを作ります。
  • OnComplete内のラムダ関数は、フェードアウトが完了したときに実行されます。deactivateOnCompleteがtrueの場合、関連するGameObjectを非アクティブにし、その後にonFadeOutCompleteイベントを呼び出します。

フェードインメソッド

public void FadeOut(float duration, bool deactivateOnComplete = false)
{
    canvasGroup.DOFade(0f, duration).SetEase(Ease.InOutQuad).OnComplete(() => {
        if (deactivateOnComplete)
        {
            canvasGroup.gameObject.SetActive(false);
        }
        onFadeOutComplete.Invoke();
    });
}
  • FadeOutメソッドは指定された時間（duration）をかけて透明度を0にします。SetEase(Ease.InOutQuad)はアニメーションにイージングを適用し、自然な動きを作ります。
  • OnComplete内のラムダ関数は、フェードアウトが完了したときに実行されます。deactivateOnCompleteがtrueの場合、関連するGameObjectを非アクティブにし、その後にonFadeOutCompleteイベントを呼び出します。

このクラスを使用すると、フェードインとフェードアウトの処理を簡単に実装でき、完了時に特定のアクションを自動的にトリガーすることが可能になります。これはUIの表示/非表示、シーン遷移、または任意のアニメーション後のアクションに非常に便利です。

使い方

その１

空のゲームオブジェクトにアタッチし、canvasGroupフィールドにフェード対象のCanvasをアウトレット接続します

using UnityEngine;
using DG.Tweening;  // DOTweenを使用するために必要

public class UIFader : MonoBehaviour
{
    public CanvasGroup canvasGroup;
    public float fadeDuration = 1.0f;  // フェードにかける時間

    void Start()
    {
        // フェードアウトを実行
        FadeOut();
    }

    // フェードアウトを行うメソッド
    public void FadeOut()
    {
        canvasGroup.DOFade(0f, fadeDuration).SetEase(Ease.InOutQuad);
    }

    // フェードインを行うメソッド
    public void FadeIn()
    {
        canvasGroup.DOFade(1f, fadeDuration).SetEase(Ease.InOutQuad);
    }
}

その２

空のゲームオブジェクトにアタッチします
フェードが終了すると、コールバックが実行されます

using UnityEngine;

public class Test : MonoBehaviour
{
    void Start()
    {
        // "Canvas"という名前のGameObjectをシーンから探し、そこにアタッチされているCanvasGroupFaderコンポーネントを取得
        var fader = GameObject.Find("Canvas").GetComponent<CanvasGroupFader>();
        
        // CanvasGroupFaderのonFadeOutCompleteイベントにEndOfFadeOutメソッドをリスナーとして追加
        fader.onFadeOutComplete.AddListener(EndOfFadeOut);

        // 1秒かけてフェードアウトを開始
        fader.FadeOut(1.0f);
    }

    // フェードアウトが完了した時に呼ばれるメソッド
    private void EndOfFadeOut()
    {
        // コンソールに"フェードアウト終わり"と表示
        Debug.Log("フェードアウト終わり");
    }
}
  1. Startメソッド: Unityのライフサイクルに基づいて、GameObjectが有効になった直後に一度だけ実行されます。ここで、フェードアウト処理とイベントの設定が行われます。
  2. GameObject.Find: 指定した名前のGameObjectをシーンから検索します。この例では"Canvas"という名前のGameObjectを検索しています。
  3. GetComponent: 検索したGameObjectからCanvasGroupFaderコンポーネントを取得します。このコンポーネントがフェードアウト処理を制御します。
  4. AddListener: onFadeOutCompleteイベントにEndOfFadeOutメソッドをリスナーとして追加します。これにより、フェードアウトが完了した際に自動的にこのメソッドが呼ばれるようになります。
  5. FadeOutメソッドの呼び出し: 実際にフェードアウトを開始します。ここでは1秒間で透明度を0にします。
  6. EndOfFadeOutメソッド: フェードアウトが完了したときに実行されるメソッドで、デバッグログにメッセージを出力します。

このコードは、UIのフェードアウト処理を管理し、その完了時に何らかのアクションをトリガーする一般的なパターンを示しています。特にゲーム開発でのシーン遷移やメッセージ表示に便利です。

UI,Unity

Posted by hidepon