本文档详细介绍了在UE4中如何利用UMG（Unreal Motion Graphics）创建角色血量条UI的过程，包括创建血量属性、应用血量更改、血量UI的实现，以及展示完整代码。通过实例演示了如何使用ActorComponent实现角色属性，以及如何通过蓝图系统创建敌人的攻击行为，实现实时显示血量的效果。
目录
UMG指Unreal Motion Graphics，是UE中的可视化UI创作工具。在本节中，我们将通过创建角色血量条UI来学习UMG的初步使用。
1. 创建血量属性
血量是角色的一种属性，要记录角色的血量数据，一种本能的做法是在SurCharacter中定义一个Health变量。但这种方式的弊端显而易见：随着项目的扩展、游戏不断更新迭代新版本，角色的属性可能达到几十上百，若是加上角色的技能、特性、天赋或其他各种角色相关内容，SurCharacter类的内容将膨胀到极难维护。
在UE中解决这个问题的办法也很简单，在之前第7节开宝箱的文章中已经介绍过，可以使用UE中的ActorComponent类，让整个类以组件的形式被SurCharacter拥有。因此，我们从ActorComponent创建角色的SurAttributeComponent类，用于实现角色的各种属性。
随后，我们创建protected的浮点型Health，并提供public的set方法。如果有朋友对这种设计方法不理解，可以自行了解学习设计模式的相关知识，其中一个基础的原则就是尽量减少底层代码的暴露，即不要为了一时方便滥用public来修饰变量。SurAttributeComponent.h和SurAttributeComponent.cpp的代码如下所示，有关UFUNCTION和UPROPERTY的使用可以参考第0节简介中的速查链接：
#pragma once
#include "CoreMinimal.h"
#include "Components/ActorComponent.h"
#include "SurAttributeComponent.generated.h"
UCLASS( ClassGroup=(Custom), meta=(BlueprintSpawnableComponent) )
class SURKEAUE_API USurAttributeComponent : public UActorComponent
{
GENERATED_BODY()
protected:
UPROPERTY(EditDefaultsOnly, BlueprintReadOnly, Category="Attributes")
float Health;
public:
USurAttributeComponent();
UFUNCTION(BlueprintCallable, Category="Attributes")
bool ApplyHealthChange(float Delta);
};
#include "SurAttributeComponent.h"
USurAttributeComponent::USurAttributeComponent()
{
Health = 100;
}
bool USurAttributeComponent::ApplyHealthChange(float Delta)
{
Health += Delta;
// 用于判断操作是否成功完成，如角色死亡、特殊机制等情况可能失败
// 目前先返回true
return true;
}然后使用如下方法在SurCharacter中声明组件，并在.cpp中创建相应实例：
UPROPERTY(VisibleAnywhere, BlueprintReadOnly, Category = "Components")
USurAttributeComponent* AttributeComp;2. 应用血量更改
为了测试血量组件能否正常运行，我们可以给魔法粒子附加伤害计算，并利用蓝图快速创建一个向玩家发射魔法粒子的敌人。
首先，在SurMagicProjectile中为球体组件绑定一个OnComponentBeginOverlap事件，旨在当魔法粒子与物体重叠时触发。比起使用阻挡来触发，使用重叠可以通过判定重叠对象来更方便的忽略友军伤害，并且让魔法粒子直接穿过友军继续在场景中计算。
在之前炸药桶的内容中已经介绍过事件绑定，这里再介绍一个小技巧：在为创建绑定事件的函数时，我们可以在VS中利用右键“转到定义”去找到该事件默认的输入，找到参数数量最多的一个函数重载，然后复制粘贴除第一个参数（UE函数的签名）外的其他参数，去掉逗号作为绑定函数的参数。
然后在函数中实现减少血量的代码，在SurMagicProjectile.h和SurMagicProjectile.cpp文件中添加的代码分别为（到目前为止应该知道哪些代码应该在哪个地方了，所以为了节省空间没有贴全，该部分完整代码在文末）：
//SurMagicProjectile.h
UFUNCTION()
void OnActorOverlap(UPrimitiveComponent* OverlappedComponent, AActor* OtherActor, UPrimitiveComponent* OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult& SweepResult);
//SurMagicProjectile.cpp
SphereComp->OnComponentBeginOverlap.AddDynamic(this, &ASurMagicProjectile::OnActorOverlap);
void ASurMagicProjectile::OnActorOverlap(...)
{
if (OtherActor) {
//获得AttributeComp
USurAttributeComponent* AttributeComp = Cast<USurAttributeComponent>(OtherActor->GetComponentByClass(USurAttributeComponent::StaticClass()));
// 再次判空，可能碰到的是墙壁、箱子等没有血量的物体
if (AttributeComp) {
// 魔法粒子造成20血量伤害
AttributeComp->ApplyHealthChange(-20.0f);
// 一旦造成伤害就销毁，避免穿过角色继续计算
Destroy();
}
}
}由于我们希望子弹可以忽略友军，设置了重叠时开始事件，因此对应的Projectile碰撞设置也要进行更改：
在Player中利用蓝图实现在屏幕上打印血量的字符串，以让我们实时了解角色的血量。这个蓝图实现很简单，唯一注意的是设置显示时长为0并关闭Print to Log，这样屏幕上只会出现一个数字（事件Tick会在每一帧都调用），且不会在Log中输出大量无用信息：
随后利用蓝图系统快速实现一个攻击玩家的敌人，该部分在视频课程中的P16第15分钟和P21的第2分钟。
从Actor派生一个名为ProjectileCanon的蓝图类，为其添加Utility下的箭头组件并设置为根，并设置颜色（UE中用红绿蓝表示XYZ轴，箭头默认的红色与X轴相同容易混乱），去掉“渲染”属性中的“游戏中隐藏”。
然后，在事件图表中从“开始运行”节点添加循环计时器，并添加名为OnTimerElapsed的自定义事件，设置该事件为朝箭头方向发射魔法粒子；同时，在Tick节点后实现在每一帧将箭头指向玩家，方向向量由两个Actor的坐标相减得到（不理解的朋友可学习一下数学的立体几何内容）。如图13-4和13-5所示，完整的蓝图代码见文末：
最后需要注意，上一节Debug时把Player的Attack属性的ProjectileClass设置为空，需要把它还原为MagicProjectile。运行关卡，随着箭头每2秒对玩家进行攻击，左上角显示玩家的血量也逐次减少：
3. 血量UI
现在才正式进入UMG的使用，我们将通过UMG制作角色的血量条来实时显示角色的血量。
首先在Content文件夹下创建UI文件夹，用于存放所有UI相关的资产。在UI文件夹中创建“用户界面” -> “控件蓝图”，命名为PlayerHealth_Widget。双击打开控件，就可以看到UMG的操作界面，关于其完整的教程可以参考官方文档。
在左侧“控制板”中的“通用”分别添加一个进度条和文本，在“层级”中选择任意组件，右键添加水平框，并将另外一个拖入其中，这样不需要手动调整就可以使这两个元素在水平保持对齐。
然后在进度条右侧的“细节”面板中找到“插槽”，选择“尺寸”为填充，拉动水平框的整体长度就可以控制血条的长度。将水平框的“锚点”选择为左上角，位置XY值凭喜好设置，这将决定UI在屏幕显示的位置，完成后就做好了简单的血条UI。
在Player的蓝图中选择“事件开始运行”，并添加Create Widget节点，选择PlayerHealth_Widget，然后将其添加到视口，如图13-9所示。这样，在我们运行关卡时UI就会显示在屏幕上：
但此时UI的内容还是固定的，UI需要和数据进行绑定后，才能实时根据数据进行显示。选择文本块，点击 “内容” -> 文本-> 绑定 -> 创建绑定，UE会在蓝图中创建相应函数，我们将其重命名为GetHealthText。添加“获取拥有玩家Pawn（Get Owning Player Pawn）” -> 按类获取组件（Get Component By Class）-> 选择class为SurAttributeComponet -> GetHealth -> 连接到“返回节点”的return value引脚；然后在“获取拥有玩家Pawn”后添加Is Valid判空，如图13-11所示。编译保存运行，可以看到数字能够实时显示血量了。
为了控制篇幅，关于血量条UI的其他内容将在下节继续。另外，有关FString、FText、FName等字符串的相关问题，可以见第0节简介的速查链接。
4. 完整代码
SurMagicProjectile.h
#pragma once
#include "CoreMinimal.h"
#include "GameFramework/Actor.h"
#include "SurMagicProjectile.generated.h"
class USphereComponent;
class UProjectileMovementComponent;
class UParticleSystemComponent;
UCLASS()
class SURKEAUE_API ASurMagicProjectile : public AActor
{
GENERATED_BODY()
public:
ASurMagicProjectile();
protected:
// 球体,用于计算碰撞
UPROPERTY(VisibleAnywhere)
USphereComponent* SphereComp;
// 投射体，控制球体的运动
UPROPERTY(VisibleAnywhere)
UProjectileMovementComponent* MovementComp;
// 粒子系统，控制特效
UPROPERTY(VisibleAnywhere)
UParticleSystemComponent* EffectComp;
UFUNCTION()
void OnActorOverlap(UPrimitiveComponent* OverlappedComponent, AActor* OtherActor, UPrimitiveComponent* OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult& SweepResult);
virtual void BeginPlay() override;
public:
virtual void Tick(float DeltaTime) override;
};
SurMagicProjectile.cpp
#include "SurMagicProjectile.h"
#include "Components/SphereComponent.h"
#include "GameFramework/ProjectileMovementComponent.h"
#include "Particles/ParticleSystemComponent.h"
#include "SurAttributeComponent.h"
ASurMagicProjectile::ASurMagicProjectile()
{
PrimaryActorTick.bCanEverTick = true;
SphereComp = CreateDefaultSubobject<USphereComponent>("SphereComp");
SphereComp->SetCollisionProfileName("Projectile");
SphereComp->OnComponentBeginOverlap.AddDynamic(this, &ASurMagicProjectile::OnActorOverlap);
RootComponent = SphereComp;
MovementComp = CreateDefaultSubobject<UProjectileMovementComponent>("MovementComp");
MovementComp->InitialSpeed = 1000.0f;
MovementComp->bRotationFollowsVelocity = true;
MovementComp->bInitialVelocityInLocalSpace = true;
EffectComp = CreateDefaultSubobject<UParticleSystemComponent>("EffectComp");
EffectComp->SetupAttachment(SphereComp);
}
void ASurMagicProjectile::OnActorOverlap(UPrimitiveComponent* OverlappedComponent, AActor* OtherActor, UPrimitiveComponent* OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult& SweepResult)
{
if (OtherActor) {
//获得AttributeComp
USurAttributeComponent* AttributeComp = Cast<USurAttributeComponent>(OtherActor->GetComponentByClass(USurAttributeComponent::StaticClass()));
// 再次判空，可能碰到的是墙壁、箱子等没有血量的物体
if (AttributeComp) {
// 魔法粒子造成20血量伤害
AttributeComp->ApplyHealthChange(-20.0f);
// 一旦造成伤害就销毁，避免穿过角色继续计算
Destroy();
}
}
}
void ASurMagicProjectile::BeginPlay()
{
Super::BeginPlay();
}
void ASurMagicProjectile::Tick(float DeltaTime)
{
Super::Tick(DeltaTime);
}ProjectileCanon蓝图
Begin Object Class=/Script/BlueprintGraph.K2Node_Event Name="K2Node_Event_0"
EventReference=(MemberParent=Class'"/Script/Engine.Actor"',MemberName="ReceiveBeginPlay")
bOverrideFunction=True
NodePosX=32
bCommentBubblePinned=True
NodeGuid=74DA3C714679F20D8FC28682D27DBDBC
CustomProperties Pin (PinId=E978C1594A9C7BCF2384C1A36AE52DDB,PinName="OutputDelegate",Direction="EGPD_Output",PinType.PinCategory="delegate",PinType.PinSubCategory="",PinType.PinSubCategoryObject=None,PinType.PinSubCategoryMemberReference=(MemberParent=Class'"/Script/Engine.Actor"',MemberName="ReceiveBeginPlay"),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=C291F2704186CF935B0124B0C63D1937,PinName="then",Direction=
最低0.47元/天 解锁文章
扫一扫
1069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
