https://www.hanachiru-blog.com/entry/2022/05/23/120000

はじめに

今回はText Animator for Unityというアセットの紹介になります。

ざっくり紹介するとRich Text Tagをつけるとそれに対応したアニメーションをする感じで、設定自体も簡単なのですぐに習得することができると思います。

概要

まずはText Animator for Unityとはなんぞやについてですが公式ドキュメントには以下のように記載されています。

“Text Animator for Unity” lets you animate your game texts in a few steps, adding effects to letters, a typewriter and much more.

Documentation | Text Animator for Unity

Text Animator for Unityは数ステップでテキストにアニメーションをつけたり、文字にエフェクトを追加やタイプライターのような表現をすることができるとのことです。

またText Animator for UnityはTextMeshProを利用する前提なので、必ずインストールしておきましょう。

環境要件

TextMeshPro
Unity 2018.4 or above

セットアップ

Text Animatorの実装

Text Animatorの機能を利用するためには以下の操作を行います。

TextMeshPro textコンポーネントがアタッチされているGameObjectにText Animatorコンポーネントをアタッチ

文字を動的に表示する

タイプライターのように文字が表示されるような表現をしたい場合は先ほどのTextAnimatorに加えてTextAnimatorPlayerコンポーネントをアタッチする必要があります。

テキストにエフェクトを追加する

TextAnimatorコンポーネントがアタッチされているゲームオブジェクトのTextMeshProに対して、以下のようにRich Textタグを利用することでアニメーションをさせることができます。

I'm <shake>freezing</shake>

エフェクトの種類について

エフェクトには以下の3種類が存在します。

Behavior effects
Appearance effects
Disappearance effects

Behavior effects

Behavior Effectsは文字が出現された後継続的にアニメーションを行うエフェクトの総称です。

適応するには以下のように書きます。

<wiggle>WIGGLE</wiggle>

既存に実装されているタグの一覧は以下の通りで、どんな見た目になるかは以下のページを参照してください。

Pendulum
Dangle
Fade
Rainbow
Rotate
Bounce
Slide
Swing
Wave
Increase Size
Shake
Wave

www.febucci.com

Appearance effectsとDisappearance effects

Appearance Effectsは画面に文字が出現する際にかかるエフェクトの総称です。

適応するには以下のように書きます。

{vertexp}VERTEXP{/vertexp}

Disappearance effectsは文字が消える際にかかるエフェクトで、Appearance Effectsの逆に動作をします。

適応するには以下のように書きます。

{#size}SIZE{/#size}

ただしDisappearance effectsは後述するTextAnimatorPlayer.StartDisappearingText()からでないと動作しないはずなので注意してください。(要検証)

実装されているエフェクトは以下の通り。

Rotating
Diagonal Expand
Horizontal Expand
Vertical Expand
Offset
Fading
Size
Random Direction

www.febucci.com

デフォルトで適応されるエフェクトを指定する

Tagでエフェクトを指定することもできますが、TextAnimatorにはデフォルトでエフェクト適応を設定することができます。

Default Appearances
Default Behaviors
Default Disappearance

エフェクトのパラメーターを設定する

Modifiersを利用することでエフェクトのパラメーターを設定することができます。

また1が規定値であることに注意してください。

<wiggle>strong</wiggle> vs <wiggle a=3>3times strong</wiggle>

パラメーターの種類

Behavior effects

a: amplitude (effect’s strength)
f: frequency (speed)
w: wave size (how uniform is the effect applied to letters)
d: delay

Appearance effectsとDisappearance effects

a: amplitude (effect’s strength)
bot: bottom (if it starts from bottom or not), set it to 0 for false, and 1 for true
x: horizontal direction, set it to -1 (left), 0 (middle) or 1 (right)
d: duration

文字を動的に表示する(タイプライター)

次にTextAnimatorPlayersを用いて文字を動的に表示・隠す方法について紹介をしたいと思います。

テキストを表示する

以下の2つの方法があります。

コードを利用(推奨)

TextAnimatorPlayer textAnimatorPlayer = GetComponent<TextAnimatorPlayer>();
textAnimatorPlayer.ShowText("hello, world!");

またTextAnimatorPlayer.StopShowingTextやTextAnimatorPlayer.StartShowingTextを利用することでさらに表現を広げられます。

// タイプライターを始める
TextAnimatorPlayer textAnimatorPlayer = GetComponent<TextAnimatorPlayer>();
textAnimatorPlayer.ShowText("hello, world!");
        
// タイプライターを一時停止
textAnimatorPlayer.StopShowingText();
        
// 再会
textAnimatorPlayer.StartShowingText(resetVisibleCharacters: false);
        
// リスタート
textAnimatorPlayer.StartShowingText(resetVisibleCharacters: true);

Easy Integrationを利用

Text AnimatorコンポーネントのUse Easy Integrationをオンにすることで自動でテキストの変更を検知してくれるようになります。

テキストを隠す

テキストを隠すには以下のようなコードを記述します。

TextAnimatorPlayer textAnimatorPlayer = GetComponent<TextAnimatorPlayer>();
textAnimatorPlayer.StartDisappearingText();

TextAnimatorPlayerのインスペクターでの設定

TextAnimatorPlayersのインスペクターでの設定について細かく知りたい方は以下のドキュメントを読んでほしいのですが、重要そうな箇所だけピックアップして紹介します。
Show and hide letters like a typewriter | Text Animator for Unity

Main Settings

Use Type Writer : 動的に文字を表示する

Typewriter

Start Typewriter Mode : タイプライターの表示開始のタイミング
Reset Typing Speed At Startup : 新しいテキストが表示されるたびにタイプライターの速度を1に戻す
Can Skip Typewriter : ユーザーがタイプライターをスキップできるようにする(TextAnimatorPlayer.SkipTypewriter())
Hide Appearances On Skip : スキップされたときにエフェクトが再生されないようにする
Trigger Events On Skip : スキップしたときに残りのイベントをすべてトリガーする

Events

OnTextShowed : テキストが全て表示された後に呼ばれるイベント
OnTextDisappeared : スクリプトが最後の文字を隠したときに呼ばれるイベント
OnTypewriterStart : 最初の文字を表示し始める前に呼ばれるイベント
OnCharacterVisible(char x) : 一文字が表示されるたびに呼ばれるイベント

Triggering Events

特別なタグを書くことで、タイプライターがそのタグの位置にたどり着くとイベントを発火することができます。

// <?--->と書く
<?eventMessage>

public class Sample : MonoBehaviour
{
    [SerializeField] private TextAnimator textAnimator;

    private void Awake()
    {
        textAnimator.onEvent += OnEvent;
    }

    private void OnDestroy()
    {
        textAnimator.onEvent -= OnEvent;
    }

    private void OnEvent(string message)
    {
        switch (message)
        {
            case "eventMessage":
                Debug.Log("eventMessage");
                break;
            case "hoge":
                break;
        }
    }
}

この?の後ろに書いた文字列がOnEventの引数に入ってくるというわけですね。

参照

Documentation | Text Animator for Unity