Unity 实现数字垂直滚动效果

前言
项目
- 场景布置
- Shader代码编写
- 材质球设置
- 代码编写
- 数字图片

前言

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

项目

场景布置

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

Shader代码编写

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);}
}