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

已于 2022-10-12 14:25:15 修改
阅读量6.1k 收藏 2
点赞数 2
分类专栏： C+++UE 文章标签： ue4 ue5 游戏引擎 c++ 学习
于 2022-10-10 16:54:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/surkea/article/details/127236675
版权

目录

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元/天 解锁文章
Surkea
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
斯坦福UE4 + C++课程学习记录 13：UMG-血量条
surkea的博客
10-09 1535
斯坦福UE4 + C++课程学习记录 13：UMG-血量条
[UE4][Canvas]用C++代码绘制血条(HealthBar)
玄冬Wong
01-30 760
用UMG蓝图方式实现3D血条 http://aigo.iteye.com/blog/2270026 参考自Epic官方项目StrategyGame 血条效果：  StrategyHUD.h /** * Draws health bar for specific actor. * * @param ForActor Actor for which the ...
Unreal Engine 4 —— GAS系统学习 （八） 为敌人增加血条并关联伤害数据
虎牙维护世界和平
08-22 2030
在之前的基础之上，本节将为敌人增加血条，先创建一个UserWidget。 排版将其放在最中心。 在敌人的蓝图中添加Widget组件，并如下设置 Space设置为Screen，保证主角在任何角度能够看到血条。 WidgetClass选择刚才创建好的UI。 设置完成后在ViewPort中将血条调整到适合的位置。 此时就可以看到血条出现在敌人头上。 接下来就是改变血量数据，当敌人遭遇打击时候，头上血条数据会减少。 在AttributeSetBase类中...
java获取json中的某个值_撸一个 JSON 解析器
weixin_39884100的博客
11-22 1221
JSON解析JSONJSON解析器的基本原理步骤获取token流解析出JSON对象参考文章《Netty 实现原理与源码解析 —— 精品合集》《Spring 实现原理与源码解析 —— 精品合集》《MyBatis 实现原理与源码解析 —— 精品合集》《Spring MVC 实现原理与源码解析 —— 精品合集》《Spring Boot 实现原理与源码解析 —— 精品合集》《数据库实体设计合集》《Java...
[UE4] 制作血条HUD
Norths_的博客
02-24 4816
内容自学自B站AV71207348，P27 该文仅为自学记录，并非教程 系统环境：WIN10, UE4（引擎版本4.27.1），Visual Studio 2022 Community 1. 资产浏览器右键选择新建控件蓝图 2. 左上角控制板 → 面板 → 水平框，可以先将默认画布删除，再将水平框拖拽至层级的自命名控件下方，然后将控制板 → 通用 → 进度条拖拽至水平框的附属层级。 3. 点击层级中的ProgressBar（进度条），在编辑器右方的细节面板中调整参数。 插槽 → .
UE4 回合游戏项目 19- 添加血量UI
ChaoChao66666的博客
11-18 1554
​在上一节（UE4 回合游戏项目 18- 退出战斗）的基础上继续添加显示角色生命值的控件
ue4-uitween:C ++中的虚幻4 UMG UI补间插件
05-22
UE4 / UMG的UI补间库使用C ++为UMG小部件创建简单的补间。 UBUITween::Create ( SomeWidget, 0 . 2f ).FromTranslation( FVector2D( - 100 , 0 ) ).FromOpacity( 0 . 2f ).ToTranslation( FVector2D( 20 , 10 ) )....
UMG图表控件+UE5插件+曲线图、饼图、环状图、柱状图
最新发布
04-25
这款插件的特点在于它完全基于UMG(User Interface Meta Language)实现，意味着无需借助WebBrowser或者WebUI嵌套，而是通过纯C++编程语言以及蓝图系统来构建。这使得图表的集成更为流畅，性能更佳，同时也便于开发者...
UE4-InventorySystem:一个用 C++ 编写的基本库存系统，结合了 Unreal Engine 4.6 的 UMG
07-09
1. **C++编程基础**：C++是UE4的主要编程语言，用于创建游戏逻辑、实体行为以及游戏系统。在这个库存系统中，C++被用来定义库存类、物品类以及与之相关的数据结构和操作。 2. **库存类设计**：库存类通常包含物品...
ue-gjapi-umg：用于与GameJoltAPI交互的UMG小部件
02-06
《UE-GJAPI-UMG：游戏开发中的GameJolt API交互工具》 在Unreal Engine的游戏开发过程中...在实际应用中，开发者需要结合UE4、UMG、C++以及GameJolt API的知识，才能充分发挥其潜力，打造出更加生动和互动的游戏世界。
ue4-tutorials：虚幻4教程和实验的集合
01-28
这个"ue4-tutorials"压缩包显然是一个专门针对虚幻4的学习资源集合，包含了教程和实验项目，旨在帮助用户通过实践学习虚幻4的各项功能和技术。 在虚幻4中，C++和蓝图（Blueprints）是两种主要的编程方式。C++是一种...
UE4 C++ 与蓝图的相互调用
热门推荐
m0_37981386的博客
10-08 2万+
C++调用蓝图 右键c++脚本创建蓝图，（创建出来的蓝图类右上方有基于哪个C++类作为父类显示） 1、C++类添加 UCLASS(Blueprintable ,ClassGroup=(Custom), meta=(BlueprintSpawnableComponent) ) //加上Blueprintable才可以创建继续这个类的蓝图类 2、右键创建基于C++脚本的蓝图类 3、（要...
11月10日 生命值,减少生命值,创建生命值UI UE4斯坦福 学习笔记
weixin_42666952的博客
11-10 157
/将创建的AttributeComp绑定在角色上 AttributeComp = CreateDefaultSubobject("AttributeComp");在.h内添加生命值与减少血量的函数。
ue4缓存位置怎么改_UE4入门之路（UI篇）：UI性能优化
weixin_39624606的博客
12-01 1729
一、序本文大部分内容是对2017 Epic Game的工程师郭春飚先生在 Unreal Open Day上演讲的进一步解释及实际案例分析，欢迎大家多多交流。二、基础介绍首先对UE4中UMG渲染结构进行简要介绍:User Widget：对应一个用户界面。Widget Tree：每一个 User Widget 都是存储成树状结构。Panel Widget：不会渲染出来，用于对 Child Widget...
UE性能优化总结（持续更新ing）
weixin_43910139的博客
06-10 2600
UE性能优化总结
[UE4]用UMG方式实现Character头顶显示3D血条
玄冬Wong
01-12 2201
用Canvas 纯C++编码方式绘制血条(2D血条) http://aigo.iteye.com/blog/2275110  例子演示的功能是：在一个Character的头部上方显示一个血条   1，新建一个widget蓝图来制作血条   2，打开角色蓝图，在Components面板下新建一个Widget组件   3，还是在角色蓝图下，选中刚刚新建下widget组件，在其详细信...
Unreal Engine 4 C++ UMG血条及头顶信息
匠心
11-25 6521
Unreal Eegine 4 C UMG血条及头顶信息 创建血条控件 使用编辑器添加血条 使用C添加血条 Unreal Eegine 4 C++ UMG血条及头顶信息好记性不如烂笔头啊，还是记录一下!创建血条控件 首先在内容里创建一个UI的控件蓝图接着在控件中的CanvasPanel中创建一个ProgressBar设置锚点为下图中的样子：细节设置可以跟根据你的喜好来。这里有几个必须要弄的东西
UE4C++学习篇（八）--- UI界面添加（UMG方式）
卡西莫多说的博客
03-13 3773
如何让获取的金币数量显示到界面上面。
UE4血条、名字面向相机
UE4
06-21 2629
此次举例是采用3D的控件蓝图的方式。 假如使用FindLookAtRotation节点，相机在一些角度，血条会歪，效果如下： 蓝图如下： 正确的方式是使血条的旋转与相机的旋转关联起来，效果如下： - 蓝图如下： ...
虚幻引擎UI深度解析：UMG与Slate实战教程
"虚幻引擎UI刨析教程专注于讲解虚幻Slate UMG技术，包括UMG用户界面系统和Slate框架的详细使用。课程涵盖了官方文档、实战案例以及自定义UI组件的创建方法。" 在虚幻引擎中，UI系统是游戏开发中的重要组成部分，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Surkea

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

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

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

打赏作者

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

抵扣说明：

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

余额充值