目标:通过UE5的UI,创建一个球形进度条

1.创建基础的球形进度条:WBP_GlobeProgressBar

2.创建尺寸框:

改成期望尺寸

点亮宽度、高度覆盖

转到图标界面

创建变量:

将SizeBox_Root设置成变量

设置宽度和高度

折叠成一个函数:UpdateBoxSize()

3.创建覆盖层

4.添加背景图片

设置背景图片水平填充、垂直填充

背景图片设置成变量

添加背景图片笔刷

管理变量类别:

设置背景图片笔刷:

设置Background_Brush的默认值:

效果如下:

折叠到函数:UpdateBackgroundBrush

5.添加进度条:

设置填充图像:

样式->填充图->图像->MI_HealthGlobe

样式->着色->绘制为->图像

填充颜色和不透明度:

样式->背景图->着色->不透明度(A)->0

条填充类型:BottomToTop

设置成变量:ProgressBar_Globe

在图标中设置背景图片不透明度:

在图标中设置填充图片:

(1)创建变量:ProgressBarFillImage

(2)赋值给函数:

(3)在ProgressBarFillImage变量里设置填充图像:

         

(4)折叠到函数:UpdateGlobeImage

设置内边距:

在图表中设置内边距:

折叠到函数:UpdateGlobePadding

6.添加玻璃闪光样式

(1)添加Image

(2)水平对齐、垂直对齐

(3)设置为变量

(4)在图表里创建笔刷变量:GlassBrush

(5)设置笔刷:

(6)设置GlassBrush的默认值:

效果:

(7)设置玻璃笔刷的内边距,折叠到函数:UpdateGlassPadding

(8)感觉玻璃效果太大,调低一下不透明度:

Logo

中国智能体开发者社区,聚焦智能体与大模型开发,提供前沿资讯、实用工具链、开源项目及行业案例。通过技术沙龙、开发者大赛等活动,促进经验交流与协作,助力开发者快速构建创新智能应用。

更多推荐