TextMeshProのテキストを1文字ずつアニメーション【Unity】【DOTween】【TextMesh Pro】

この記事でのバージョン
Unity 2021.3.1f1

はじめに

Unityで位置や大きさなどのアニメーション、

いわゆるTweenを実装するアセットとしてお馴染みのDOTween。

DOTween Pro | Visual Scripting | Unity Asset Store

今回はそのDOTweenを使ってTextMeshProのテキストを

1文字ずつアニメーションする方法の紹介です！(※有料のPro版のみの機能です)

なお、記事中では以下のフォントを使っています。

準備

まず、DoTweenをTextMesh Proで使うには一つ設定をする必要があります。

Tools/Demigiant/DOTween Utility Panelから開いたウィンドウを開き、

SetupのSetup DOTweenを押します。

後はTextMesh Proという所にチェックを入れてApplyを押すだけでOK。

ちなみにこれでuGUIのテキストと同じようにテキスト全体に対するTweenも実行出来るようになります。

[SerializeField]
private TextMeshProUGUI _textMeshPro = default;
  
[SerializeField]
private Text _text = default;

//テキストを2秒かけてフェードアウト
_textMeshPro.DOFade(0, 2);
_text.DOFade(0, 2);

1文字ずつアニメーション

次は本題の1文字ずつアニメーションする方法ですが、

TextMeshProUGUIを元にDOTweenTMPAnimatorを作り、

1文字ずつアニメーションを設定していくだけです。

//TextMeshProUGUIのテキスト、Inspectorで設定
[SerializeField]
private TextMeshProUGUI _text = null;

 private void Start() {
  //DOTweenTMPAnimatorを作成
  DOTweenTMPAnimator animator = new DOTweenTMPAnimator(_text);
    
  //1文字ずつアニメーションを設定(iが何番目の文字かのインデックス)
  for (int i = 0; i < animator.textInfo.characterCount; i++){
      
  }
}

例えば色を変えるDOColorCharだと以下のような感じになります。

for (int i = 0; i < animator.textInfo.characterCount; i++){
  //0.5秒かけて黒に変更、ただし開始は0.1秒ずつずらす
  animator.DOColorChar(i, Color.black, 0.5f).SetDelay(i * 0.1f);
}

さらに位置を変えるDOOffsetCharや、

for (int i = 0; i < animator.textInfo.characterCount; i++){
  //0.5秒かけて上に10移動、ただし開始は0.1秒ずつずらす
  animator.DOOffsetChar(i, new Vector3(0, 10, 0), 0.5f).SetDelay(i * 0.1f);
}

スケールを変えるDOScaleChar等もあります。

for (int i = 0; i < animator.textInfo.characterCount; i++){
  //0.5秒かけて上に1.2倍に拡大、ただし開始は0.1秒ずつずらす
  animator.DOScaleChar(i, Vector3.one * 1.2f, 0.5f).SetDelay(i * 0.1f);
}

もちろん他のDOTweenのアニメーションのように

これらをSequenceで組み合わせて使う事も可能です。

//Sequenceで全文字のアニメーションをまとめる
var sequence = DOTween.Sequence();
sequence.SetLoops(-1);//無限ループ設定
    
//一文字ずつにアニメーション設定
var duration = 0.2f;//1回辺りのTween時間
for (int i = 0; i < animator.textInfo.characterCount; ++i){
  sequence.Join(DOTween.Sequence()
    //上に移動して戻る
    .Append(animator.DOOffsetChar(i, animator.GetCharOffset(i) + new Vector3(0, 30, 0), duration).SetEase(Ease.OutFlash, 2))
    //同時に1.2倍に拡大して戻る
    .Join(animator.DOScaleChar(i, 1.2f, duration).SetEase(Ease.OutFlash, 2))
    //同時に360度回転
    .Join(animator.DORotateChar(i, Vector3.forward * -360, duration, RotateMode.FastBeyond360).SetEase(Ease.OutFlash))
    //同時に色を黄色にして戻す
    .Join(animator.DOColorChar(i, Color.yellow, duration * 0.5f).SetLoops(2, LoopType.Yoyo))
    //アニメーション後、1秒のインターバル設定
    .AppendInterval(1f)
    //開始は0.15秒ずつずらす
    .SetDelay(0.15f * i)
  );
}

参考

---