はじめに

どうも、土鍋です。

現在制作中のVRゲームでスコアUIが画面上にあるのですが、なんとなくスコアが増加していく気持ちよさが少ないな～～と感じたので、カウントアップに合わせてアニメーションさせるようにしました。

さっそく作ったもの

数値変化が大きかったら徐々に大きくして、傾けさせました。

10の位に変化があると、一気に巨大化させて気持ちよさアップ。

コード

アニメーションはDOTweenを使用して行っております。
コードから自由度が高いアニメーションが作れるので非常に重宝しますよね。

using DG.Tweening;
using UnityEngine;
using UnityEngine.UI;

public class CountUpTest : MonoBehaviour
{
    [SerializeField]
    private Transform gb;
    [SerializeField] 
    private Text text;

    private int previousScore = 0f;
    private int nowScore;
    private float limitScale = 5f;

    private void Update()
    {
        nowScore = (int)gb.position.z;
        text.text = nowScore.ToString();
        
        AnimationCountUp();
        previousScore = nowScore;
    }

    private void AnimationCountUp()
    {
        var diff = nowScore - previousScore;
        
        if (diff>=1)
        {
            // 数値変化が大きかったらスケールを大きくする
            var endVal = text.transform.localScale.x * (1 + diff * 0.1f);
            if(endVal > limitScale) endVal = limitScale;
            text.transform.DOScale(endVal, 1f);
            text.transform.DORotate(Vector3.forward * 20f, 1f);
        }
        else
        {
            // 数値変化が小さかったらスケールをもとに戻そうとする
            text.transform.DOScale(1f, 1f);
            text.transform.DORotate(Vector3.zero, 1f);
        }

        // 10の位に変化があったら、サイズいっきに大きくする
        if (HasTensDigitChanged(previousScore,nowScore))
        {
            text.transform.DOScale(5f, 0.1f).SetEase(Ease.OutExpo);
        }
    }
    
    private int GetTensDigit(int number)
    {
        return (number / 10) % 10; // 10の位の数を取得
    }

    // 10の位に変更があったかどうか
    private bool HasTensDigitChanged(int oldNumber, int newNumber)
    {
        int oldTensDigit = GetTensDigit(oldNumber);
        int newTensDigit = GetTensDigit(newNumber);

        return oldTensDigit != newTensDigit;
    }
}