UE4纯C++实现游戏快捷栏之创建快捷栏UI

作为一个在游戏界面中显示的快捷栏，我们需要在游戏运行时就显示出快捷栏UI，故我们创建两个Widget。

　　1.GameHUDWidget：负责游戏中界面UI的整体显示

　　2.ShortcutWidget：负责快捷栏部件的显示与逻辑

然后我们通过以下步骤依次创建显示快捷栏UI：

　　01.创建ShortcutWidget快捷栏组件：存储容器逻辑、界面布局、样式、初始化

ShortcutWidget.h：

 1 // Fill out your copyright notice in the Description page of Project Settings.
 2
 3 #pragma once
 4
 5 #include "CoreMinimal.h"
 6 #include "Data/SDTypes.h"
 7
 8 #include "Widgets/SCompoundWidget.h"
 9
10 struct FSDGameStyle;
11 class STextBlock;
12 class SUniformGridPanel;
13
14 /**
15  *
16  */
17 class SANDBOXGAME_API SSDShortcutWidget : public SCompoundWidget
18 {
19 public:
20     SLATE_BEGIN_ARGS(SSDShortcutWidget)
21     {}
22     SLATE_END_ARGS()
23
24     /** Constructs this widget with InArgs */
25     void Construct(const FArguments& InArgs);
26
27     virtual void Tick(const FGeometry& AllottedGeometry, const double InCurrentTime, const float InDeltaTime) override;
28
29 public:
30     // 创建委托变量
31     FRegisterShortcutContainer RegisterShortcutContainer;
32
33 private:
34     // 初始化所有容器
35     void InitContainer();
36
37 private:
38     // 获取GameWidgetStyle
39     const FSDGameStyle* GameStyle;
40
41     // 物品名字指针
42     TSharedPtr<STextBlock> shortcutInfoTextBlock;
43
44     // 网格指针
45     TSharedPtr<SUniformGridPanel> GridPanel;
46
47     // 是否初始化容器
48     bool IsInitContainer;
49
50 };

ShortcutWidget.cpp：构造函数（获取样式蓝图实例、UI布局、初始化变量）、Tick指针中检查初始化、InitializeContainer(更新快捷栏函数，实现单个快捷框UI绘制、变量new赋值)

 1 #include "UI/Widget/SSlAiShortcutWidget.h"
 2 #include "SlateOptMacros.h"
 3 #include "SlAiStyle.h"
 4 #include "SlAiGameWidgetStyle.h"
 5 #include "SBox.h"
 6 #include "SOverlay.h"
 7 #include "STextBlock.h"
 8 #include "SUniformGridPanel.h"
 9 #include "SBorder.h"
