一、前言
上一篇虚幻学习笔记15—C++和UI(一)中介绍了通过C++代码创建2D的ui,本章主要讲解怎么用C++代码创建3D的UI,在虚幻学习笔记3—UI跟随弹窗这章中讲解了怎样用蓝图创建一个3D的UI,并且和其交互。
本系列使用的虚幻5.2.1,vs2022。
二、实现
本案例中通过创建一个第三人称人物头顶的血条案例来进行说明。
2.1、创建3DUI内容
1、创建一个“My3DWidget”类,在其中创建两个变量,代码如下
UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "My3DUI")float CurHealth = 100.0f;UPROPERTY(EditAnywhere, BlueprintReadOnly, Category = "MyInput")float MaxHealth = 100.0f;
2、然后创建一个控件蓝图添加一个进度条,如图2.1.1所示,然后将其呈现的宽度和高度设置一
下,并将其锚点设置为平铺,这样就会将进度条完整的呈现在3DUI区域,不会有间隙等出现。
3、将新建的蓝图的“类设置”中的父类设置为刚刚创建的“My3DWidget”类,并且将进度条的值进行绑定,绑定的蓝图设置如图2.1.2所示,即将当前血量除以最大血量(这一步对于后续显示3D效果没什么影响,不设置也可以)。
2.2、在C++中加载3DUI
1、创建一个Character类,命名为“MyCharacter1”,在这个类里面将加载之前创建的3DUI蓝图,首先需要在头文件中定义该类型的变量,代码如下。
//加载UI的头文件
#include "Components/WidgetComponent.h"//定义的变量//3DUIUPROPERTY(EditAnywhere, BlueprintReadOnly, Category = "My3DUI")UWidgetComponent* My3DUI;
2、然后再在构造函数中加载2.1创建的蓝图,代码如下:其中“"/Script/UMGEditor.WidgetBlueprint'/Game/BluePrint/UI3D.UI3D_C'"为2.1中创建的蓝图的引用,注意后面一定要加上后缀”_C“。
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所示
4、如果将屏幕空间设置成场景,代码如下
My3DUI->SetWidgetSpace(EWidgetSpace::World);
这样3DUI血条不会一直朝向摄像机,会出现看到其侧面设置背面的情况,如图2.2.2所示
三、总结
3.1、3DUI通过蓝图进行创建,然后在其他类中加载作为子物体,最后呈现也只能创建一个新的蓝图来呈现,这样有点饶,其实把这里的C++类作为模板,蓝图作为实例或对象即可。
3.2、UI的空间包含屏幕和世界两个,呈现的效果是不一样的,屏幕会始终将正面朝向摄像机,世界其正面是固定的,会看到UI的背面和侧面。