はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー！

トップ > Unity > 【Unity】Text Animator for Unityを使って簡単にTextMeshProにアニメーションをつける

【Unity】Text Animator for Unityを使って簡単にTextMeshProにアニメーションをつける

Unity

はじめに

今回は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コンポーネントをアタッチ
Text Animatorコンポーネントをアタッチする

文字を動的に表示する

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

TextAnimatorPlayerコンポーネントをアタッチする

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

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

I'm <shake>freezing</shake>
shakeタグの挙動

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

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

  • Behavior effects
  • Appearance effects
  • Disappearance effects
Behavior effects

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

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

<wiggle>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}
{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>
Modifiersを利用した様子
パラメーターの種類

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をオンにすることで自動でテキストの変更を検知してくれるようになります。

Use Easy Integrationをオン
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