TextMeshProで文字をウネウネ上下アニメーションさせる

Unity

2021.01.13 2019.10.31

「ココのコイン落とし」v1.5ではUIの文字の多くをTextMeshProに移行しました。
このアセットはフォントをテクスチャアトラスとして取り込み、さらにUnity内で簡単に文字装飾を実現する事ができます。
「ココのコイン落とし」もテキスト画像を使わずともよりリッチな画面にする事ができ、ゲームプレイ時の満足度も上がったのではないかと思います。また編集作業も手間が削減されるのも大きなメリットだと思いました。

また、このTextMeshProを用いたテキストは多くのパラメータを持っている為、スクリプトから簡単に見た目をアニメーションさせる事ができます。
例として、「ココのコイン落とし」v1.5で追加された大当たり中に表示される文字は波打つ様に一文字単位で上下しています。

ココのコイン落としAndroid版v1.5を申請しました。
UIのデザイン変更と壁スキルにクールタイムを追加してします。 pic.twitter.com/8Sewuc9ny7
— りゅーあん (@ryuan_p) October 29, 2019

以下はこの動きを実装するためのスクリプトです。
(参考：
https://gurutaka-log.com/unity-textmeshpro-animation )

using UnityEngine;
using TMPro;

public class TextVerticalMove : MonoBehaviour
{
    [SerializeField]
    private float distanceMove = 1;

    [SerializeField]
    private float animationSpeed = 1;

    private TextMeshProUGUI textMeshPro;

    private void Awake()
    {
        textMeshPro = gameObject.GetComponent<TextMeshProUGUI>();
    }

    void Update()
    {
        // メッシュ更新
        textMeshPro.ForceMeshUpdate();

        //テキストメッシュプロの情報
        var textInfo = textMeshPro.textInfo;

        //テキスト数がゼロであれば表示しない
        if (textInfo.characterCount == 0)
        {
            return;
        }


        //1文字毎にloop
        for (int index = 0; index &lt; textInfo.characterCount; index++)
        {
            //1文字単位の情報
            var charaInfo = textInfo.characterInfo[index];

            //ジオメトリない文字はスキップ
            if (!charaInfo.isVisible)
            {
                continue;
            }

            //Material参照しているindex取得
            int materialIndex = charaInfo.materialReferenceIndex;

            //頂点参照しているindex取得
            int vertexIndex = charaInfo.vertexIndex;

            //テキスト全体の頂点を格納(変数のdestは、destinationの略)
            Vector3[] destVertices = textInfo.meshInfo[materialIndex].vertices;

            //移動する分
            float sinValue = Mathf.Sin(Time.time * animationSpeed + 10 * index);

            // メッシュ情報にアニメーション後の頂点情報を入れる
            destVertices[vertexIndex + 0] += distanceMove * (Vector3.down * sinValue);
            destVertices[vertexIndex + 1] += distanceMove * (Vector3.down * sinValue);
            destVertices[vertexIndex + 2] += distanceMove * (Vector3.down * sinValue);
            destVertices[vertexIndex + 3] += distanceMove * (Vector3.down * sinValue);
        }

        //ジオメトリ更新
        for (int i = 0; i &lt; textInfo.meshInfo.Length; i++)
        {
            //メッシュ情報を、実際のメッシュ頂点へ反映
            textInfo.meshInfo[i].mesh.vertices = textInfo.meshInfo[i].vertices;
            textMeshPro.UpdateGeometry(textInfo.meshInfo[i].mesh, i);
        }
    }
}

あとはこのスクリプトをTextMeshProのオブジェクトにアタッチすれば出来上がりです。

他にもTextMeshProではスクリプトから色々なアニメーションが可能です。上の動画ではリーチや役が当たった時の文字がキランと光って見えますが、これはTextMeshProオブジェクトのMaterialのAngleというパラメータをスクリプトで0～2πの間で動かしているだけで実現しています。