Unity 实现数字垂直滚动效果
- 前言
- 项目
- 场景布置
- Shader代码编写
- 材质球设置
- 代码编写
- 数字图片
前言
遇到一个需要数字垂直滚动模拟老虎机的效果,记录一下。
项目
场景布置
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宫格也可以