斯坦福UE4 + C++课程学习记录 14：UMG-优化血量条

已于 2022-10-12 14:25:15 修改
阅读量6.3k 收藏 2
点赞数 2
分类专栏： C+++UE 文章标签： ue4 ue5 游戏引擎 c++ 学习
于 2022-10-10 16:54:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/surkea/article/details/127236675
版权
本文介绍了在UE4中如何通过C++优化血量条的更新效率，利用多播委托实现自定义事件OnHealthChanged，并在蓝图中创建UMG脉冲动画以增强用户体验。通过将事件绑定到UI控件，避免了每帧刷新的资源浪费，同时展示了如何在UI中添加动画效果以反馈血量变化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

1. 优化执行效率

2. 简易脉冲动画

3. 完整代码

1. 优化执行效率

        上一节虽然实现了UI的实时更新，但绑定函数会每帧刷新进而造成资源浪费，毕竟血量变化的速度和一帧比起来还是慢太多。类似于CPU控制的IO操作会导致CPU持续忙等（一直检查状态但没有实际作用），一种解决办法就是使用中断控制来解放CPU。类似的，在设计模式中有一种订阅-发布（观察者）模式就很适合这样的场景：UI组件不再自行每帧查询血量，而是让血量自己在发生变化的同时通知UI进行刷新。

        在UE中可使用多播委托自定义事件来实现，它的作用主要是只需调用一次Broadcast函数就可使所有绑定的对象触发相应功能。在上一节转到OnComponentBeginOverlap的定义时，我们已经看到事件在UE中的代码结构，这里我们将使用类似的方法来实现一个自定义事件。SurAttributeComponent.h和.cpp的完整代码如下。我在写这部分代码的时候VS反应很慢，OnHealthChanged甚至找不到Broadcast方法，如果你遇到同样的情况可以复制粘贴直接编译。

#pragma once
#include "CoreMinimal.h"
#include "Components/ActorComponent.h"
#include "SurAttributeComponent.generated.h"

// 发起者，控件拥有者，改变后的血量，变化值
DECLARE_DYNAMIC_MULTICAST_DELEGATE_FourParams(FOnHealthChanged, AActor*, InstigatorActor, USurAttributeComponent*, OwningComp, float, NewHealth, float, Delta);

UCLASS( ClassGroup=(Custom), meta=(BlueprintSpawnableComponent) )
class SURKEAUE_API USurAttributeComponent : public UActorComponent
{
	GENERATED_BODY()

protected:
	
	UPROPERTY(EditDefaultsOnly, BlueprintReadOnly, Category="Attributes")
	float Health;

public:	
	USurAttributeComponent();

	UPROPERTY(BlueprintAssignable)
	FOnHealthChanged OnHealthChanged;

	UFUNCTION(BlueprintCallable, Category="Attributes")
	bool ApplyHealthChange(float Delta);

};
#include "SurAttributeComponent.h"

USurAttributeComponent::USurAttributeComponent()
{
	Health = 100;
}

bool USurAttributeComponent::ApplyHealthChange(float Delta)
{
	Health += Delta;
	OnHealthChanged.Broadcast(nullptr, this, Health, Delta);

	return true;
}

        回到UE，在Player的AttributeComp中添加刚刚编写的OnHealthChanged事件，利用PrintString节点快速验证效果，我在这里把颜色换成了紫色，以便同之前的打印结果区分。

图14-1 打印血量
图14-2 运行测试

        从测试结果来看，这个事件的效果完全满足显示血量的要求，但效率上毫无疑问地优于之前的实现方法。现在只需要把这个事件分配给相应的UI控件PlayerHealth_Widget即可，刚好其中的血条（进度条）还没有绑定数据。

        我们直接在PlayerHealth_Widget的事件图表中编写蓝图程序，在“事件构造”一开始就将将玩家Pawn的AttributeComp绑定到OnHealthChanged事件上。在每次事件触发时计算当前血量与玩家默认血量的百分比，并设置给进度条。此外，我还顺便设置了文本块显示的内容，并在设计器中取消了上一节实现的绑定函数。如果在蓝图中找不到文本框变量，记得在设计器中把相应控件前的Is Variable打开。蓝图如下所示，完整蓝图代码在文末：

图14-3 更新UI

2. 简易脉冲动画

        这部分通过在UI中添加血量减少时的脉冲动画，来了解UMG中动画的使用。

        在左下角的“动画”中点击“添加动画”，命名为PulseHealthAnim，点击动画，并选择旁边的“时间轴”。选择显示血量数字的文本块，在细节中下滑找到“渲染变换”，将缩放添加为关键帧。