10
11 BEGIN_SLATE_FUNCTION_BUILD_OPTIMIZATION
12 void SSlAiShortcutWidget::Construct(const FArguments& InArgs)
13 {
14     // 获取 GameStyle
15     GameStyle = &SlAiStyle::Get().GetWidgetStyle<FSlAiGameStyle>("BPSDGameStyle");
16
17     ChildSlot
18     [
19         SNew(SBox)
20         .WidthOverride(900.f)
21         .HeightOverride(160.f)
22         [
23             SNew(SOverlay)
24
25             +SOverlay::Slot()
26             .HAlign(HAlign_Center)
27             .VAlign(VAlign_Top)
28             [
29                 SAssignNew(ShortcutInfoTextBlock, STextBlock)
30                 .Font(GameStyle->Font_Outline_40)
31                 .ColorAndOpacity(GameStyle->FontColor_White)
32             ]
33
34             +SOverlay::Slot()
35             .HAlign(HAlign_Fill)
36             .VAlign(VAlign_Fill)
37             .Padding(FMargin(0.f, 60.f, 0.f, 0.f))
38             [
39                 SAssignNew(GridPanel, SUniformGridPanel)
40             ]
41         ]
42     ];
43
44     // 设置没有初始化容器
45     IsInitializeContainer = false;
46 }
47 END_SLATE_FUNCTION_BUILD_OPTIMIZATION
48
49 void SSlAiShortcutWidget::Tick(const FGeometry& AllottedGeometry, const double InCurrentTime, const float InDeltaTime)
50 {
51     if (!IsInitializeContainer) {
52         InitializeContainer();
53         IsInitializeContainer = true;
54     }
55 }
56
57 void SSlAiShortcutWidget::InitializeContainer()
58 {
59     for (int i = 0; i < 9; ++i) {
60         // 创建容器
61         TSharedPtr<SBorder> ContainerBorder;
62         TSharedPtr<SBorder> ObjectImage;
63         TSharedPtr<STextBlock> ObjectNumText;
64
65         SAssignNew(ContainerBorder, SBorder)
66         .Padding(FMargin(10.f))
67         // 供测试用，待删除
68         .BorderImage(&GameStyle->NormalContainerBrush)
69
70         [
71             SAssignNew(ObjectImage, SBorder)
72             .HAlign(HAlign_Right)
73             .VAlign(VAlign_Bottom)
74             .Padding(FMargin(0.f, 0.f, 5.f, 0.f))
75             // 供测试用，待删除
76             .BorderImage(&GameStyle->EmptyBrush)
77
78             [
79                 SAssignNew(ObjectNumText, STextBlock)
80                 .Font(GameStyle->Font_Outline_20)
81                 .ColorAndOpacity(GameStyle->FontColor_Black)
82                 // 供测试用，待删除
83                 .Text(FText::FromString("12"))
84
85             ]
86         ];
87
88         GridPanel->AddSlot(i, 0)
89         [
90             ContainerBorder->AsShared()
91         ];
92     }
93 }

　　02.添加快捷栏UI组件的样式：在GameStyle.h文件中添加样式接口、在蓝图中创建GameStyle的蓝图然后选中样式

