在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

相关推荐
茯苓gao8 小时前
嵌入式开发笔记:CANopen相关移位运算与通信协议术语详解
网络·嵌入式硬件·学习·信息与通信
HERR_QQ11 小时前
强化学习的数学原理 学习笔记
人工智能·笔记·学习·自动驾驶
MartinYeung512 小时前
[论文学习]DP-Fusion:面向大语言模型的令牌级差分隐私推理-深度解析
人工智能·学习·语言模型
zwenqiyu13 小时前
非线性字符串数据结构串讲
数据结构·c++·学习·算法
MartinYeung514 小时前
[论文学习]SecureGate:通过令牌级门控学习何时安全地揭示PII-深度解析
学习·安全
大鱼>15 小时前
超参数调优进阶:Optuna/Bayesian/Early Stopping
人工智能·学习·机器学习·聚类
liuyicenysabel15 小时前
多服务上线日记二:
服务器·笔记·学习
小弥儿16 小时前
GitHub今日热榜 | 2026-07-05:阿里巴巴浏览器Agent上榜
学习·开源·github
‿hhh16 小时前
Dify核心模块详解:从文本生成到智能体
人工智能·学习·microsoft·agent·上下文·记忆
辰海Coding16 小时前
MiniSpring框架学习笔记-动态代理:如何在运行时插入逻辑?
java·笔记·学习·spring·动态代理