有时我们需要在Unity3D中绘制进度条，如：

unity UGUI实现环形进度条 unity进度条效果_unity UGUI实现环形进度条

          或       

unity UGUI实现环形进度条 unity进度条效果_UI_02

 

      如果使用4.6版本以下的unity绘制环形的进度条可能需要费点劲。我搜到的大多数方法都是用NGUI插件，但有时只是为了简单的画一个环形UI，使用NGUI反而还增加了学习成本。有一个利用CutOut材质的方法能够利用alpha值，灵活的控制进度条中需要显示的部分，以环形进度条为例，方法如下：

1、在PS中制作一张如下所示的图，RGB为进度条想要的颜色，alpha值从5-250环形渐变（如果从0-255，在进度为0%或100%时会显示异常，这与CutOut材质的特性有关）

unity UGUI实现环形进度条 unity进度条效果_进度条_03

2、新建材质 选择Transparent Cutout

unity UGUI实现环形进度条 unity进度条效果_unity UGUI实现环形进度条_04

3、设置纹理

unity UGUI实现环形进度条 unity进度条效果_进度条_05

4、将导入的纹理拽入材质

unity UGUI实现环形进度条 unity进度条效果_unity UGUI实现环形进度条_06

5、新建Quad

unity UGUI实现环形进度条 unity进度条效果_半透明效果_07

6、选择第2步创建的材质

unity UGUI实现环形进度条 unity进度条效果_半透明效果_08

7、创建正交相机，并将深度置为最前

unity UGUI实现环形进度条 unity进度条效果_进度条_09

8、将它们拖到荒无人烟的地方（这是UI，7、8两步确保它是在场景的最前面，且不会出现在才3D场景中）

unity UGUI实现环形进度条 unity进度条效果_unity UGUI实现环形进度条_10

9、调整Alpha cutoff观看效果

unity UGUI实现环形进度条 unity进度条效果_进度条_11

10、若想做出反方向的效果，则需要在做图的时候勾选反向

unity UGUI实现环形进度条 unity进度条效果_半透明效果_12

11、我们的目标是：写脚本控制alpha cutoff的值

unity UGUI实现环形进度条 unity进度条效果_unity UGUI实现环形进度条_13

12、代码如下，最核心的一句已经框起来了

unity UGUI实现环形进度条 unity进度条效果_进度条_14

      到此为止，转圈的进度条/能量条的方法阐述完毕，核心思想是利用CutOut材质控制alpha值控制进度条的显示。在CutOut材质中，当alpha值高于设置的"alpha cutoff"时，完全不透明；低于设置的"alpha cutoff"时，完全透明。利用CutOut材质的这种特性，通过制作合适的渐变纹理，可以实现各种各样的进度条，美中不足的是抗锯齿能力不太好。