【Unity】UIのイメージをフェードアウトさせたい

2024年4月24日

UnityでUIのイメージをフェードアウトさせるには、いくつかの方法がありますが、ここではCanvasGroupコンポーネントを使用してスムーズにフェードアウトさせる方法を紹介します。CanvasGroupを使用すると、UIエレメントの透明度を簡単に制御できます。

1. ImageのColorを使用したフェードアウトの手順
- 1.1. カラーのアルファ値を使用したフェードアウトのスクリプト
- 1.2. スクリプトの使い方
2. CanvasGroupを使用したフェードアウトの手順
- 2.1. スクリプトの使用方法
3. DoTweenを仕様したフェードアウトの手順
- 3.1. スクリプトの使い方

ImageのColorを使用したフェードアウトの手順

UnityでUIイメージのカラーのアルファ値を使用してフェードアウトさせることができます。この方法では、Imageコンポーネントのカラープロパティを直接変更して、アルファ値を徐々に0に減少させます。この手法はCanvasGroupを使用する方法と異なり、特定のイメージの透明度のみを調整する場合に適しています。

カラーのアルファ値を使用したフェードアウトのスクリプト

まず、UIイメージがアタッチされているGameObjectにスクリプトを追加する必要があります。以下はそのためのC#スクリプトの例です。

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class FadeOutImage : MonoBehaviour
{
    public Image imageToFade;
    public float fadeDuration = 1.0f;

    void Start()
    {
        StartCoroutine(FadeOut());
    }

    IEnumerator FadeOut()
    {
        float counter = 0f;
        Color imageColor = imageToFade.color; // 元のカラーを保持

        while (counter < fadeDuration)
        {
            counter += Time.deltaTime;
            float alphaValue = Mathf.Lerp(1.0f, 0.0f, counter / fadeDuration);
            imageToFade.color = new Color(imageColor.r, imageColor.g, imageColor.b, alphaValue);
            yield return null;
        }
    }
}

スクリプトの使い方

Image コンポーネントを持つ GameObject に上記のスクリプトをアタッチします。
スクリプトの imageToFade プロパティに、フェードアウトさせたい Image コンポーネントをドラッグ＆ドロップします。
fadeDuration を設定して、フェードアウトの持続時間を調整します。

このスクリプトを使用すると、指定されたイメージのアルファ値が徐々に0になり、イメージがフェードアウトしていきます。特定のイメージだけをフェードアウトさせたい場合に便利です。

CanvasGroupを使用したフェードアウトの手順

Canvasのグループ単位でフェードアウトします

UIイメージを含むGameObjectにCanvasGroupを追加
- Unityエディタで、フェードアウトさせたいUIイメージがあるGameObjectを選択します。
- インスペクターで「Add Component」ボタンをクリックし、「Canvas Group」を検索して追加します。
スクリプトでCanvasGroupの透明度を制御
- 新しいC#スクリプトを作成し、そのスクリプト内でCanvasGroupのalphaプロパティを徐々に0に変更します。

以下にそのスクリプトの例を示します。

using UnityEngine;
using System.Collections;

public class FadeOutUI : MonoBehaviour
{
    public CanvasGroup uiElement;
    public float fadeDuration = 1.0f;

    void Start()
    {
        StartCoroutine(FadeOut());
    }

    IEnumerator FadeOut()
    {
        float counter = 0f;

        while (counter < fadeDuration)
        {
            counter += Time.deltaTime;
            uiElement.alpha = Mathf.Lerp(1, 0, counter / fadeDuration);
            yield return null;
        }
    }
}

スクリプトの使用方法

作成したスクリプトをフェードアウトさせたいUIイメージがあるGameObjectにアタッチします。
スクリプトのuiElementフィールドに、同じGameObjectのCanvasGroupコンポーネントをドラッグ＆ドロップして設定します。
fadeDurationを設定して、フェードアウトの速さを調整します。

これで、指定したUIイメージは徐々に透明になり、フェードアウトするようになります。この方法を使えば、他のUIエレメントにも応用が可能です。

DoTweenを仕様したフェードアウトの手順

このスクリプトでは、Imageコンポーネントのcolorプロパティを操作しています。colorのアルファ値を0に変化させることでフェードアウトを実現します。

using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class FadeOutImage : MonoBehaviour
{
    public Image imageToFade;
    public float fadeDuration = 1.0f;

    void Start()
    {
        // ここでフェードアウトを開始
        imageToFade.DOFade(0f, fadeDuration).SetEase(Ease.InOutQuad);
    }
}