【Unity】DoTweenを使って楽にテキストを1文字ずつ表示する

はじめに

よくノベルゲームなどで見る一文字ずつ表示されるテキストってありますよね。

f:id:hanaaaaaachiru:20181228222238g:plain

あれはDoTweenの機能の一つであるDoTextとTextMeshProを用いることで簡単に実装することができます。
追記）DoTextはDoTweenのPro版でのみ利用可能です。

今回はそれを紹介していきたいと思います！

実装してみよう

まずテキストを表示するゲームオブジェクトが必要になります。
今回はTextMeshProUGUIを使っていきましょう。

下の画像のように作成します。

f:id:hanaaaaaachiru:20190305112126p:plain

そうしたらスクリプトを書いていきましょう。

using UnityEngine;
using DG.Tweening;
using TMPro;

public class DoTweenTest : MonoBehaviour {

    [SerializeField] private TextMeshProUGUI tmp;

　  void Start () {
          tmp.text = "";
          tmp.DOText("これがDoTweenのDoTextです。", 3);
　  }
	
}

最初に作成したTextMeshProUGUIを参照させた後に再生してみると、

f:id:hanaaaaaachiru:20181228222645g:plain

このようになったはずです。

表示のされ方を変えよう

上で表示では文字が進むにつれて表示が遅くなってしまっています。
これは事前に設定されたEaseTypeが原因で、それをLinearにすれば全て同じ速度に変更できます。

さっきのコードを少しだけ変えてみましょう。

using UnityEngine;
using DG.Tweening;
using TMPro;

public class DoTweenTest : MonoBehaviour {

    [SerializeField] private TextMeshProUGUI tmp;

　  void Start () {
          tmp.text = "";
          tmp.DOText("これがDoTweenのDoTextです。", 3)
              .SetEase(Ease.Linear);
　  }
	
}

そして再生すると・・・

f:id:hanaaaaaachiru:20181228222238g:plain

無事表示されました！