图14-4 添加关键帧

        将时间轴拖拽到0.75，添加关键帧；在0.25处，将缩放的XY设置为0.5再次添加关键帧。此时拖动时间轴（或者按下空格键），就可预览到这个简易的脉冲动画。切换切换到蓝图中，添加播放动画的节点：

图14-5 播放动画

         运行测试，发现动画正常播放了，但初始状态文本的缩放变成了0.5。

图14-6 运行测试

         这是因为在刚才设置关键帧的时候更改了文本缩放的默认值，此时需要回到设计器中，点击黄色返回键将文本的缩放变为默认值：

图14-7 重置缩放

        类似的，在文本块的同一轨道中添加三个颜色的关键帧分别为白-红-白，并记得重置默认值，最终得到了如下的血量效果：

图14-8 血量动画

3. 完整代码

PlayerHealth_Widget蓝图

Begin Object Class=/Script/BlueprintGraph.K2Node_Event Name="K2Node_Event_1"
   EventReference=(MemberParent=Class'"/Script/UMG.UserWidget"',MemberName="Construct")
   bOverrideFunction=True
   NodePosX=608
   NodePosY=192
   bCommentBubblePinned=True
   NodeGuid=5C5C2C384FF042097E221CADF9B06BBD
   CustomProperties Pin (PinId=FFBD93B8414DC401A295798563A0A8C2,PinName="OutputDelegate",Direction="EGPD_Output",PinType.PinCategory="delegate",PinType.PinSubCategory="",PinType.PinSubCategoryObject=None,PinType.PinSubCategoryMemberReference=(MemberParent=Class'"/Script/UMG.UserWidget"',MemberName="Construct"),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
   CustomProperties Pin (PinId=F7A4FD1A4CA5E769D43CB88C4B6C3851,PinName="then",Direction="EGPD_Output",PinType.PinCategory="exec",PinType.PinSubCategory="",PinType.PinSubCategoryObject=None,PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,LinkedTo=(K2Node_DynamicCast_0 A66FCF6B4C604F9D38F11EA4AA517441,),PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
End Object
Begin Object Class=/Script/BlueprintGraph.K2Node_CallFunction Name="K2Node_CallFunction_0"
   bIsPureFunc=True
   FunctionReference=(MemberParent=Class'"/Script/Engine.GameplayStatics"',MemberName="GetPlayerPawn")
   NodePosX=560
   NodePosY=272
   NodeGuid=DC8EF067484F0D7D6C6926AC71A41156
   CustomProperties Pin (PinId=413C6C0347AF340E6EA6379535D587B9,PinName="self",PinFriendlyName=NSLOCTEXT("K2Node", "Target", "Target"),PinToolTip="目标\nGameplay静态 对象引用",PinType.PinCategory="object",PinType.PinSubCategory="",PinType.PinSubCategoryObject=Class'"/Script/Engine.GameplayStatics"',PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,DefaultObject="/Script/Engine.Default__GameplayStatics",PersistentGuid=00000000000000000000000000000000,bHidden=True,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
   CustomProperties Pin (PinId=770BEBF04E7B193464D49889283D49A3,PinName="WorldContextObject",PinToolTip="World Context Object\n{类别}",PinType.PinCategory="object",PinType.PinSubCategory="",PinType.PinSubCategoryObject=Class'"/Script/CoreUObject.Object"',PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=True,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,PersistentGuid=00000000000000000000000000000000,bHidden=True,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
   CustomProperties Pin (PinId=46345CB948D781358B222994D4CEAC23,PinName="PlayerIndex",PinToolTip="Player Index\n整数",PinType.PinCategory="int",PinType.PinSubCategory="",PinType.PinSubCategoryObject=None,PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,DefaultValue="0",AutogeneratedDefaultValue="0",PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
   CustomProperties Pin (PinId=2DC527BA4C556E33D522FB9D8BC900A4,PinName="ReturnValue",PinToolTip="Return Value\nPawn 对象引用\n\n返回指定玩家索引处的玩家pawn",Direction="EGPD_Output",PinType.PinCategory="object",PinType.PinSubCategory="",PinType.PinSubCategoryObject=Class'"/Script/Engine.Pawn"',PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,LinkedTo=(K2Node_DynamicCast_0 34973D504ADDA4109277CF8DEFDD55CF,),PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
End Object
Begin Object Class=/Script/BlueprintGraph.K2Node_DynamicCast Name="K2Node_DynamicCast_0"
   TargetType=Class'"/Script/SurkeaUE.SurCharacter"'
   NodePosX=848
   NodePosY=192
   NodeGuid=35014CBC4EA6220FD4E9F3B5492EC26A
   CustomProperties Pin (PinId=A66FCF6B4C604F9D38F11EA4AA517441,PinName="execute",PinType.PinCategory="exec",PinType.PinSubCategory="",PinType.PinSubCategoryObject=None,PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,LinkedTo=(K2Node_Event_1 F7A4FD1A4CA5E769D43CB88C4B6C3851,),PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
   CustomProperties Pin (PinId=8DCD68144E55A779A556AEA4BA0D005D,PinName="then",Direction="EGPD_Output",PinType.PinCategory="exec",PinType.PinSubCategory="",PinType.PinSubCategoryObject=None,PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,LinkedTo=(K2Node_AssignDelegate_0 F27DED894F115C8724352180EB1738F4,),PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
   CustomProperties Pin (PinId=B5F1A5824461D7D3271F918AFE65A58E,PinName="CastFailed",Direction="EGPD_Output",PinType.PinCategory="exec",PinType.PinSubCategory="",PinType.PinSubCategoryObject=None,PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
   CustomProperties Pin (PinId=34973D504ADDA4109277CF8DEFDD55CF,PinName="Object",PinType.PinCategory="object",PinType.PinSubCategory="",PinType.PinSubCategoryObject=Class'"/Script/CoreUObject.Object"',PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference
最低0.47元/天 解锁文章
ue4圆形血条_[UE4][Canvas]用C++代码绘制血条(HealthBar)
weixin_39687621的博客
12-20 448
用UMG蓝图方式实现3D血条参考自Epic官方项目StrategyGame血条效果： StrategyHUD.h/*** Draws health bar for specific actor.** @param ForActor Actor for which the health bar is for.* @param HealthPct Current Health per...
斯坦福UE4 C++课学习补充 14：UMG-优化血量条
最新发布
weixin_51524146的博客
07-27 449
【代码】斯坦福UE4 C++课学习补充 14：UMG-优化血量条。
NPC血条优化
weixin_33841722的博客
04-04 162
2019独角兽企业重金招聘Python工程师标准>>> ...
Ue4C++编程------血条与c++（一）
li2818的博客
07-03 3105
    前面的篇章中，我们介绍了AI，在该文中，我们将介绍血条。相信大家也玩过不少游戏，我本人还是很喜欢玩lol的，那么在一般的游戏中，敌人的头上，或者小兵的头顶上都会有一个血条，用来实时的显示小兵的目前血量，接下来我就来解析如实现，首先，在AI文件夹中，新建一个UserInterface，并命名为RobotHealth，如下所示：        然后按照前面的UMG与c++文中的介绍，创建一个血...
【UE4 C++】为角色添加血条组件并动态变化。
Tanzq的博客
10-14 1166
添加UI血条组件 UPROPERTY(VisibleAnywhere, BlueprintReadOnly, Category="XXXX") UWidgetComponent* Widget; // 在初始化完组件之后调用 virtual void PostInitializeComponents() override; // HpBarWidget 使用进度条来代表血条的变化。 UPROPERTY() UProgressBar* HPBarProgress; 对组件进行初始化及调用 构造函数
斯坦福UE4 + C++课学习记录 13：UMG-血量条
weixin_51524146的博客
07-23 1263
在UE中解决这个问题的办法很简单，可以使用UE中的。之外有三个基础类，其他控件都是继承者三个基类。，每个 UMG 控件，都持有一个。：这个类别的控件的公共基类都是。类，用于实现角色的各种属性。: 可以有一个子节点。
斯坦福UE4 + C++课程学习记录 13：UMG-血量条
surkea的博客
10-09 1756
斯坦福UE4 + C++课程学习记录 13：UMG-血量条
斯坦福UE4 + C++课程学习记录 18：十字准星
surkea的博客
10-17 1777
斯坦福UE4 + C++课程学习记录 18：十字准星
UE4 C++代码播放UMG中的动画
zzZZ20150101的专栏
03-18 1482
前言 在开发UE4项目时，经常将UMG的动画直接在编辑器中实现。而调用的时机却是要由C++逻辑代码来决定。实现此类功能目前我知道的有两种方式 C++声明 UFUNCTION(BlueprintImplementableEvent)函数然后在蓝图中重载调用 利用反射代码来获取对应动作的对象，然后进行动画播放。 目前我自己是比较倾向于方式1 反射获取对应动画代码 AnimationsMap.Empty(); UProperty* Prop = GetClass()->Pr.
[UE4]用UMG方式实现Character头顶显示3D血条
玄冬Wong
01-12 2437
用Canvas 纯C++编码方式绘制血条(2D血条) http://aigo.iteye.com/blog/2275110  例子演示的功能是：在一个Character的头部上方显示一个血条   1，新建一个widget蓝图来制作血条   2，打开角色蓝图，在Components面板下新建一个Widget组件   3，还是在角色蓝图下，选中刚刚新建下widget组件，在其详细信...
【UE4】使用UMG创建UI，了解内部机制及相应优化方法
游戏路上的小学生
09-09 7830
声明：http://www.gc-conf.com/视频中内容笔记 2020.9.9 在UE4中创建UI时使用的UMG（Unreal Motion Graphics）可能会遇到各种问题，例如如何使用它以及面临什么样的问题。在本次演讲中，将讨论这些问题的解决方案，然后介绍有效利用UMG的更好的方法和优化方法。 Youtube视频页面 https://www.youtube.com/watch?v=x67C_RqRVrg UE4创建...
Unreal Engine 4 C++ UMG血条及头顶信息
匠心
11-25 6903
Unreal Eegine 4 C UMG血条及头顶信息 创建血条控件 使用编辑器添加血条 使用C添加血条 Unreal Eegine 4 C++ UMG血条及头顶信息好记性不如烂笔头啊，还是记录一下!创建血条控件 首先在内容里创建一个UI的控件蓝图接着在控件中的CanvasPanel中创建一个ProgressBar设置锚点为下图中的样子：细节设置可以跟根据你的喜好来。这里有几个必须要弄的东西
【UE4】【C++】添加UI（血条）
The Beginning
03-15 3108
新加一个新的UI，加入Progress Bar创建绑定（有关血量百分比的）获得血量的百分比UFUNCTION(BlueprintPure,Category="Tank")    //暴露的是纯函数-->就是没有白色线的 float GetHealthPercentage(); //返回当前血量的百分比float ATank::GetHealthPercentage() { return ...
ue4缓存位置怎么改_UE4入门之路（UI篇）：UI性能优化
weixin_39624606的博客
12-01 1797
一、序本文大部分内容是对2017 Epic Game的工程师郭春飚先生在 Unreal Open Day上演讲的进一步解释及实际案例分析，欢迎大家多多交流。二、基础介绍首先对UE4中UMG渲染结构进行简要介绍:User Widget：对应一个用户界面。Widget Tree：每一个 User Widget 都是存储成树状结构。Panel Widget：不会渲染出来，用于对 Child Widget...
[UE4][Canvas]用C++代码绘制血条(HealthBar)
玄冬Wong
01-30 820
用UMG蓝图方式实现3D血条 http://aigo.iteye.com/blog/2270026 参考自Epic官方项目StrategyGame 血条效果：  StrategyHUD.h /** * Draws health bar for specific actor. * * @param ForActor Actor for which the ...
【UE4 C++】 绑定敌人血条
Tanzq的博客
08-09 1844
效果展示 敌人会显示血条，相互伤害时血条会扣血。 在远处时，敌人血量不会显示。 UI设计 新建UI，命名为：WB_Health_Enemy，和血条一样的制作方法： 打开进度条，进行绑定进度： 蓝图这么写。 和人物的血量设置差不多，这里是从角色的目标中获取，这样的好处在于只有敌人进入角色范围内才会显示血条，后面会实现。 C++代码实现 MainPlayerController 玩家控制器 .h 文件 // 添加UI资源 UPROPERTY(EditAnywhere, BlueprintReadWri
UE4用ProgressBar做血条
Leetp
02-11 5583
首先创建一个Widget Blueprint。命名为HealthAndPower 然后拖入ProgressBar和Text。 把上面的Fill Screen改成Custom，后面的大小改成500*200. 如果不这样改Widget无法显示，不知道为啥，可能是选择FillScreen之后这个Widget在屏幕最上方而无法看到吧。。 在Viewport中添加一个Widget。选中这个Wid
【UEC++学习】UMG在UEC++中的基本使用与UI的拖拽事件
qq_45617648的博客
07-06 2765
UMG在UEC++的基本使用
UE4中UMG与C++交互 页面文本修改
weixin_30249203的博客
08-27 980
在UE4中，有两种方式创建ui，一种是使用slate的方式，一种是UMG，UMG是slate的封装，是一个可视化的ui编辑器。slate则是纯c++方式（之前实验过一次slate创建页面，代码相当麻烦），所以准备采用UMG做几个页面。 在.Build.cs文件中将以下行： PublicDependencyModuleNames.AddRange(newstring[] {"Core",...
Angular开发指南：UMG-Palencia项目配置与实践
标题中提到的“UMG-Palencia: UMG Palencia页面”可能指的是一个与帕吉纳（Palencia）相关的网站或网页应用项目，该项目使用了Angular CLI（命令行接口）的某个版本（1.6.8）进行开发。Angular CLI是一个用于Angular...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Surkea

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值