【TextMeshPro】ガタガタ震えるテキストを実装する【DOTween】

DOTweenはv1.2.420で、TextMeshProを1文字ごとにアニメーションさせられるようになりました。

DOTweenでTextMeshProを文字ごとにアニメーションさせる

TextMeshPro拡張メソッドがアップデート以前まではTextMeshProをDOTweenでアニメーションさせるとなると、全ての文字をまとめてアニメーションさせることしかできませんでした。（もしくはDOText()を...

game-ui.net

2020.07.29

これを使って、ガタガタと震えるようなテキストのモーションを作成してみました。

ガタガタ震えるアニメーション

作成したものがこちら。

アドベンチャーゲームなどの怖いシーンや怯えたシーンとかで使えそうです。

ソースコードのパラメータを少し変更すると、こんなアニメーションにもなります。

巨大な怪物の足音で揺れているような表現。

振動をゆっくりにするとこんな不思議な表現にもなります。

ソースコード

アニメーション①はこちら。

TextMeshProUGUI tmpro = GetComponent<TextMeshProUGUI>();

DOTweenTMPAnimator tmproAnimator = new DOTweenTMPAnimator(tmpro);

for (int i = 0; i < tmproAnimator.textInfo.characterCount; ++i)
{
    tmproAnimator.DOShakeCharOffset(i, 1f, 5f, 25, fadeOut: false).SetLoops(-1);
}

アニメーション②はこちら。

TextMeshProUGUI tmpro = GetComponent<TextMeshProUGUI>();

DOTweenTMPAnimator tmproAnimator = new DOTweenTMPAnimator(tmpro);

for (int i = 0; i < tmproAnimator.textInfo.characterCount; ++i)
{
    tmproAnimator.DOShakeCharOffset(i, 2f, 15f).SetLoops(-1);
}

アニメーション③はこちら。

TextMeshProUGUI tmpro = GetComponent<TextMeshProUGUI>();

DOTweenTMPAnimator tmproAnimator = new DOTweenTMPAnimator(tmpro);

for (int i = 0; i < tmproAnimator.textInfo.characterCount; ++i)
{
    tmproAnimator.DOShakeCharOffset(i, 3f, 50f, 3, fadeOut: false).SetLoops(-1);
}