【Unity】UIテキストに「フェードイン」効果をつける簡単な方法（演出向けTips）

前回テキストを文字送りする処理について記事を書きました。

【Unity】テキストを一文字ずつ表示させるシンプル実装（タイプライター風？＋スキップ対応）

１文字ずつ文字送りをするログ表示ってよくあると思います。今回作っているゲームでも使ってみたいなーと思ったのでざっくり実装してみました。大したものではないですが、サンプルとしてシンプル実装を備忘録として残しておきたいと思います。対象のテキスト...

fu-suke.com

2025.07.05

他にも何か表現方法がないかなーと考えていたところ、
「フェードイン」（パッと切り替わるのではなく徐々に表示）も良くある表現だなと思いました。

そこで、今回は前回の続き（？）として、
テキストを「フェードイン」させる機能のサンプルを用意しました。

まずは、Unityの標準機能を使ってできるシンプル実装です。

フェードインの実装例（コルーチンを利用）

using System.Collections;
using TMPro;
using UnityEngine;

public class TextFadeIn : MonoBehaviour
{
    [SerializeField] TextMeshProUGUI textUI;  // 表示させるテキスト
    [SerializeField] float fadeDuration = 0.5f;  // 遷移時間

    private void Start()
    {
        StartCoroutine(FadeIn());
    }

    IEnumerator FadeIn()
    {
        Color c = textUI.color;
        c.a = 0;
        textUI.color = c;

        float timer = 0f;
        while (timer < fadeDuration)
        {
            timer += Time.deltaTime;
            c.a = Mathf.Clamp01(timer / fadeDuration);
            textUI.color = c;
            yield return null;
        }
    }
}

テキストの色情報の α（透過値）をコルーチンを使って徐々に見えるように変化させています。
シンプルですがその分簡単に実装できますね。

DOTweenを使ったパターン

using TMPro;
using UnityEngine;
using DG.Tweening;

public class TextFadeInDOTween : MonoBehaviour
{
    [SerializeField] TextMeshProUGUI textUI;
    [SerializeField] float fadeDuration = 0.5f;

    void Start()
    {
        // 透明にしてからフェードイン
        Color c = textUI.color;
        c.a = 0;
        textUI.color = c;

        textUI.DOFade(1f, fadeDuration); // fadeDurationかけて不透明に
    }
}

DOTweenというプラグインを入れる必要がありますが、こっちを使ったらコード量はより短くなりますね。
自分はDOTweenを使うことが多いので、こっちを使うことが多いかな？
フェードだけじゃなくて色々な演出を同時だったり、順番に使えたりするのでもし興味がある方はこっちを使ったほうが良いですね。

終わりに

ということで

• コルーチンを使ったパターン
• DOTweenを使ったパターン

の２パターンのサンプルコードを記載してみました。
どなたかの役に立てば何よりです。