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源文件：

UCLASS()
class HELLOSLATE_API AHelloSlateGameModeBase : public AGameModeBase
{
    GENERATED_BODY()
public:
    AHelloSlateGameModeBase(const FObjectInitializer& ObjectInitializer); // 添加构造函数
};

#include "HelloSlateGameModeBase.h"
#include "HelloSlateHUD.h" // 包含新建的HUD头文件

// 构造函数
AHelloSlateGameModeBase::AHelloSlateGameModeBase(const FObjectInitializer& ObjectInitializer):
    Super::AGameModeBase(ObjectInitializer)
{
    HUDClass = AHelloSlateHUD::StaticClass(); // 设置为自定义的HUD C++类
}

 

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

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

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

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

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

显示图片

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

#include "HelloSlateHUD.h"
#include "Slate.h"
#include "Engine.h"

// 实现Actor的BeginPlay方法
void AHelloSlateHUD::BeginPlay()
{
    Super::BeginPlay(); // 调用父类方法
    UE_LOG(LogTemp, Warning, TEXT("AHelloSlateHUD::BeginPlay()"));
    
    // 显示一个引擎自带的图片
    if (GEngine && GEngine->GameViewport)
    {
        const FSlateBrush* icon = FCoreStyle::Get().GetBrush(TEXT("TrashCan"));
        GEngine->GameViewport->AddViewportWidgetContent(SNew(SOverlay)
            + SOverlay::Slot()
            .HAlign(HAlign_Left)
            .VAlign(VAlign_Top)
            [
                SNew(SImage)
                .Image(icon)
            ]
        );
    }
}

编译后在编辑器中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新手一些帮助。