スコアのカウントアップ演出で気持ちいいアニメーション検討

はじめに

どうも、土鍋です。

現在制作中の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;
    }
}

普通のゲームだとめちゃくちゃうるさい演出ですね…

ただ今回のゲームはこのスコアがユーザーの最終的なスコアになるので、強調したいというのと、これぐらいうるさいUIでもVRゲームなので視野角が広いためそこまで気にならないというのはありますね。