在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

相关推荐
清泓y30 分钟前
UE5程序化生成技术
ue5
艾莉丝努力练剑1 小时前
【Linux:动静态库】Linux 动静态库与可执行文件
linux·运维·服务器·学习·面试·文件系统·动静态库
宁风NF2 小时前
JavaScript:内存、垃圾回收、性能优化
开发语言·前端·javascript·学习·性能优化·es6
编程圈子2 小时前
电机驱动开发学习22. 霍尔电角度标定(自动/手动标定与Flash固化)
驱动开发·学习
打妖妖灵滴哪吒2 小时前
IOS模态窗口的作用与设计原则
前端·ui
m4Rk_2 小时前
【论文阅读】Agent 记忆机制(26):Infini Memory——将长期记忆维护成可读写的主题文档
论文阅读·人工智能·学习·开源·github
打妖妖灵滴哪吒3 小时前
前端开发/UI设计师-APP中如何进行可发现性设计
前端·ui
正经人_x3 小时前
学习日记46:LISA: Reasoning Segmentation via Large Language Model
人工智能·学习·语言模型
神龙天舞20014 小时前
CMake构建学习笔记-通用的CMake构建脚本
笔记·学习
一只小菜鸡..5 小时前
南京大学 操作系统 (JYY) 学习笔记:并发 Bug 的地狱——数据竞争、死锁与原子性违反
笔记·学习·bug