在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

相关推荐
chools5 小时前
Java后端拥抱AI开发之个人学习路线 - - Spring AI【第四期】(Tool + MCP)
java·人工智能·学习·spring
之歆5 小时前
Element Plus 深度解析 - 企业级 UI 组件库的设计与实践
ui·element plus
世人万千丶6 小时前
Flutter 框架跨平台鸿蒙开发 - 数独游戏应用开发文档
学习·flutter·游戏·华为·harmonyos·鸿蒙
xuhaoyu_cpp_java6 小时前
Maven学习(一)
java·经验分享·笔记·学习·maven
AI_零食6 小时前
开源鸿蒙跨平台Flutter开发:研究生科研贡献雷达矩阵架构
学习·flutter·ui·华为·矩阵·开源·harmonyos
迷路爸爸1806 小时前
Docker 入门学习笔记 03:端口映射到底是什么,为什么容器启动了却访问不到
笔记·学习·docker
xinzheng新政6 小时前
Javascript·深入学习基础知识
前端·javascript·学习
Dontla6 小时前
Playwright有头模式Headed Mode(正常显示UI界面)与无头模式Headless Mode(浏览器在后台运行)介绍
ui
xieliyu.6 小时前
大一自学 Java:SE 阶段学习总结
学习
Terry Chu6 小时前
WordPress 完全教程:从入门到进阶(2026 最新版)
学习·学习方法