(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

(:3[kanのメモ帳]



DoTweenのDoTextでテキストの文字送り(1文字ずつ表示)【Unity】【DOTween】


このエントリーをはてなブックマークに追加


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


はじめに

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

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

DOTween Pro | Visual Scripting | Unity Asset Store


今回はそのDOTweenのDoTextでテキストの文字送りする方法の紹介です。

イメージとしては以下のような感じ。

f:id:kan_kikuchi:20200626070703g:plain



DoText

DoTextはuGUIのTextやTextMeshProUGUIに実装された拡張メソッド

表示したい文字列と表示時間を設定して使います。

(TextMeshProUGUIで使う場合には設定が必要)

[SerializeField]
private Text _text = default;
//2秒でテキスト表示
_text.DOText("流れるテキスト123456789", 2);
f:id:kan_kikuchi:20200625074700g:plain


ただしTextに既に文字が設定されてあると上書きするように表示されてしまう点には注意が必要です。

f:id:kan_kikuchi:20200625075846g:plain


なお、デフォルトの状態だと表示間隔が一定ではないので、

一定にしたい場合はSetEaseでEase.Linearを指定します。

//2秒でテキスト表示(表示間隔は一定)
_text.DOText("流れるテキスト123456789", 2).SetEase(Ease.Linear);
f:id:kan_kikuchi:20200625074827g:plain


ちなみにAnimationCurveを使う事でEaseの曲線は自由に指定出来たりもします。

[SerializeField]
private Text _text = default;
[SerializeField]
private AnimationCurve _doTextCurve = default;
//2秒でテキスト表示(表示間隔はAnimationCurveで指定)
_text.DOText("流れるテキスト123456789", 2).SetEase(_doTextCurve);
f:id:kan_kikuchi:20200625074907j:plain


また、richTextEnabledをfalseにする事でリッチテキストを無効にしてタグ等を使えなくも出来ますし、

//2秒でテキスト表示(リッチテキスト無効)
_text.DOText("流れるテキスト123456789", 2, richTextEnabled:false);


ScrambleModeでNone以外を指定する事で、

まだ文字が表示されていない場所にランダムで文字を表示する事も可能です。

//2秒でテキスト表示、文字が表示されていない場所にはランダムで文字を表示(表示間隔は一定)
_text.DOText("流れるテキスト123456789", 2, scrambleMode:ScrambleMode.All).SetEase(Ease.Linear);
f:id:kan_kikuchi:20200626065137g:plain


なお、ScrambleModeの種類は以下の通りで、

  • None : ランダム文字を表示しない
  • All : A-Z + a-z + 0-9の中からランダム表示
  • Uppercase : A-Zの中からランダム表示
  • Lowercase : a-zの中からランダム表示
  • Numerals : 0-9の中からランダム表示
  • Custom : 指定した文字からランダム表示


Customを使う場合はさらにscrambleCharsでランダム表示される文字を指定します。

//2秒でテキスト表示、文字が表示されていない場所には指定した文字をランダム表示(表示間隔は一定)
_text.DOText("流れるテキスト123456789", 2, scrambleMode:ScrambleMode.Custom, scrambleChars:"流れるテキスト123456789").SetEase(Ease.Linear);
f:id:kan_kikuchi:20200626065516g:plain



------------追記------------

DoTextの文字表示に合わせて音を鳴らすという記事も書きました!



------------追記おわり------------