在UE5中制作UI环形进度条

在日常开发中,经常会有环形进度条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材质球即可。


参考:

https://www.bilibili.com/video/BV1Xa4y1k7Vq

相关推荐
xiaoxiaoxiaolll几秒前
Nat Commun:中国团队演示光纤阵列中的里德堡阻塞,为高保真度两比特门奠定基础
学习·量子计算
zhangxuyu111813 分钟前
Vue2 学习记录--语法部分
学习
下午见。28 分钟前
深入理解C语言共用体/联合体(union):大小计算与大小端判断实战
c语言·笔记·学习
HalvmånEver44 分钟前
Linux的第二章 : 基础的指令(二)
linux·运维·服务器·开发语言·学习
im_AMBER7 小时前
React 17
前端·javascript·笔记·学习·react.js·前端框架
谷歌开发者8 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (六)
前端·chrome·学习
QT 小鲜肉9 小时前
【QT/C++】Qt定时器QTimer类的实现方法详解(超详细)
开发语言·数据库·c++·笔记·qt·学习
Mr.Jessy10 小时前
Web APIs 学习第五天:日期对象与DOM节点
开发语言·前端·javascript·学习·html
存在morning10 小时前
【人工智能学习笔记 三】 AI教学之前端跨栈一:React整体分层架构
笔记·学习·架构
巫婆理发22211 小时前
评估指标+数据不匹配+贝叶斯最优误差(分析方差和偏差)+迁移学习+多任务学习+端到端深度学习
深度学习·学习·迁移学习