Unity 利用UGUI制作圆形进度条

圆形进度条"/>

Unity 利用UGUI制作圆形进度条

在Unity中使用Image和Text组件就可以制作简单的进度条。

1、首先准备好一张环状的PNG图，如下图。

2、把该图导入Unity中并转换成精灵。

3、在场景中创建Image和Text组件，并把上图中的精灵拖到Image的Source Image中，其中Image组件中的Image Type设置为Filled，fill Method 为Radial 360,fill Origin设置为Left。整体搭好场景和组件设置如下图：

4、新建个脚本“progressCon.cs”。代码如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;public class progressCon : MonoBehaviour
{public Image image;public TextMeshProUGUI text;private float curCount=0;  //当前加载量,从0开始加载private float allCount=100f;   //总加载量,这里设置为100private float smoothSpeed = 0.5f;  //加载的速度// Start is called before the first frame updatevoid Start(){}// Update is called once per framevoid Update(){if(curCount < allCount){curCount += smoothSpeed;if(curCount > allCount){curCount = 100f;}image.fillAmount = curCount / 100f;text.text = (int)curCount / allCount * 100 + "%";}}
}

5、把脚本拉到场景中，并拉好组件到脚本中，如下图：

自此，一个简单的进度条就完成了。

这里我把SmoothSpeed参数设置为0.1，以便观察效果。

效果：

Unity 利用UGUI制作圆形进度条