Unity 实现数字垂直滚动效果

前言

遇到一个需要数字垂直滚动模拟老虎机的效果，记录一下。

项目

场景布置

3个Image换上带有RollNumberShader的材质
在RollNumberScript脚本中引用即可

Shader代码编写

材质球设置

代码编写

RollNumberScript.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class RollNumberScript : MonoBehaviour
{
    //个位数
    public GameObject singleDigitNumber;
    //十位数
    public GameObject tenDigitNumber;
    //百位数
    public GameObject hundredDigitNumber;


    private Material singleDigitMaterial;
    private Material tenDigitMaterial;
    private Material hundredDigitMaterial;

    void Start()
    {
        singleDigitMaterial = singleDigitNumber.GetComponent<Image>().material;
        tenDigitMaterial = tenDigitNumber.GetComponent<Image>().material;
        hundredDigitMaterial = hundredDigitNumber.GetComponent<Image>().material;
    }

    void Update()
    {
        if (Input.GetKey(KeyCode.Q))
        {

            int num = Random.Range(100, 1000);
            SetNumber(num);
        }
    }

    private void SetNumber(int number)
    {
        int hundredDigit = number / 100;
        int tenDigit = (number - hundredDigit * 100) / 10;
        int singleDigit = number - hundredDigit * 100 - tenDigit * 10;


        //这里加一个动画效果，让数字滚动
        //动画时间
        float duration = 0.3f;
        //动画曲线
        Ease tweenEase = Ease.OutQuart;

        //百位数
        hundredDigitMaterial.DOFloat(hundredDigit, "_NumberValue", duration).SetEase(tweenEase);
        //十位数
        tenDigitMaterial.DOFloat(tenDigit, "_NumberValue", duration).SetEase(tweenEase);
        //个位数
        singleDigitMaterial.DOFloat(singleDigit, "_NumberValue", duration).SetEase(tweenEase);
    }
}

数字图片

横着竖着都可以，9宫格也可以