在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

相关推荐
wdfk_prog1 小时前
[Linux]学习笔记系列 -- [drivers][i2c]i2c-dev
linux·笔记·学习
越努力越幸运5082 小时前
CSS3学习之网格布局grid
前端·学习·css3
chillxiaohan3 小时前
GO学习记录——多文件调用
开发语言·学习·golang
尤老师FPGA3 小时前
使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第四十七讲)
ui
Funny_AI_LAB4 小时前
AI Agent最新重磅综述:迈向高效智能体,记忆、工具学习和规划综述
人工智能·学习·算法·语言模型·agi
UI设计兰亭妙微5 小时前
UI 设计组件的价值与实践+常用 UI 设计组件核心规范清单
人工智能·ui
代码游侠6 小时前
学习笔记——Linux内核与嵌入式开发1
linux·运维·前端·arm开发·单片机·嵌入式硬件·学习
zhangzhangkeji6 小时前
UE5 多线程(6):FQueuedThreadPool 的使用,peek 函数,
ue5
宇钶宇夕6 小时前
CoDeSys入门实战一起学习(二十八):(LD)三台电机顺起逆停程序详解—上升、下降沿使用上
单片机·嵌入式硬件·学习
科技林总6 小时前
【系统分析师】6.5 电子商务
学习