【Unity UI】RadialProgressBar：自定义圆形环形进度条着色器

简介

在游戏开发中，向玩家展示信息的直观方式之一是通过进度条。RadialProgressBar是一个为Unity3D设计的自定义径向进度条着色器，它不仅外观吸引人，而且功能强大，可以用于显示角色生命值（HP）、加载状态、匹配评级进度、汽车速度等信息。创意的实现方式是无限的。

该着色器可以通过Amplify Shader Editor进行编辑。

开始使用

要运行此着色器，只需将其附加到材质上，然后将该材质放置在一个四边形上。就这样，您现在拥有了一个基本的生命值条！

最佳实践是查看提供的示例，了解如何调整不同的参数，并从中获得灵感。

此着色器有两种变体：“标准”（这里描述的）和“简化”版本。简化版本去掉了许多设置，是一个更简单的版本。

使用方法和参数

通用设置

这些设置影响整个进度条，它们非常直观。通过增加和减少Fill percentage，我们控制条的填充量。这是此着色器的主要设置。

Rotation 和 Arc range (0-360) 允许您控制起始角和终止角。

背景设置

“Background”将始终可见，无论填充百分比如何（当然，除非你将不透明度完全降低到0）。

在这里，我们可以为背景的“填充”区域以及边框设置颜色。此外，还可以设置边框的径向和切向宽度，以及其不透明度。

进度条设置

这是着色器的核心部分，分为Border和Fill两节。边框设置与背景的设置非常相似，不同之处在于可以指定Color（min）和Color（max），以便随着进度条的填充，条的颜色会在两者之间插值变化。

填充设置则包括三个部分：Main texture、Secondary texture和Noise texture。

如果您不想使用任何纹理，只需将插槽留空。

它们都提供了类似的参数来调整，如opacity和contrast、tiling和offset。您可以通过下拉按钮使这些纹理滚动或旋转（对于径向条来说非常方便）。旋转/滚动速度是可定制的。

再次强调，进度条颜色将在最小和最大颜色之间插值。如果您不希望这样，请给它们相同的值。

重要的是要注意，噪声纹理将与次纹理相乘，结果将相加到主纹理上。这为您提供了一些创造性的空间。

示例

以下是一些示例，展示了如何使用RadialProgressBar创建各种视觉效果的进度条。

参数列表

以下是“标准”版本的参数列表，点击以展开查看详细参数。

// 主要设置
_Radius
_Arcrange
_Fillpercentage
_Globalopacity
_Rotation

// 背景
_Backgroundfillcolor
_Backgroundopacity
_Backgroundbordercolor
_Backgroundborderopacity
_Backgroundborderradialwidth
_Backgroundbordertangentwidth

// 进度条 - 边框
_Bordermincolor
_Bordermaxcolor
_Mainbarborderopacity
_Mainborderradialwidth
_Mainbordertangentwidth

// 进度条 - 主纹理
_Maintex
_Barmincolor
_Barmaxcolor
_Maintexopacity
_Maintexcontrast
_Invertmaintex
_Mainscrollrotate
_Maintexscrollspeed
_Maintexrotationspeed
_Maintextiling
_Maintexoffset

// 进度条 - 次纹理
_Secondarytex
_Barsecondarymincolor
_Barsecondarymaxcolor
_Secondarytexopacity
_Secondarytexcontrast
_Invertsecondarytex
_Secondaryscrollrotate
_Secondarytexscrollspeed
_Secondarytexrotationspeed
_Secondarytextiling
_Secondarytexoffset

// 进度条 - 噪声纹理
_Noisetex
_Noiseintensity
_Noisetexcontrast
_Invertnoisetex
_Noisetexspeed
_Noisetextiling
_Noisetexoffset

项目地址

Github地址：RadialProgressBar