この記事でのバージョン
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) ); }
参考