在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

相关推荐
tiankongdeyige5 小时前
游戏战斗系统学习第2篇:有限状态机 (FSM)
学习·游戏·typescript
an12321218 小时前
ARM嵌入式学习笔记:SPI通信协议详解
arm开发·笔记·学习
by209999 小时前
从结构体到对象:正式学习C++类的骨架、封装与this指针
c++·经验分享·学习
乌暮9 小时前
深入理解 Java 泛型:把「万能盒子」用对、用稳
java·开发语言·后端·学习
小雪崩10 小时前
嵌入式学习 day60:ARM汇编——触摸屏与SPI
汇编·arm开发·学习
问天_观心11 小时前
大模型训练与推理优化(二)
人工智能·深度学习·学习·大模型·transformer
海海不掉头发12 小时前
软件项目管理学习笔记-从软件危机到敏捷与DevOps
笔记·学习·devops
bloglin9999913 小时前
豆包接口返回UI元素原因
ui
传奇开心果编程13 小时前
【SwiftUI入门练中学】第7课 动画与手势:让界面更灵动
学习·macos·ui·ios·swiftui·swift
幼儿园蛋小黄13 小时前
SPI 多点触摸屏学习嵌入式总结
学习