- Create a new GameModeBase class called ToggleHUDGameMode:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/ebab40ac-26b7-46a2-906b-b5eead0b1736.png\")
<\/figure>\n\n\n\n- Add the following UPROPERTY and function definitions to the ToggleHUDGameMode.h file:<\/li><\/ol>\n\n\n\n
#pragma once
#include \"CoreMinimal.h\"
#include \"GameFramework\/GameModeBase.h\"
#include \"SlateBasics.h\"<\/strong>
#include \"ToggleHUDGameMode.generated.h\"
UCLASS()
class CHAPTER_14_API AToggleHUDGameMode : public AGameModeBase
{
GENERATED_BODY()
public:<\/strong>
UPROPERTY()<\/strong>
FTimerHandle HUDToggleTimer;<\/strong>
TSharedPtr<SVerticalBox> widget;<\/strong>
virtual void BeginPlay() override;<\/strong>
virtual void EndPlay(const EEndPlayReason::Type EndPlayReason) override;<\/strong>
};<\/pre>\n\n\n\n- Implement BeginPlay with the following code in the method body:<\/li><\/ol>\n\n\n\n
void AToggleHUDGameMode::BeginPlay()
{
Super::BeginPlay();
widget = SNew(SVerticalBox)
+ SVerticalBox::Slot()
.HAlign(HAlign_Center)
.VAlign(VAlign_Center)
[
SNew(SButton)
.Content()
[
SNew(STextBlock)
.Text(FText::FromString(TEXT(\"Test button\")))
]
];
auto player = GetWorld()->GetFirstLocalPlayerFromController();
GEngine->GameViewport->AddViewportWidgetForPlayer(player, widget.ToSharedRef(), 1);
auto lambda = FTimerDelegate::CreateLambda
([this]
{
if (this->widget->GetVisibility().IsVisible())
{
this->widget->SetVisibility(EVisibility::Hidden);
}
else
{
this->widget->SetVisibility(EVisibility::Visible);
}
});
GetWorld()->GetTimerManager().SetTimer(HUDToggleTimer, lambda, 5, true);
}<\/pre>\n\n\n\n- Implement EndPlay:<\/li><\/ol>\n\n\n\n
void AToggleHUDGameMode::EndPlay(const EEndPlayReason::Type EndPlayReason)
{
Super::EndPlay(EndPlayReason);
GetWorld()->GetTimerManager().ClearTimer(HUDToggleTimer);
}<\/pre>\n\n\n\n- Compile your code and start the editor.<\/li>
- Within the Editor, open World Settings from the toolbar:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/e117fa02-d7d4-447a-a504-6350baad3827.jpg\")
<\/figure>\n\n\n\n- Inside World Settings, override the level’s Game Mode to be our AToggleHUDGameMode:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/3eb58755-c6a1-4830-973d-c23df59487c3.jpg\")
<\/figure>\n\n\n\n- Play the level and verify that the UI toggles its visibility every five seconds.<\/li><\/ol>\n\n\n\n
How it works…<\/h1>\n\n\n\n
As with most of the other recipes in this chapter, we are using a custom GameMode class to display our single-player UI on the player’s viewport for convenience.<\/p>\n\n\n\n
We override BeginPlay and EndPlay so that we can correctly handle the timer that will be toggling our UI on and off for us. To make that possible, we need to store a reference to the timer as a UPROPERTY to ensure it won’t be garbage collected.<\/p>\n\n\n\n
Within BeginPlay, we create a new VerticalBox using the SNew macro, and place a button in its first slot. Buttons have Content, which can be some other widget to host inside them, such as SImage or STextBlock.<\/p>\n\n\n\n
In this instance, we place an STextBlock into the Content slot. The contents of the text block are irrelevant, that is, as long as they are long enough for us to be able to see our button properly.<\/p>\n\n\n\n
Having initialized our widget hierarchy, we add the root widget to the player’s viewport so that it can be seen by them.<\/p>\n\n\n\n
Now, we set up a timer to toggle the visibility of our widget. We are using a timer to simplify this recipe rather than having to implement user input and input bindings, but the principle is the same. To do this, we get a reference to the game world and its associated timer manager.<\/p>\n\n\n\n
With the timer manager in hand, we can create a new timer. However, we need to actually specify the code to run when the timer expires. One simple way to do this is to use a lambda function for our toggle the hud function.<\/p>\n\n\n\n
Lambdas are anonymous functions. Think of them as literal functions. To link a lambda function to the timer, we need to create a timer delegate.<\/p>\n\n\n\n
The FTimerDelegate::CreateLambda function is designed to convert a lambda function into a delegate, which the timer can call at the specified interval.<\/p>\n\n\n\n
The lambda needs to access the this pointer from its containing object, our GameMode, so that it can change properties on the widget instance that we have created. To give it the access it needs, we begin our lambda declaration with the [] operators, which enclose variables that should be captured into the lambda, and are accessible inside it. The curly braces then enclose the function body in the same way they would with a normal function declaration.<\/p>\n\n\n\n
Inside the function, we check if our widget is visible. If it is visible, then we hide it using SWidget::SetVisibility. If the widget isn’t visible, then we turn it on using the same function call.<\/p>\n\n\n\n
In the rest of the call to SetTimer, we specify the interval (in seconds) to call the timer, and set the timer to loop.<\/p>\n\n\n\n
One thing we need to be careful of, though, is the possibility of our object being destroyed between two timer invocations, potentially leading to a crash if a reference to our object is left dangling. To fix this, we need to remove the timer.<\/p>\n\n\n\n
Given that we set the timer during BeginPlay, it makes sense to clear the timer during EndPlay. EndPlay will be called whenever GameMode either ends play or is destroyed, so we can safely cancel the timer during its implementation.<\/p>\n\n\n\n
With GameMode set as the default game mode, the UI is created when the game begins to play, and the timer delegate executes every five seconds to switch the visibility of the widgets between true and false.<\/p>\n\n\n\n
When you close the game, EndPlay clears the timer reference, avoiding any problems.<\/p>\n\n\n\n
Attaching function calls to Slate events<\/h1>\n\n\n\n
While creating buttons is all well and good, at the moment, any UI element you add to the player’s screen just sits there without anything happening, even if a user clicks on it. We don’t have any event handlers attached to the Slate elements at the moment, so events such as mouse clicks don’t actually cause anything to happen.<\/p>\n\n\n\n
Getting ready<\/h1>\n\n\n\n
This recipe shows you how to attach functions to these events so that we can run custom code when they occur.<\/p>\n\n\n\n
How to do it…<\/h1>\n\n\n\n
- Create a new GameModeBase subclass called ClickEventGameMode:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/ee48dd37-65bb-47a8-aab4-41abb8f4e351.png\")
<\/figure>\n\n\n\n- From the ClickEventGameMode.h file, add the following functions and private members to the class:<\/li><\/ol>\n\n\n\n
#pragma once
#include \"CoreMinimal.h\"
#include \"GameFramework\/GameModeBase.h\"
#include \"SlateBasics.h\"<\/strong>
#include \"ClickEventGameMode.generated.h\"
UCLASS()
class CHAPTER_14_API AClickEventGameMode : public AGameModeBase
{
GENERATED_BODY()
private:<\/strong>
TSharedPtr<SVerticalBox> Widget;<\/strong>
TSharedPtr<STextBlock> ButtonLabel;<\/strong>
public:<\/strong>
virtual void BeginPlay() override;<\/strong>
FReply ButtonClicked();<\/strong>
};<\/pre>\n\n\n\n- Within the .cpp file, add the implementation for BeginPlay:<\/li><\/ol>\n\n\n\n
void AClickEventGameMode::BeginPlay()
{
Super::BeginPlay();
Widget = SNew(SVerticalBox)
+ SVerticalBox::Slot()
.HAlign(HAlign_Center)
.VAlign(VAlign_Center)
[
SNew(SButton)
.OnClicked(FOnClicked::CreateUObject(this, &AClickEventGameMode::ButtonClicked))
.Content()
[
SAssignNew(ButtonLabel, STextBlock)
.Text(FText::FromString(TEXT(\"Click me!\")))
]
];
auto player = GetWorld()->GetFirstLocalPlayerFromController();
GEngine->GameViewport->AddViewportWidgetForPlayer(player, Widget.ToSharedRef(), 1);
GetWorld()->GetFirstPlayerController()->bShowMouseCursor = true;
auto pc = GEngine->GetFirstLocalPlayerController(GetWorld());
EMouseLockMode lockMode = EMouseLockMode::DoNotLock;
auto inputMode = FInputModeUIOnly().SetLockMouseToViewportBehavior(lockMode).SetWidgetToFocus(Widget);
pc->SetInputMode(inputMode);
}<\/pre>\n\n\n\n- Also, add an implementation for ButtonClicked():<\/li><\/ol>\n\n\n\n
FReply AClickEventGameMode::ButtonClicked()
{
ButtonLabel->SetText(FString(TEXT(\"Clicked!\")));
return FReply::Handled();
}<\/pre>\n\n\n\n- Compile your code and launch the editor.<\/li>
- Override the game mode in World Settings to be ClickEventGameMode.<\/li>
- Preview this in the editor and verify that the UI shows a button that changes from Click Me! to Clicked! when you use the mouse cursor to click on it:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"https:\/\/learning.oreilly.com\/library\/view\/unreal-engine-4x\/9781789809503\/assets\/72e77d50-3b49-4973-b4ac-bddae6bbe8cc.png\")
<\/figure>\n\n\n\nButton displays Clicked! after being clicked\n\n<\/p>\n\n\n\n
How it works…<\/h1>\n\n\n\n
As with most of the recipes in this chapter, we use GameMode to create and display our UI to minimize the number of classes that are extraneous to the point of the recipe that you need to create.<\/p>\n\n\n\n
Within our new game mode, we need to retain references to the Slate Widgets that we create so that we can interact with them after their creation.<\/p>\n\n\n\n
As a result, we create two shared pointers as member data within our GameMode \u2013 one to the overall parent or root widget of our UI, and the other to the label on our button, because we’re going to be changing the label text at runtime later.<\/p>\n\n\n\n
We override BeginPlay, as it is a convenient place to create our UI after the game has started, and we will be able to get valid references to our player controller.<\/p>\n\n\n\n
We also create a function called ButtonClicked. It returns FReply, a struct indicating if an event was handled. The function signature for ButtonClicked is determined by the signature of FOnClicked, a delegate that we will be using in a moment.<\/p>\n\n\n\n
Inside our implementation of BeginPlay, the first thing we do is call the implementation we are overriding to ensure that the class is initialized appropriately.<\/p>\n\n\n\n
Then, as usual, we use our SNew function to create VerticalBox, and we add a slot to it, which is centered.<\/p>\n\n\n\n
We create a new Button inside that slot, and we add a value to the OnClicked attribute that the button contains.<\/p>\n\n\n\n
OnClicked is a delegate property. This means that the Button will broadcast the OnClicked delegate any time a certain event happens (as the name implies in this instance, when the button is clicked).<\/p>\n\n\n\n
To subscribe or listen to the delegate, and be notified of the event that it refers to, we need to assign a delegate instance to the property.<\/p>\n\n\n\n
- Also, add an implementation for ButtonClicked():<\/li><\/ol>\n\n\n\n
- Within the .cpp file, add the implementation for BeginPlay:<\/li><\/ol>\n\n\n\n
- From the ClickEventGameMode.h file, add the following functions and private members to the class:<\/li><\/ol>\n\n\n\n
- Create a new GameModeBase subclass called ClickEventGameMode:<\/li><\/ol>\n\n\n\n
- Play the level and verify that the UI toggles its visibility every five seconds.<\/li><\/ol>\n\n\n\n
- Inside World Settings, override the level’s Game Mode to be our AToggleHUDGameMode:<\/li><\/ol>\n\n\n\n
- Implement EndPlay:<\/li><\/ol>\n\n\n\n
- Implement BeginPlay with the following code in the method body:<\/li><\/ol>\n\n\n\n
- Add the following UPROPERTY and function definitions to the ToggleHUDGameMode.h file:<\/li><\/ol>\n\n\n\n