【Unity】TextAnimatorで会話シーンを彩ろう！

TextAnimatorは、テキストにアニメーション効果を簡単に追加できるアセットです。
文字を1文字ずつフェードインさせながら表示させたり、ぴょんぴょん跳ねさせたりといった動きを簡単に実装できます
しかもそれを専用のリッチテキストタグを使って制御できるため、マスターデータに挙動を埋め込めるのが最高です

本記事ではV2を使っています

基本的な使い方

TextMeshProのテキストオブジェクトにTextAnimatorコンポーネントを追加します

追加したいアニメーションのタグをTextMeshProのテキストに追加します
例えば<wave>タグで囲めば波打つようなアニメーション、<shake>タグでぶるぶる震えるアニメーションを文字に追加できます

普通にリッチテキストのタグを使うような感覚で使えるのでかなり取っつきやすいと思います
タグを重ねれば複数のアニメーションをかけることもできます

Typewriterコンポーネントを使えば1文字ずつ表示する、のような実装も簡単です
タグは<>ではなく{}で囲みます

常時タグ

<>で囲うと常時効果が出るアニメーションを追加できます
可読性とかを考えて使えそうなやつをいくつか紹介します

使用できるタグはこちらから見ることができます
https://docs.febucci.com/text-animator-unity/2.x/effects/built-in-effects-list

<wave>

少しふざけてるとき、酔ってるとき、セリフを少し強調・意味深にさせたりなど、割といろいろなところで使えます

<shake>

恐怖で震えているとき、怒っているとき、セリフを強調したいときに使えます
<shake a=1.5>のように引数を追加することで震えの強さを調節できます

<bounce>

テンションが高いとき、はしゃいでるときに使えます。

他にも <rainb> <wiggle> など使えるタグがあるので一覧を見てみてください

カスタムイベントタグ

TypeWriterで1文字ずつ表示する場合、特定の文字に到達したときのイベントを取得することができます
タグは<?tagName>の形式です

TypewriterのonMessageを購読することでタグに到達したときのイベントを補足できます

例として、カメラシェイクとユニティちゃんにズームするタグを作ってみます

using System;
using DG.Tweening;
using Febucci.UI;
using Febucci.UI.Core;
using Febucci.UI.Core.Parsing;
using NUnit.Framework.Internal;
using UnityEngine;

public class TextEventHandler : MonoBehaviour
{
    [SerializeField] private TypewriterCore typeWrapper;
    private const float originOrthoSize = 1.40625f;
    
    private void OnEnable()
    {
#if UNITY_EDITOR
        if(!UnityEditor.EditorApplication.isPlaying) return;
#endif
        // OnMessageを購読してカスタムイベントを検知する
        typeWrapper.onMessage.AddListener(OnMessage);
    }

    private void OnMessage(EventMarker eventMarker)
    {
        Debug.Log($"tag:{eventMarker.name}, params:{string.Join(",", eventMarker.parameters)}");
        
        // eventMarker.nameからタグ名を取得できる
        // eventMarker.parametersから引数を取得できる
        switch(eventMarker.name)
        {
            case "cameraShake":
                CameraShake(float.Parse(eventMarker.parameters[0]), float.Parse(eventMarker.parameters[1]));
                break;
            case "zoom":
                Zoom(float.Parse(eventMarker.parameters[0]), float.Parse(eventMarker.parameters[1]));
                break;
        }
    }

    /// <summary>
    /// カメラシェイク(実装かなり適当です)
    /// </summary>
    private void CameraShake(float duration, float strength)
    {
        var camera = Camera.main;
        camera.transform.DOShakePosition(duration, Vector2.one * strength);
    }

    /// <summary>
    /// ズーム(実装かなり適当です)
    /// </summary>
    private void Zoom(float duration, float ratio)
    {
        var t = 1 - Mathf.InverseLerp(1, 2, ratio);
        var y = Mathf.Lerp(-0.721f , 0, t);
        
        ratio = originOrthoSize * (1 / ratio);
        
        var camera = Camera.main;
        camera.transform.DOMoveY(y, duration).SetEase(Ease.OutCubic);
        camera.DOOrthoSize(ratio, duration).SetEase(Ease.OutCubic);
    }

    private void OnDisable()
    {
#if UNITY_EDITOR
        if(!UnityEditor.EditorApplication.isPlaying) return;
#endif
        typeWrapper.onMessage.RemoveListener(OnMessage);
    }
}

<?zoom=秒数,強さ> <?cameraShake=秒数,強さ> の形式でタグを入力します

君が<waitfor=1><?zoom=0.05,1.5><waitfor=0.1><?cameraShake=0.05,0.1>やったんだろ！<waitfor=1>...<?cameraShake=0.05,0.2><size=130%>言え！

迫力が出て良い感じですね。もちろん<size>タグのような、TextMeshPro標準のタグとも併用できます

他にもアニメーションを変える、音を鳴らす、など色々できそうです

おわりに

私が使っているTextAnimatorはV2で、2025/12/19現在はV3が最新なのでそっちを使ってください。多分この記事で紹介したことはほぼ変わらずに使えると思います。

このアセットの良いところは、やはりアニメーション効果をテキストデータとしてマスターデータに埋め込めるという点だと思います。引数である程度は動きを調整できるし、セリフをエクセルだったりに打ち込む人が調節しやすくてとても良い。

TextAnimatorには他にも色々な機能があります。複数のタグを1つにまとめるスタイル機能やオリジナル文字アニメーションをするタグを作れたり。是非活用してみてください！メリクリ！