【Unity】数値の表示をリッチにしてみよう (DOTween)

はじめに

今日はUnityのデザインについてやっていきます。

Unityでスコア等の値を更新すると↓のような感じになるのが一般的だと思います。

これだとちょっと味気ないですよね？

このような値の過程を表示してあげることでより増えてるって感じがでます。

今回はこの値の過程を表示してアニメーションさせるのをやりたいと思います。

前提

アニメーションはDOTWeenという無料アセットを使います。

実装

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

// DOTweenで必要
using DG.Tweening;
// TextMeshProで必要
using TMPro;

public class Sample : MonoBehaviour
{
    // UnityEngine.UI.Textにしてもいい
    public TextMeshProUGUI _countText;
    public float _addValue = 100.0f;    // 終了値
    public float _duration = 0.5f;      // 終了値になるまので時間(秒)

    private float _value = 0;

    private void Update()
    {
        if (Input.GetKeyDown(KeyCode.Alpha1))
        {
            CountUp();
        }
    }

    private void CountUp()
    {
        float start = _value;
        float end = _value + _addValue;

        DOVirtual.Float(start, end, _duration, value =>
        {
            _countText.text = $"{value:F0}";
            _value = value;
        });
    }
}

解説

DOVirtual.Float(from, to, duration, onVirtualUpdate)

from : 開始時の値
to : 終了時の値
duration : fromからtoにするまでの時間(秒)
onVirtualUpdate: 値更新毎に呼ばれる、ここで表示処理する

おわりに

やっぱアニメーションすると少し質が上がった気がします。

DOTWeenを使わなくてももちろん今回の再現はできるのですが、

時間に関わる事はDOTweenを使った方が直感的に実装できて楽です。

それでは、また。

読者登録・Twitterのフォローをしていただけると、ハッピーになります。