Unity - 如何使用精灵渲染器制作圆形进度条？答案

【问题标题】：Unity - How to make circle progress bar using sprite renderer?Unity - 如何使用精灵渲染器制作圆形进度条？
【发布时间】：2021-05-06 03:31:26
【问题描述】：

到目前为止，我所看到的，人们使用带有填充量的 UI，这对我 atm 来说不是一个选项。有人知道如何使用精灵渲染器制作圆形进度条吗？

【问题讨论】：

为什么它不再是一个选项？如果还是HP条什么的，可以在世界空间使用UI吗？你能详细说明一下吗？

标签： c# unity3d progress-bar sprite

【解决方案1】：

我找到了一个不太优雅的解决方案，但可以完成工作。

如果您将精灵切成两半（或仅使用精灵蒙版），您可以使用可旋转的精灵蒙版来覆盖除您想要显示的任何百分比之外的所有内容。

using rotating a mask to cover parts of a circle.

然后你所要做的就是创建一个显示另一半的后半精灵。

Two examples of a finished circular progress bar, one split in half and highlighted to show how it works.

这是我在上面的 gif 中使用的代码：

public class CircularFillBar : MonoBehaviour
{
     public float FillValue;


     private Transform TopHideBar;
     private Transform BottomHideBar;

     void Start()
     {
         TopHideBar    = transform.Find("CircularFillBar (Top)").Find("Rotation Container (moving)");
         BottomHideBar = transform.Find("CircularFillBar (Bottom)").Find("Rotation Container (moving)");
     }

     private void FixedUpdate()
     {
    
         TopHideBar.rotation    = Quaternion.Euler(0, 0, (FillValue * 360 > 180 ? 180 : FillValue * 360));
         BottomHideBar.rotation = Quaternion.Euler(0, 0, (FillValue * 360 < 180 ? 180 : FillValue * 360));




    
         FillValue += 0.002f;

         if (FillValue > 1)
             FillValue = 0;
     }
 }

【讨论】：

我想说这个解决方案非常适合我。由于我是一名教师，因此每当使用来自 unity learn 的创作者工具包 RPG 时，我都必须使用此解决方案。由于他们设置相机和 UI 的方式，您不能使用世界空间画布。此外，如果您使用此解决方案并在中心再添加一个圆形蒙版，您可以有一个空心圆。

【解决方案2】：

改为使用 Sprite 表和动画。您可以在Google Search 中找到其中的一堆

【讨论】：

当前进度条是 UI，我使用的是 fillAmount = math.lerp，因此它很流畅，但是如果我使用精灵表，它不是变成了旧的时钟吗？像tik toc。我的意思是，我需要太多的精灵来让它看起来很平滑，否则它看起来就像是圆圈的某个部分每秒都会立即擦除。