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

スポンサーリンク
Unity
スポンサーリンク
↑管理人が個人でUnity+Live2Dで作成しているスマホゲームです

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

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

以下はこの動きを実装するためのスクリプトです。
(参考:
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πの間で動かしているだけで実現しています。

1 Star2 Stars3 Stars4 Stars5 Stars (1票 平均: 5.00)
読み込み中...

コメント

広告ブロッカーを無効にしてください。

タイトルとURLをコピーしました