二十二、制作快捷栏UI

添加画刷和字体
GameHUD
GameHUDWidget和DPI适配
在SlAiStyle中获取SlAiGameStyle
创建快捷栏UI
在UE4编辑器中创建继承于SlAiGameStyle的BPSlAiGameStyle
运行
4.18创建C++的一个坑

添加画刷和字体

SlAiGameWidgetStyle

//指定快捷栏的容器图标,把快捷栏的Style指定到Package
	UPROPERTY(EditAnywhere, Category = Package)
		FSlateBrush NormalContainerBrush;

	//指定被选择的容器的Brush
	UPROPERTY(EditAnywhere, Category = Package)
		FSlateBrush ChoosedContainerBrush;

	//指定没有颜色的Brush
	UPROPERTY(EditAnywhere, Category = Package)
		FSlateBrush EmptyBrush;

	//背包的背景框
	UPROPERTY(EditAnywhere, Category = Package)
		FSlateBrush PackageBGBrush;

	//合成表箭头
	UPROPERTY(EditAnywhere, Category = Package)
		FSlateBrush CompoundArrowBrush;

	//物品的Brush
	UPROPERTY(EditAnywhere, Category = Package)
		FSlateBrush ObjectBrush_1;
	UPROPERTY(EditAnywhere, Category = Package)
		FSlateBrush ObjectBrush_2;
	UPROPERTY(EditAnywhere, Category = Package)
		FSlateBrush ObjectBrush_3;
	UPROPERTY(EditAnywhere, Category = Package)
		FSlateBrush ObjectBrush_4;
	UPROPERTY(EditAnywhere, Category = Package)
		FSlateBrush ObjectBrush_5;
	UPROPERTY(EditAnywhere, Category = Package)
		FSlateBrush ObjectBrush_6;
	UPROPERTY(EditAnywhere, Category = Package)
		FSlateBrush ObjectBrush_7;


	//射线检测信息面板背景
	UPROPERTY(EditAnywhere, Category = Info)
		FSlateBrush RayInfoBrush;

	//准星材质
	UPROPERTY(EditAnywhere, Category = Info)
		FSlateBrush PointerBrush;

	//小地图背景图片
	UPROPERTY(EditAnywhere, Category = MiniMap)
		FSlateBrush MiniMapBGBrush;

	//主角图标
	UPROPERTY(EditAnywhere, Category = MiniMap)
		FSlateBrush PawnPointBrush;


	//玩家属性背景图
	UPROPERTY(EditAnywhere, Category = PlayerState)
		FSlateBrush PlayerStateBGBrush;

	//玩家头像背景图片
	UPROPERTY(EditAnywhere, Category = PlayerState)
		FSlateBrush PlayerHeadBGBrush;

	//血条Brush
	UPROPERTY(EditAnywhere, Category = PlayerState)
		FSlateBrush HPBrush;

	//饥饿Brush
	UPROPERTY(EditAnywhere, Category = PlayerState)
		FSlateBrush HungerBrush;

	//玩家头像
	UPROPERTY(EditAnywhere, Category = PlayerState)
		FSlateBrush PlayerHeadBrush;

	//聊天室背景图片
	UPROPERTY(EditAnywhere, Category = ChatRoom)
		FSlateBrush ChatRoomBGBrush;

	
	UPROPERTY(EditAnywhere, Category = Common)
		FSlateFontInfo Font_60;

	
	UPROPERTY(EditAnywhere, Category = Common)
		FSlateFontInfo Font_Outline_50;

	
	UPROPERTY(EditAnywhere, Category = Common)
		FSlateFontInfo Font_40;

	
	UPROPERTY(EditAnywhere, Category = Common)
		FSlateFontInfo Font_Outline_40;

	
	UPROPERTY(EditAnywhere, Category = Common)
		FSlateFontInfo Font_30;

	
	UPROPERTY(EditAnywhere, Category = Common)
		FSlateFontInfo Font_20;

	
	UPROPERTY(EditAnywhere, Category = Common)
		FSlateFontInfo Font_Outline_20;

	
	UPROPERTY(EditAnywhere, Category = Common)
		FSlateFontInfo Font_Outline_16;

	
	UPROPERTY(EditAnywhere, Category = Common)
		FSlateFontInfo Font_16;


	
	UPROPERTY(EditAnywhere, Category = Common)
		FLinearColor FontColor_White;

	
	UPROPERTY(EditAnywhere, Category = Common)
		FLinearColor FontColor_Black;

