在 Unity 中创建径向/圆形进度条

在本教程中，我将展示如何在 Unity 中制作圆形/径向进度条（也可以用作 HP 条等）。

那么让我们开始吧！

脚步

我们需要一个带有透明背景的圆形image。

• 将图像导入到您的项目中并将其纹理类型更改为 "Sprite (2D and UI)"

• 创建一个新的画布（游戏对象 -> UI -> 画布）
• 右键单击 Canvas 对象 -> UI -> Image
• 将圆形精灵分配给源图像并将其颜色更改为红色
• 将图像类型更改为 "Filled"，将填充方法更改为 "Radial 360"（这将显示另一个名为“填充量”的变量，该变量控制沿圆圈可见的图像量）

• 复制图像，将其颜色更改为白色，并将图像类型更改为 "Simple"
• 将复制的图像移动到第一个图像内
• 将第一个图像尺寸（具有填充图像类型的图像）更改为更大的尺寸（例如宽度：135 高度：135）

• 创建新文本（右键单击画布 -> UI -> 文本）
• 将其对齐方式更改为中间中心

• 将文本高度更改为 60 以适合加载文本

最后，我们将创建一个脚本，将进度值应用于图像

• 创建 一个新脚本，将其命名为 "SC_CircularLoading" 并将以下代码粘贴到其中：

SC_CircularLoading.cs

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

public class SC_CircularLoading : MonoBehaviour
{
    public Image loadingImage;
    public Text loadingText;
    [Range(0, 1)]
    public float loadingProgress = 0;

    // Update is called once per frame
    void Update()
    {
        loadingImage.fillAmount = loadingProgress;
        if(loadingProgress < 1)
        {
            loadingText.text = Mathf.RoundToInt(loadingProgress * 100) + "%\nLoading...";
        }
        else
        {
            loadingText.text = "Done.";
        }
    }
}

• 将 SC_CircularLoading 脚本附加到任何对象并分配其变量（加载图像应该是径向填充类型的图像，加载文本应该是显示进度值的文本）

• 按 Play 并移动“加载进度”滑块。观察加载图像逐渐填充：