UE4之Slate: SImage

概述

距离上次记录《UE4之Slate：纯C++工程配置》后已经好长时间了；

这个随笔来记录并分享一下SImage控件的使用，以在屏幕上显示一张图片；

目标

通过SImage控件的展示，学习Slate最基础的API使用

图文步骤

新建的C++工程，VS解决方案中，源码结构如下图：

　　　　　　　　图1：新建C++工程源码结构

新建一个C++ HUD类：

双击打开新建的工程文件：HelloSlate.uproject；这里使用编辑器的New C++ Class向导来添加HUD类；

编辑器菜单中：File->New C++ Class打开添加C++类向导界面；

勾选【Show All Class】，并在搜索栏中输入HUD，选中HUD作为父类；如图：

　　　　　　　　　　　　　　　　图2：选择HUD作为父类

点击【Next】，这里类名设为HelloSlateHUD，其他的保持默认，然后点击【Create Class】，如图：

　　　　　　　　　　　　　　　　图3：自定义HUD的类名

新的C++ HUD类创建后，VS工程会自动刷新并出现在VS的解决方案中，如下图：

　　　　　　　图4：新建HelloSlateHUD后，VS源码结构

设置以使用自定义的HUD C++类

打开HelloSlateGameModeBase.h和HelloSlateGameModeBase.cpp源文件：

1 UCLASS()
2 class HELLOSLATE_API AHelloSlateGameModeBase : public AGameModeBase
3 {
4     GENERATED_BODY()
5 public:
6     AHelloSlateGameModeBase(const FObjectInitializer& ObjectInitializer); // 添加构造函数
7 };

1 #include "HelloSlateGameModeBase.h"
2 #include "HelloSlateHUD.h" // 包含新建的HUD头文件
3
4 // 构造函数
5 AHelloSlateGameModeBase::AHelloSlateGameModeBase(const FObjectInitializer& ObjectInitializer):
6     Super::AGameModeBase(ObjectInitializer)
7 {
8     HUDClass = AHelloSlateHUD::StaticClass(); // 设置为自定义的HUD C++类
9 }

因为工程使用空模板创建的，这里需要配置一下关卡：
1、Content中创建Maps目录

2、保存当前当前关卡到Maps目录下，命名为HelloSlate

3、设置当前关卡的GameMode为HelloSlateGameModeBase类
具体如图：

　　　　　　　　　　　　　　　　图5：关卡配置，以使用自定义的GameMode，进而使HelloSlateHUD生效

点击Play按钮，在Output Log中应该能看到“AHelloSlateHUD::BeginPlay()”Log输出；

显示图片

VS打开HelloSlateHUD.cpp源码，包含必要的头文件引用并修改后如下：

 1 #include "HelloSlateHUD.h"
 2 #include "Slate.h"
 3 #include "Engine.h"
 4
 5 // 实现Actor的BeginPlay方法
 6 void AHelloSlateHUD::BeginPlay()
 7 {
 8     Super::BeginPlay(); // 调用父类方法
 9     UE_LOG(LogTemp, Warning, TEXT("AHelloSlateHUD::BeginPlay()"));
10
11     // 显示一个引擎自带的图片
12     if (GEngine && GEngine->GameViewport)
13     {
14         const FSlateBrush* icon = FCoreStyle::Get().GetBrush(TEXT("TrashCan"));
15         GEngine->GameViewport->AddViewportWidgetContent(SNew(SOverlay)
16             + SOverlay::Slot()
17             .HAlign(HAlign_Left)
18             .VAlign(VAlign_Top)
19             [
20                 SNew(SImage)
21                 .Image(icon)
22             ]
23         );
24     }
25 }

编译后在编辑器中Play，在游戏界面的左上角会显示一个垃圾桶图片；如图：

　　　　　　　　　　　　　　　　图6：运行效果

上述代码:

先是创建一个SOverlay对象；

再创建SImage对象，加到SOverlay Panel中，并设置水平、竖直方向的布局参数；

SOverlay对象最终通过GEngine->GameViewport->AddViewportWidgetContent(...)添加到“游戏画布”中

GameViewport是UGameViewportClient类的实例，有兴趣可以追一下源码；后面有时间再详述；

const FSlateBrush* icon取了引擎默认的资源，FSlateBrush、FCoreStyle后面涉及到渲染在聊；

对于当前的展示案例，这些暂时可以不用深究；

上述代码中的SNew宏和+ 、[]等操作符，可以参考下面这个文章：

UE4 Slate 特殊语法

结尾

以如何在界面上显示一个Image为例，详细的记录下C++中使用Slate最基础的流程；
以Step by step的这种方式，结合一些参考文章以及多些尝试，希望能带给UE4新手一些帮助。