在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

相关推荐
AI即插即用35 分钟前
即插即用系列 | MICCAI EM-Net:融合 Mamba 与频域学习的高效 3D 医学图像分割网络
网络·人工智能·深度学习·神经网络·学习·计算机视觉·视觉检测
Chunyyyen40 分钟前
【第二十六周】OCR学习01
学习·计算机视觉·ocr
charlie11451419143 分钟前
现代C++工程实践:简单的IniParser4——实现ini_parser
开发语言·c++·笔记·学习·工程
好奇龙猫1 小时前
【AI学习-comfyUI学习-第十五节-FLUX修复工作流-各个部分学习】
学习
天`南1 小时前
【群智能算法改进】一种改进的金豺优化算法IGJO[1](动态折射反向学习、黄金正弦策略、自适应能量因子)【Matlab代码#94】
学习·算法·matlab
长桥夜波2 小时前
【第二十三周】统计学习复习笔记
笔记·学习
pandarking2 小时前
[CTF]攻防世界:easy_laravel 学习
java·学习·web安全·laravel·ctf
AA陈超2 小时前
LyraStarterGame 5.6 项目学习路径
c++·笔记·学习·lyra
二狗哈2 小时前
Cesium快速入门21:Primitive材质类型与设置
3d·webgl·材质·cesium·地图可视化
其美杰布-富贵-李2 小时前
Fluent 网格质量全面评估(完整学习笔记)
笔记·学习·cfd·fluent·网格质量