Introduction<\/h1>\n\n\n\n
Displaying feedback to the player is one of the most important elements within game design, and this will usually involve some sort of HUD, or at least menus, within your game.<\/p>\n\n\n\n
In previous versions of Unreal, there was simple HUD support, which allowed you to draw simple shapes and text to the screen. However, it was somewhat limited in terms of aesthetics, and so solutions such as Scaleform<\/strong> became common to work around these limitations. Scaleform leveraged Adobe’s Flash file format to store vector images and UI scripts. It was not without its own cons for developers, though, not least the cost \u2013 it was a third-party product requiring a (sometimes, expensive) license.<\/p>\n\n\n\n As a result, Epic developed Slate for the Unreal 4 editor and the in-game UI framework. Slate is a collection of widgets (UI elements) and a framework that allows for a cross-platform interface for the Editor. It is also usable in-game to draw widgets, such as sliders and buttons, for menus and HUDs.<\/p>\n\n\n\n Slate uses declarative syntax to allow for an XML-style representation of user interface elements in their hierarchy in native C++. It accomplishes this by making heavy use of macros and operator overloading.<\/p>\n\n\n\n That said, not everybody wants to ask their programmers to design the game’s HUD. One of the significant advantages of using Scaleform within Unreal 3 was the ability to develop the visual appearance of game UIs using the Flash visual editor so that visual designers didn’t need to learn a programming language. Programmers could then insert the logic and data separately. This is the same paradigm that’s espoused by the Windows Presentation Framework<\/strong> (WPF<\/strong>), for example.<\/p>\n\n\n\n In a similar fashion, Unreal provides Unreal Motion Graphics<\/strong> (UMG<\/strong>). UMG is a visual editor for Slate widgets that allows you to visually style, lay out, and animate user interfaces. UI widgets (or controls, if you’ve come from a Win32 background) can have their properties controlled by either Blueprint code (written in the Graph view of the UMG window) or from C++. This chapter primarily deals with displaying UI elements, creating widget hierarchies, and creating base SWidget classes that can be styled and used within UMG.<\/p>\n\n\n\n This chapter requires the use of Unreal Engine 4 and uses Visual Studio 2017 as the IDE. Instructions on how to install both pieces of software and the requirements for them can be found in Chapter 1<\/a>, UE4 Development Tools<\/em>.<\/p>\n\n\n\n Canvas<\/strong> is a continuation of the simple HUD that’s implemented within Unreal 3. While it isn’t so commonly used within shipping games, mostly being replaced by Slate\/UMG, it’s simple to use, especially when you want to draw text or shapes to the screen. Canvas drawing is still used extensively by console commands that are used for debugging and performance analysis, such as stat game and the other stat commands<\/p>\n\n\n\n Refer to Chapter 4<\/a>, Actors and Components,<\/em> if you need a refresher on using the C++ Code Wizard.<\/p>\n\n\n\n At this point, you will get compile errors, because the CustomHUD class does not exist. That is what we will be creating next.<\/p>\n\n\n\n All the UI recipes here will be using Slate for drawing, so we need to add a dependency between our module and the Slate framework so that we can access the classes that have been declared in that module. The best place to put custom Canvas draw calls for a game HUD is inside a subclass of AHUD.<\/p>\n\n\n\n To tell the engine to use our custom subclass, though, we need to create a new GameMode and specify the type of our custom class.<\/p>\n\n\n\n Within the constructor of our custom Game Mode, we assign the UClass for our new HUD type to the HUDClass variable. This UClass is passed on to each player’s controller as they spawn in, and the controller is then responsible for the AHUD instance that it creates.<\/p>\n\n\n\n With our custom GameMode loading our custom HUD, we need to actually create said custom HUD class. AHUD defines a virtual function called DrawHUD(), which is invoked in every frame to allow us to draw elements to the screen. As a result, we override that function and perform our drawing inside the implementation.<\/p>\n\n\n\n The first method that’s used is as follows:<\/p>\n\n\n\n DrawText requires a font to draw with. The default font used by stat and other HUD drawing commands in the engine code is actually stored in the GEngine class, and can be accessed by using the GetSmallFont function, which returns an instance of the UFont as a pointer.<\/p>\n\n\n\n The remaining arguments that we are using are the actual text that should be rendered, and the offset, in pixels, at which the text should be drawn.<\/p>\n\n\n\n DrawText is a function that allows you to directly pass in the data that is to be displayed. The general DrawItem function is a Visitor implementation that allows you to create an object that encapsulates the information about the object to be drawn and reuse that object on multiple draw calls.<\/p>\n\n\n\n In this recipe, we create an element that can be used to represent a progress bar. We encapsulate the required information regarding the width and height of our box into an FCanvasBoxItem, which we then pass to the DrawItem function on our Canvas.<\/p>\n\n\n\n The third item that we draw is a filled rectangle. This function uses convenience methods that are defined in the HUD class rather than on the Canvas itself. The filled rectangle is placed at the same location as our FCanvasBox so that it can represent the current value inside the progress bar.<\/p>\n\n\n\n The previous recipe used the FCanvas API to draw to the screen. However, FCanvas suffers from a number of limitations, for example, animations are difficult to implement, and drawing graphics on the screen involves creating textures or materials. FCanvas also doesn’t implement anything in the way of widgets or window controls, making data entry or other forms of user input more complex than necessary. This recipe will show you how to begin creating HUD elements on-screen using Slate, which provides a number of built-in controls<\/p>\n\n\n\n Add Slate and SlateCore to your module’s dependencies if you haven’t done so already (see the Drawing using Canvas<\/em> recipe to learn how to do this).<\/p>\n\n\n\n Button located on the game screen<\/p>\n\n\n\n For us to reference Slate classes or functions in our code, our module must link with the Slate and SlateCore modules, so we add those to the module dependencies.<\/p>\n\n\n\n We need to instantiate our UI in one of the classes that loads when the game runs, so for this recipe, we use our custom PlayerController in the BeginPlay function as the place to create our UI.<\/p>\n\n\n\n Inside the BeginPlay implementation, we create a new SVerticalBox using the SNew function. We add a slot for a widget to our box, and set that slot to both horizontal and vertical centering.<\/p>\n\n\n\n Inside the slot, which we access using square brackets, we create a button that has Textblock inside it. In Textblock, we set the Text property to a string literal value.<\/p>\n\n\n\n With the UI now created, we call AddViewportWidgetForPlayer to display this widget on the local player’s screen.<\/p>\n\n\n\n With our custom PlayerController ready, we now need to create a custom GameMode to specify that it should use our new PlayerController. With the custom PlayerController being loaded at the start of the game, when BeginPlay is called, our UI will be shown.<\/p>\n\n\n\n The UI is very small at this screen size. Refer to the following recipe for information on how to scale it appropriately for the resolution of the game window.<\/p>\n","protected":false},"excerpt":{"rendered":" In this chapter, we will cover the following recipes: D […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27,1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/posts\/3226"}],"collection":[{"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3226"}],"version-history":[{"count":2,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/posts\/3226\/revisions"}],"predecessor-version":[{"id":3295,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/posts\/3226\/revisions\/3295"}],"wp:attachment":[{"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Technical requirements<\/h1>\n\n\n\n
Drawing using Canvas<\/h1>\n\n\n\n
Getting ready…<\/h1>\n\n\n\n
How to do it…<\/h1>\n\n\n\n
using UnrealBuildTool;
public class Chapter_14 : ModuleRules
{
public Chapter_14(ReadOnlyTargetRules Target) : base(Target)
{
PCHUsage = PCHUsageMode.UseExplicitOrSharedPCHs;
PublicDependencyModuleNames.AddRange(new string[] { \"Core\",
\"CoreUObject\", \"Engine\", \"InputCore\" });
PrivateDependencyModuleNames.AddRange(new string[] { });
\/\/ Uncomment if you are using Slate UI
PrivateDependencyModuleNames.AddRange(new string[] { \"Slate\",
\"SlateCore\" });<\/strong>
\/\/ Uncomment if you are using online features
\/\/ PrivateDependencyModuleNames.Add(\"OnlineSubsystem\");
\/\/ To include OnlineSubsystemSteam, add it to the plugins section in your uproject file with the Enabled attribute set to true
}
}<\/pre>\n\n\n\n#pragma once
#include \"CoreMinimal.h\"
#include \"GameFramework\/GameModeBase.h\"
#include \"CustomHUDGameMode.generated.h\"
\/**
*
*\/
UCLASS()
class CHAPTER_14_API ACustomHUDGameMode : public AGameModeBase
{
GENERATED_BODY()
ACustomHUDGameMode();<\/strong>
};<\/pre>\n\n\n\n#include \"CustomHUDGameMode.h\"
#include \"CustomHUD.h\"
ACustomHUDGameMode::ACustomHUDGameMode() : AGameModeBase()
{
HUDClass = ACustomHUD::StaticClass();
}<\/pre>\n\n\n\n![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/7830c68f-9f06-44ce-aedd-20e29710145d.png\")
<\/figure>\n\n\n\n![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/279fff54-150b-4019-b6c1-fc9d9f07b0a0.png\")
<\/figure>\n\n\n\n#pragma once
#include \"CoreMinimal.h\"
#include \"GameFramework\/HUD.h\"
#include \"CustomHUD.generated.h\"
\/**
*
*\/
UCLASS()
class CHAPTER_14_API ACustomHUD : public AHUD
{
GENERATED_BODY()
public:<\/strong>
virtual void DrawHUD() override;<\/strong>
};<\/pre>\n\n\n\n#include \"CustomHUD.h\"
#include \"Engine\/Canvas.h\"<\/strong>
void ACustomHUD::DrawHUD()<\/strong>
{<\/strong>
Super::DrawHUD();<\/strong>
Canvas->DrawText(GEngine->GetSmallFont(), TEXT(\"Test string to be printed to screen\"), 10, 10); <\/strong>
FCanvasBoxItem ProgressBar(FVector2D(5, 25), FVector2D(100, 5));<\/strong>
Canvas->DrawItem(ProgressBar);<\/strong>
DrawRect(FLinearColor::Blue, 5, 25, 100, 5);<\/strong>
}<\/strong><\/pre>\n\n\n\n![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/d725eff7-9368-40b6-a5da-84695df4ad25.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/5ff91259-600d-482f-b002-6497a6fae2ee.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/a15e2c53-27d0-40fe-bd70-09c9464d1827.png\")
<\/figure>\n\n\n\nHow it works…<\/h1>\n\n\n\n
float DrawText(constUFont* InFont, constFString&InText,
float X, float Y, float XScale = 1.f, float YScale = 1.f,
constFFontRenderInfo&RenderInfo = FFontRenderInfo());<\/pre>\n\n\n\nSee also…<\/h1>\n\n\n\n
Adding Slate Widgets to the screen<\/h1>\n\n\n\n
Getting ready<\/h1>\n\n\n\n
How to do it…<\/h1>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/7c52bf2e-a859-4474-8c1d-9cd54069694e.png\")
<\/figure>\n\n\n\n![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/1ad35366-16d0-413a-bbb0-a5635ead359a.png\")
<\/figure>\n\n\n\n#pragma once
#include \"CoreMinimal.h\"
#include \"GameFramework\/PlayerController.h\"
#include \"CustomHUDPlayerController.generated.h\"
\/**
*
*\/
UCLASS()
class CHAPTER_14_API ACustomHUDPlayerController : public APlayerController
{
GENERATED_BODY()
public:<\/strong>
virtual void BeginPlay() override;<\/strong>
};<\/pre>\n\n\n\n#include \"CustomHUDPlayerController.h\"
#include \"SlateBasics.h\"<\/strong>
void ACustomHUDPlayerController::BeginPlay()<\/strong>
{<\/strong>
Super::BeginPlay();<\/strong>
TSharedRef<SVerticalBox> widget = SNew(SVerticalBox)<\/strong>
+ SVerticalBox::Slot()<\/strong>
.HAlign(HAlign_Center)<\/strong>
.VAlign(VAlign_Center)<\/strong>
[<\/strong>
SNew(SButton)<\/strong>
.Content()<\/strong>
[<\/strong>
SNew(STextBlock)<\/strong>
.Text(FText::FromString(TEXT(\"Test button\")))<\/strong>
]<\/strong>
];<\/strong>
GEngine->GameViewport->AddViewportWidgetForPlayer(GetLocalPlayer(), widget, 1);<\/strong>
}<\/strong><\/pre>\n\n\n\n#pragma once
#include \"CoreMinimal.h\"
#include \"GameFramework\/GameModeBase.h\"
#include \"SlateHUDGameMode.generated.h\"
\/**
*
*\/
UCLASS()
class CHAPTER_14_API ASlateHUDGameMode : public AGameModeBase
{
GENERATED_BODY()
ASlateHUDGameMode();<\/strong>
};<\/pre>\n\n\n\n#include \"SlateHUDGameMode.h\"
#include \"CustomHUDPlayerController.h\"<\/strong>
ASlateHUDGameMode::ASlateHUDGameMode() : Super()<\/strong>
{<\/strong>
PlayerControllerClass = ACustomHUDPlayerController::StaticClass();<\/strong>
}<\/strong><\/pre>\n\n\n\n![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/826cba58-111f-40cf-8ff5-4d6c56bf5a45.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/9f73bfe4-1610-4d0c-b44b-b14e786dbbc7.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/2347b898-a48c-495d-84ce-d06b195e3021.png\")
<\/figure>\n\n\n\nHow it works…<\/h1>\n\n\n\n