在日常开发中,经常会有环形进度条UI的效果,例如技能CD时间、加载动画等,本文将通过材质球节点实现该效果,相较于准备美术素材,这样的做法更为方便,效果如下:
1.制作环状效果材质函数
在内容面板右键新建材质函数,可以命名为Circle_MF
通过RadialGradientExponential节点,可以制作UV空间内的球形渐变,设置Density参数可以修改边缘硬度,我们先增加该节点:
接下来修改Density参数为100,看下效果:
然后绘制两个大小不同的球体,进行相减计算,可得到环形图案:
然后保存该材质函数,进行下一步操作。
2.制作UI材质球
右键新建材质球,可命名为Circle_M,修改Material Domain为User Interface(用户界面),Blend Mode为Translucent(半透明)
创建节点VectorToRadialValue可将向量绘制为放射状渐变图案,并拖入之前创建的材质函数Circle_MF进行相乘,可得如下图案:
继续加入Step等节点,让环形进度可以受到正常数值影响:
但还有一个问题,环形图案的起始位置是右侧,通常应该是上方,需要链接VectorToRadialValue的Vector or UVs参数以进行修改。
目前UI材质球这一步就差不多了。
3.链接进UI面板
最后新建一个Widget,创建Image并设置Circle_M材质球即可。
参考: