在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

相关推荐
玄同7651 小时前
Python Random 模块深度解析:从基础 API 到 AI / 大模型工程化实践
人工智能·笔记·python·学习·算法·语言模型·llm
符哥20081 小时前
C++ 适合初学者的学习笔记整理
c++·笔记·学习
曦月逸霜1 小时前
Python快速入门——学习笔记(持续更新中~)
笔记·python·学习
AI视觉网奇1 小时前
blender 导入fbx 黑色骨骼
学习·算法·ue5·blender
星火开发设计1 小时前
this 指针:指向对象自身的隐含指针
开发语言·数据结构·c++·学习·指针·知识
Gain_chance1 小时前
37-学习笔记尚硅谷数仓搭建-ADS层分析并以各品牌商品下单统计为例
笔记·学习
草莓熊Lotso1 小时前
Qt 主窗口核心组件实战:菜单栏、工具栏、状态栏、浮动窗口全攻略
运维·开发语言·人工智能·python·qt·ui
魔力军1 小时前
Rust学习Day2: 变量与可变性、数据类型和函数和控制流
开发语言·学习·rust
黄大帅@lz1 小时前
openai提示词学习
windows·学习
pop_xiaoli1 小时前
effective-Objective-C 第二章阅读笔记
笔记·学习·ios·objective-c·cocoa