GameHUD

#pragma once

#include "CoreMinimal.h"
#include "Gameframework/HUD.h"
#include "SlAiGameHUD.generated.h"


UCLASS()
class SLAICOURSE_API ASlAiGameHUD : public AHUD
{
	GENERATED_BODY()
	
	
public:

	ASlAiGameHUD();

private:

	TSharedPtr GameHUDWidget;
	
};

#include "SlAiGameHUD.h"
#include"SSlAiGameHUDWidget.h"
#include"Engine/Engine.h"
#include"SlateBasics.h"


ASlAiGameHUD::ASlAiGameHUD()
{
	if (GEngine && GEngine->GameViewport)
	{
		SAssignNew(GameHUDWidget, SSlAiGameHUDWidget);
		GEngine->GameViewport->AddViewportWidgetContent(SNew(SWeakWidget).PossiblyNullContent(GameHUDWidget.ToSharedRef()));
	}
}

GameHUDWidget和DPI适配

SlAiGameHUDWidget

#pragma once

#include "CoreMinimal.h"
#include "Widgets/SCompoundWidget.h"


class SLAICOURSE_API SSlAiGameHUDWidget : public SCompoundWidget
{
public:
	SLATE_BEGIN_ARGS(SSlAiGameHUDWidget)
	{}
	SLATE_END_ARGS()

	
	void Construct(const FArguments& InArgs);

public:

	//快捷栏指针
	TSharedPtr ShortcutWidget;

	//绑定到UIScaler的方法
	float GetUIScaler() const;

private:

	//获取屏幕Size
	FVector2D GetViewportSize() const;

private:

	//DPI缩放
	TAttribute UIScaler;


};

#include "SSlAiGameHUDWidget.h"
#include "SlateOptMacros.h"
#include"Engine/Engine.h"
#include"SDPIScaler.h"
#include"SOverlay.h"

#include"SSlAiShortcutWidget.h"

BEGIN_SLATE_FUNCTION_BUILD_OPTIMIZATION
void SSlAiGameHUDWidget::Construct(const FArguments& InArgs)
{

	//绑定缩放规则
	UIScaler.Bind(this, &SSlAiGameHUDWidget::GetUIScaler);
	
	ChildSlot
	[
		SNew(SDPIScaler)
		.DPIScale(UIScaler)
		[
			SNew(SOverlay)

			+SOverlay::Slot()
		.HAlign(HAlign_Center)
		.VAlign(VAlign_Bottom)
		[
			SAssignNew(ShortcutWidget,SSlAiShortcutWidget)
		]
		]
	];
	
}

END_SLATE_FUNCTION_BUILD_OPTIMIZATION



float SSlAiGameHUDWidget::GetUIScaler() const
{
	return GetViewportSize().Y/1080.f;
}
FVector2D SSlAiGameHUDWidget::GetViewportSize() const
{
	FVector2D Result(0.f,0.f);
	if (GEngine && GEngine->GameViewport)
	{
		GEngine->GameViewport->GetViewportSize(Result);
	}
	return Result;
}

在SlAiStyle中获取SlAiGameStyle

本以为这是简便方法，感觉打的代码更多了，提取一个FString变量就更多了。
SlAiStyle

//获取Game样式
	static const struct FSlAiGameStyle* GetGameStyle();

const FSlAiGameStyle* SlAiStyle::GetGameStyle()
{
	const struct FSlAiGameStyle* GameStyle;

	GameStyle = &SlAiStyle::Get().GetWidgetStyle("BPSlAiGameStyle");
	return GameStyle;
}

创建快捷栏UI

SlAiShortcutWidget

#pragma once

