【Unity】DOTweenを使ってTextMeshの文字を動かす - 原カバンは鞄のお店ではありません。

台風

毎年のように発生する数十年に一度の巨大台風が今年もやって来て、窓ガラスに養生テープを張り、食料品の買いだめやらアレコレと準備をしたけど何事もなかった皆さんこんにちは。災害は心配し過ぎるぐらいが丁度いいですね。

TextMeshとDOTween

元々DOTween(Pro版のみ)にはTextMeshに対するTweenのメソッドが用意されていましたが、それらはText全体に対するアニメ動作を実装するもので、Textを1文字ずつ個別にアニメーションさせることはできませんでした。

しかし、最近のアップデートで文字個別に対するTweenのメソッドが実装されました。(Pro版のみ)

これは従来のTextMeshに対するTweenメソッドが拡張された(追加)というよりは、TextMeshをラップしたクラスを生成し、それに対してTweenを行う方式で実装されています。

このTextMeshをラップするクラスがDOTweenTMPAnimatorクラスです。

DOTweenTMPAnimator

前述のようにTextMeshの文字を個別にTweenさせるには、対象となるTextMeshをラップしたDOTweenTMPAnimatorクラスに対してメソッドを発行して行います。

TextMeshProUGUI MyTextMesh;

public void OnClick_Color()
{
    MyTextMesh.text = "Stab of Bee Project";

    // DOTweenTMPAnimatorの生成
    DOTweenTMPAnimator textAnim = new DOTweenTMPAnimator(MyTextMesh);
    textAnim.DOColorChar(0, Color.red, 2f);
    textAnim.DOColorChar(8, Color.red, 2f).SetDelay(0.3f);
    textAnim.DOColorChar(12, Color.red, 2f).SetDelay(0.6f);
}

上のソースの場合、MyTextMeshの0,8,12桁目の文字を赤色に変化させています。
また、順に変化させるためにSetDelayで8,12桁目には遅延が発生するように設定しています。

f:id:Karvan:20200908213720g:plain

個別に桁数をせずにforループを使用したい場合はtextInfo.characterCountを使うと文字数が取得できます。
よって、前から順に赤色に変化させたい場合はこんな感じのソースになります。

DOTweenTMPAnimator textAnim = new DOTweenTMPAnimator(MyTextMesh);
for (int iCnt = 0; iCnt < textAnim.textInfo.characterCount; iCnt++)
{
    textAnim.DOColorChar(iCnt, Color.red, 2.0f).SetDelay(0.1f * iCnt);
}

f:id:Karvan:20200908213837g:plain

その他のメソッド

色を変えるだけでなく他にも色々なメソッドが用意されています。

DOTweenの公式のDocumentの「TextMeshPro per-character animation」の項目を見ると

DOFadeChar
DOColorChar
DOOffsetChar
DORotateChar
DOScaleChar
DOPunchCharOffset
DOPunchCharRotation
DOPunchCharScale
DOShakeCharOffsetadeOut
DOShakeCharRotation
DOShakeCharScale
SkewSpanX
SkewSpanYwRight
ResetVerticesShift
SetCharColor
SetCharOffset
SetCharRotation
SetCharScale
ShiftCharVerticeshtShift
SkewCharX
SkewCharY

これだけのメソッドがあります。代表的なものを紹介すると

■DOOffsetChar

文字のOffset値を変えることで文字を平行移動させることができます。
例えば文字を順に上へ移動させる場合は

DOTweenTMPAnimator textAnim = new DOTweenTMPAnimator(MyTextMesh);
for (int iCnt = 0; iCnt < textAnim.textInfo.characterCount; iCnt++)
{
    textAnim.DOOffsetChar(iCnt, Vector3.up * 30.0f, 1.0f).SetDelay(0.1f * iCnt);
}

f:id:Karvan:20200908214716g:plain

他にも、Rotate(回転)、Scale(拡大縮小)など通常GameObjectに対するTweenと同じ様なメソッドもあります。

■DOPunchCharOffset

ゲーム内のUIとして使用するならPuch系のメソッドの方が使い勝手が良いかと思います。

Puch系とは同じアニメ動作を減衰しながら繰り返してくれる動作で、最後には開始位置に戻ってきて来れます。

先程のDOOffsetCharをDOPunchCharOffsetに変えた場合

DOTweenTMPAnimator textAnim = new DOTweenTMPAnimator(MyTextMesh);
for (int iCnt = 0; iCnt < textAnim.textInfo.characterCount; iCnt++)
{
    textAnim.DOPunchCharOffset(iCnt, Vector3.up * 30.0f, 1.0f, 1).SetDelay(0.1f * iCnt);
}

f:id:Karvan:20200908215057g:plain

第四引数は振動回数を指定します(未設定の場合は10)。

■DOPunchCharRotation

回転させる場合はDOPunchCharRotationを使います。

DOTweenTMPAnimator textAnim = new DOTweenTMPAnimator(MyTextMesh);
for (int iCnt = 0; iCnt < textAnim.textInfo.characterCount; iCnt++)
{
    textAnim.DOPunchCharRotation(iCnt, Vector3.up * 90.0f, 2.0f, 2).SetDelay(0.1f * iCnt);
}

f:id:Karvan:20200908215607g:plain

■DOFadeChar

文字をフェードイン、アウトさせたい場合はDOFadeCharで不透明度を変更することで実装します。

DOTweenTMPAnimator textAnim = new DOTweenTMPAnimator(MyTextMesh);
for (int iCnt = 0; iCnt < textAnim.textInfo.characterCount; iCnt++)
{
    textAnim.DOFadeChar(iCnt, 1.0f, 2.0f).SetDelay(0.1f * iCnt);
}

第二引数に最終的なアルファ値を指定します。上のソースでは文字が前から順にフェードインします。

f:id:Karvan:20200908215757g:plain