SlAiGameStyle.h：添加样式接口

  1 // Fill out your copyright notice in the Description page of Project Settings.
  2
  3 #pragma once
  4
  5 #include "CoreMinimal.h"
  6 #include "Styling/SlateWidgetStyle.h"
  7 #include "Styling/SlateWidgetStyleContainerBase.h"
  8
  9 #include "SDGameWidgetStyle.generated.h"
 10
 11 /**
 12  *
 13  */
 14 USTRUCT()
 15 struct SANDBOXGAME_API FSDGameStyle : public FSlateWidgetStyle
 16 {
 17     GENERATED_USTRUCT_BODY()
 18
 19     FSDGameStyle();
 20     virtual ~FSDGameStyle();
 21
 22     // FSlateWidgetStyle
 23     virtual void GetResources(TArray<const FSlateBrush*>& OutBrushes) const override;
 24     static const FName TypeName;
 25     virtual const FName GetTypeName() const override { return TypeName; };
 26     static const FSDGameStyle& GetDefault();
 27
 28     // 添加笔刷
 29     /*
 30     * 快捷栏容器Brush
 31     */
 32     UPROPERTY(EditAnywhere, Category = "Package")
 33     FSlateBrush NormalContainerBrush;
 34
 35     /*
 36     * 快捷栏被选中时Brush
 37     */
 38     UPROPERTY(EditAnywhere, Category = "Package")
 39     FSlateBrush ChoosedContainerBrush;
 40
 41     /*
 42     * 空Brush
 43     */
 44     UPROPERTY(EditAnywhere, Category = "Package")
 45     FSlateBrush EmptyBrush;
 46
 47     // 物品笔刷
 48     UPROPERTY(EditAnywhere, Category = "Package")
 49     FSlateBrush ObjectBrush_1;
 50     UPROPERTY(EditAnywhere, Category = "Package")
 51     FSlateBrush ObjectBrush_2;
 52     UPROPERTY(EditAnywhere, Category = "Package")
 53     FSlateBrush ObjectBrush_3;
 54     UPROPERTY(EditAnywhere, Category = "Package")
 55     FSlateBrush ObjectBrush_4;
 56     UPROPERTY(EditAnywhere, Category = "Package")
 57     FSlateBrush ObjectBrush_5;
 58     UPROPERTY(EditAnywhere, Category = "Package")
 59     FSlateBrush ObjectBrush_6;
 60     UPROPERTY(EditAnywhere, Category = "Package")
 61     FSlateBrush ObjectBrush_7;
 62
 63
 64     // 添加样式
 65     /*
 66     * 白色颜色
 67     */
 68     UPROPERTY(EditAnywhere, Category = "Common")
 69     FLinearColor FontColor_White;
 70
 71     /*
 72     * 黑色颜色
 73     */
 74     UPROPERTY(EditAnywhere, Category = "Common")
 75     FLinearColor FontColor_Black;
 76
 77     /*
 78     * 60号字体
 79     */
 80     UPROPERTY(EditAnywhere, Category = "Common")
 81     FSlateFontInfo Font_60;
 82
 83     /*
 84     * 50号字体有轮廓
 85     */
 86     UPROPERTY(EditAnywhere, Category = "Common")
 87     FSlateFontInfo Font_Outline_50;
 88
 89     /*
 90     * 40号字体
 91     */
 92     UPROPERTY(EditAnywhere, Category = "Common")
 93     FSlateFontInfo Font_40;
 94
 95     /*
 96     * 40号字体有轮廓
 97     */
 98     UPROPERTY(EditAnywhere, Category = "Common")
 99     FSlateFontInfo Font_Outline_40;
100
101     /*
102     * 30号字体
103     */
104     UPROPERTY(EditAnywhere, Category = "Common")
105     FSlateFontInfo Font_30;
106
107     /*
108     * 20号字体
109     */
110     UPROPERTY(EditAnywhere, Category = "Common")
111     FSlateFontInfo Font_20;
112
113     /*
114     * 20号字体有轮廓
115     */
116     UPROPERTY(EditAnywhere, Category = "Common")
117     FSlateFontInfo Font_Outline_20;
118
119     /*
120     * 16号字体有轮廓
121     */
122     UPROPERTY(EditAnywhere, Category = "Common")
123     FSlateFontInfo Font_Outline_16;
124
125     /*
126     * 16号字体
127     */
128     UPROPERTY(EditAnywhere, Category = "Common")
129     FSlateFontInfo Font_16;
130
131
132 };
133
134 /**
135  */
136 UCLASS(hidecategories=Object, MinimalAPI)
137 class USDGameWidgetStyle : public USlateWidgetStyleContainerBase
138 {
139     GENERATED_BODY()
140
141 public:
142     /** The actual data describing the widget appearance. */
143     UPROPERTY(Category=Appearance, EditAnywhere, meta=(ShowOnlyInnerProperties))
144     FSDGameStyle WidgetStyle;
145
146     virtual const struct FSlateWidgetStyle* const GetStyle() const override
147     {
148         return static_cast< const struct FSlateWidgetStyle* >( &WidgetStyle );
149     }
150 };

ue蓝图：创建样式蓝图

配置样式

　　03.在GameHUDWidget中添加快捷栏控件ShortcutWidget指针，并根据窗口宽度自动调节快捷栏控件大小

GameHUDWidget.h：添加快捷栏控件指针、获取屏幕Size函数、大小变更绑定函数GetUIScaler()

GameHUDWidget.cpp：编辑GameHUD界面(绑定大小自适应函数、组织控件排布)、对应功能函数实现

　　04.将GameHUDWidget添加进视口：在GameHUD文件中添加GameHUDWidget控件.

GameHUDWidget.h：添加Widget组件指针

GameHUDWidget.cpp：添加组件到视口

　　

最终显示效果