CSS背景图叠加渐变：多层背景、混合模式与伪元素实践
2026/10/27 2:36:20
本系列使用UE5.5.4第三人称模板进行制作，本文讲述加速跑的体力恢复功能，涉及到Gate节点、宏 等知识点，这是该教程的第三部分。
在之前几个部分完成了Stamina耐力条的制作，在这一部分将完成耐力条的UI显示。通过这一部分的学习可以了解到UI传Player Controller参数、UE事件分发等知识。
1.新建Widgets文件夹，该文件中将放置UI蓝图
2.点开Widgets文件夹，新建UI蓝图，右键选择User Interface - Widget blueprint，在弹窗中选择User Widget
3.为该蓝图命名WB_Statbar，这个UI蓝图是耐力条组件
4.点开该UI蓝图，找到ProgressBar进度条控件，拖入蓝图
5.修改控件变量名称，便于后续使用。
6.将该进度条控件Percent百分比数值默认设置为1
7.点击UI控件右上角Graph，切换到控件蓝图，在构造函数中从UI传入的OwningPlayer拿到BP stats组件。
8.对于拿到的BP Stats组件，可以在Return Value处右键点击Promote to Variable快速创建变量。
9.创建好后如图。
10.回到BP_Stats
11.添加一个事件分发器，接下来要让BP_Stats触发事件，让UI接受事件并处理UI更新
12.事件拖入图表中点击Call即可创建调用节点
13.回到之前WB_Statbar的构造函数部分，在Stats之后连接Bind Event to Updatestat，绑定刚刚创建的事件分发器
14.再图表事件图空白处点击Add Custom Event，创建一个事件。
15.为该事件命名为Update stat bar
16.链接该事件，这样就完成了事件分发到触发逻辑。
17.在Statbar UI里新建函数UpdateStaminabar，用于更新显示逻辑
18.处理耐力参数百分比。
19.将Statbar控件拖入，找到Set percent，链接引脚，完成耐力信息显示。
20.将Update stat bar函数和对应事件绑定。
21.切换到BP_Stats的Regenerate Stamina函数，在Branch之前调用事件Call Updatestat
22.新建一个UI蓝图 PlayerHUD
23.拖入Canvas Panel
24.将控件WB_Statbar拖入蓝图，调整大小，完成控件装配。
25.最后回到BP_Stats在Decrease Stamina函数中也触发Call updatestat事件。完成耐力UI显示逻辑的制作。