#include "CoreMinimal.h"
#include "Widgets/SCompoundWidget.h"


class SLAICOURSE_API SSlAiShortcutWidget : public SCompoundWidget
{
public:
	SLATE_BEGIN_ARGS(SSlAiShortcutWidget)
	{}
	SLATE_END_ARGS()

	
	void Construct(const FArguments& InArgs);

	virtual void Tick(const FGeometry& AllottedGeometry, const double InCurrentTime, const float InDeltaTime) override;

private:

	//初始化所有容器
	void InitializeContainer();

private:

	//物品信息的指针
	TSharedPtr ShortcutInfoTextBlock;

	//网格指针
	TSharedPtr GridPanel;

	//是否初始化容器
	bool IsInitializeContainer;
};

// Fill out your copyright notice in the Description page of Project Settings.

#include "SSlAiShortcutWidget.h"
#include "SlateOptMacros.h"
#include"SlAiStyle.h"
#include"SlAiGameWidgetStyle.h"
#include"SBox.h"
#include"SOverlay.h"
#include"STextBlock.h"
#include"SUniformGridPanel.h"
#include"SBorder.h"

BEGIN_SLATE_FUNCTION_BUILD_OPTIMIZATION
void SSlAiShortcutWidget::Construct(const FArguments& InArgs)
{
	
	ChildSlot
	[
		SNew(SBox)
		.WidthOverride(900.f)
		.HeightOverride(160.f)
		[
			SNew(SOverlay)

			+SOverlay::Slot()
		.HAlign(HAlign_Center)
		.VAlign(VAlign_Top)
		[
			SAssignNew(ShortcutInfoTextBlock,STextBlock)
			.Font(SlAiStyle::GetGameStyle()->Font_Outline_40)
		.ColorAndOpacity(SlAiStyle::GetGameStyle()->FontColor_White)
		]


	+ SOverlay::Slot()
		.HAlign(HAlign_Fill)
		.VAlign(VAlign_Fill)
		.Padding(0.f,60.f,0.f,0.f)
		[
			SAssignNew(GridPanel,SUniformGridPanel)
		]

		]

	];

	//设置没有初始化容器
	IsInitializeContainer = false;

	
}
END_SLATE_FUNCTION_BUILD_OPTIMIZATION



void SSlAiShortcutWidget::Tick(const FGeometry& AllottedGeometry, const double InCurrentTime, const float InDeltaTime)
{
	if (!IsInitializeContainer)
	{
		InitializeContainer();
		IsInitializeContainer = true;
	}
}


void SSlAiShortcutWidget::InitializeContainer()
{
	for (int i = 0; i < 9; ++i)
	{
		//创建容器
		TSharedPtr ContainerBorder;
		TSharedPtr ObjectImage;
		TSharedPtr ObjectNumText;

		SAssignNew(ContainerBorder, SBorder)
			//待删除
			.BorderImage(&SlAiStyle::GetGameStyle()->NormalContainerBrush)
			.Padding(FMargin(10.f))
			[
				SAssignNew(ObjectImage, SBorder)
				.HAlign(HAlign_Right)
			.VAlign(VAlign_Bottom)
			.Padding(FMargin(0.f, 0.f, 5.f, 0.f))
			//待删除
			.BorderImage(&SlAiStyle::GetGameStyle()->EmptyBrush)
			[
				SAssignNew(ObjectNumText, STextBlock)
				.Font(SlAiStyle::GetGameStyle()->Font_Outline_20)
			.ColorAndOpacity(SlAiStyle::GetGameStyle()->FontColor_Black)
			//待删除
			.Text(FText::FromString("12"))
			]
			];

		GridPanel->AddSlot(i, 0)
			[
				ContainerBorder->AsShared()
			];

	}
}

在UE4编辑器中创建继承于SlAiGameStyle的BPSlAiGameStyle

运行

4.18创建C++的一个坑

创建完成后，编辑器界面还在正在启动Visual studio 时关闭，然后死活打不开项目，关机重启。

二十二、制作快捷栏UI

C/C++/C#相关栏目本月热门文章