虚幻学习笔记16—C++和3DUI（二）

一、前言

上一篇虚幻学习笔记15---C++和UI（一）中介绍了通过C++代码创建2D的ui，本章主要讲解怎么用C++代码创建3D的UI，在虚幻学习笔记3---UI跟随弹窗这章中讲解了怎样用蓝图创建一个3D的UI，并且和其交互。

本系列使用的虚幻5.2.1，vs2022。

二、实现

本案例中通过创建一个第三人称人物头顶的血条案例来进行说明。

2.1、创建3DUI内容

1、创建一个"My3DWidget"类，在其中创建两个变量，代码如下

cpp 复制代码

	UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "My3DUI")
	float CurHealth = 100.0f;
	UPROPERTY(EditAnywhere, BlueprintReadOnly, Category = "MyInput")
	float	MaxHealth = 100.0f;

2、然后创建一个控件蓝图添加一个进度条，如图2.1.1所示，然后将其呈现的宽度和高度设置一
图2.1.1

下，并将其锚点设置为平铺，这样就会将进度条完整的呈现在3DUI区域，不会有间隙等出现。

3、将新建的蓝图的"类设置"中的父类设置为刚刚创建的"My3DWidget"类，并且将进度条的值进行绑定，绑定的蓝图设置如图2.1.2所示，即将当前血量除以最大血量（这一步对于后续显示3D效果没什么影响，不设置也可以）。
2.1.2

2.2、在C++中加载3DUI

1、创建一个Character类，命名为"MyCharacter1"，在这个类里面将加载之前创建的3DUI蓝图，首先需要在头文件中定义该类型的变量，代码如下。

cpp 复制代码

//加载UI的头文件
#include "Components/WidgetComponent.h"

//定义的变量
	//3DUI
	UPROPERTY(EditAnywhere, BlueprintReadOnly, Category = "My3DUI")
	UWidgetComponent* My3DUI;

2、然后再在构造函数中加载2.1创建的蓝图，代码如下：其中""/Script/UMGEditor.WidgetBlueprint'/Game/BluePrint/UI3D.UI3D_C'"为2.1中创建的蓝图的引用，注意后面一定要加上后缀"_C"。

cpp 复制代码

	My3DUI = CreateDefaultSubobject<UWidgetComponent>(TEXT("My3DUI"));
	My3DUI->SetupAttachment(RootComponent);
	static ConstructorHelpers::FClassFinder<UUserWidget>tempUICalss(TEXT("/Script/UMGEditor.WidgetBlueprint'/Game/BluePrint/UI3D.UI3D_C'"));
	My3DUI->SetWidgetClass(tempUICalss.Class);
	My3DUI->SetRelativeLocation(FVector(0, 0, 100));
	My3DUI->SetWidgetSpace(EWidgetSpace::Screen);
	My3DUI->SetDrawSize(FVector2D(400, 20));

3、编译成功后创建一个"MyCharacter1"类型的蓝图"BP_MyCharacter1"，在蓝图中添加一个静态网格，并且将一个人物网格给它并调整其网格和父组件的相对位置，最后将其拖放到场景中运行即可看到3DUI血条始终跟随人物的效果，如图2.2.1所示
图2.2.1

4、如果将屏幕空间设置成场景，代码如下

cpp 复制代码

	My3DUI->SetWidgetSpace(EWidgetSpace::World);

这样3DUI血条不会一直朝向摄像机，会出现看到其侧面设置背面的情况，如图2.2.2所示
图2.2.2

三、总结

3.1、3DUI通过蓝图进行创建，然后在其他类中加载作为子物体，最后呈现也只能创建一个新的蓝图来呈现，这样有点饶，其实把这里的C++类作为模板，蓝图作为实例或对象即可。

3.2、UI的空间包含屏幕和世界两个，呈现的效果是不一样的，屏幕会始终将正面朝向摄像机，世界其正面是固定的，会看到UI的背面和侧面。