- We need to add the UMG module to our module’s dependencies.<\/li>
- Open up <YourModule>.build.cs, which in our case is Chapter_14.Build.cs, and add UMG to the following code:<\/li><\/ol>\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\", \"UMG\"<\/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- Create a new class based on the Slate Widget parent class (SCompoundWidget):<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/1a17774f-7605-4d12-ad72-aa538589875a.png\")
<\/figure>\n\n\n\n- When asked for a name, call it CustomButton.<\/li>
- Once created, add the following code to its declaration:<\/li><\/ol>\n\n\n\n
#pragma once
#include \"CoreMinimal.h\"
#include \"Widgets\/SCompoundWidget.h\"
class CHAPTER_14_API SCustomButton : public SCompoundWidget
{
SLATE_BEGIN_ARGS(SCustomButton)
: _Label(TEXT(\"Default Value\"))
, _ButtonClicked()
{}
SLATE_ATTRIBUTE(FString, Label)
SLATE_EVENT(FOnClicked, ButtonClicked)
SLATE_END_ARGS()
public:
void Construct(const FArguments& InArgs);
TAttribute<FString> Label;
FOnClicked ButtonClicked;
};<\/pre>\n\n\n\n- Implement the class with the following in the corresponding .cpp file:<\/li><\/ol>\n\n\n\n
#include \"CustomButton.h\"
#include \"SlateOptMacros.h\"
#include \"Chapter_14.h\"
void SCustomButton::Construct(const FArguments& InArgs)
{
Label = InArgs._Label;
ButtonClicked = InArgs._ButtonClicked;
ChildSlot.VAlign(VAlign_Center)
.HAlign(HAlign_Center)
[SNew(SButton)
.OnClicked(ButtonClicked)
.Content()
[
SNew(STextBlock)
.Text_Lambda([this] {return FText::FromString(Label.Get()); })
]
];
}<\/pre>\n\n\n\n- Create a second class, this time based on Widget:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/70f5329f-c812-4ee8-9108-2c186e2130c5.png\")
<\/figure>\n\n\n\n- Call this new class CustomButtonWidget and press Create Class. <\/li>
- Add the bold code in the following snippet to the CustomButtonWidget.h file:<\/li><\/ol>\n\n\n\n
#pragma once
#include \"CoreMinimal.h\"
#include \"Components\/Widget.h\"
#include \"CustomButton.h\"<\/strong>
#include \"SlateDelegates.h\"<\/strong>
#include \"CustomButtonWidget.generated.h\"
DECLARE_DYNAMIC_DELEGATE_RetVal(FString, FGetString);<\/strong>
DECLARE_DYNAMIC_MULTICAST_DELEGATE(FButtonClicked);
<\/strong>
UCLASS()
class CHAPTER_14_API UCustomButtonWidget : public UWidget
{
GENERATED_BODY()
protected:<\/strong>
TSharedPtr<SCustomButton> MyButton;<\/strong>
virtual TSharedRef<SWidget> RebuildWidget() override;<\/strong>
public:<\/strong>
UCustomButtonWidget();<\/strong>
\/\/multicast<\/strong>
UPROPERTY(BlueprintAssignable)<\/strong>
FButtonClicked ButtonClicked;<\/strong>
FReply OnButtonClicked();<\/strong>
UPROPERTY(BlueprintReadWrite, EditAnywhere)<\/strong>
FString Label;<\/strong>
\/\/MUST be of the form varnameDelegate<\/strong>
UPROPERTY()<\/strong>
FGetString LabelDelegate;<\/strong>
virtual void SynchronizeProperties() override;<\/strong>
};<\/pre>\n\n\n\n- Now, create the implementation for UCustomButtonWidget:<\/li><\/ol>\n\n\n\n
#include \"CustomButtonWidget.h\"
#include \"Chapter_14.h\"
TSharedRef<SWidget> UCustomButtonWidget::RebuildWidget()
{
MyButton = SNew(SCustomButton)
.ButtonClicked(BIND_UOBJECT_DELEGATE(FOnClicked, OnButtonClicked));
return MyButton.ToSharedRef();
}
UCustomButtonWidget::UCustomButtonWidget()
:Label(TEXT(\"Default Value\"))
{
}
FReply UCustomButtonWidget::OnButtonClicked()
{
ButtonClicked.Broadcast();
return FReply::Handled();
}
void UCustomButtonWidget::SynchronizeProperties()
{
Super::SynchronizeProperties();
TAttribute<FString> LabelBinding = OPTIONAL_BINDING(FString, Label);
MyButton->Label = LabelBinding;
}<\/pre>\n\n\n\n- Save your scripts and compile your code.<\/li>
- Create a new Widget Blueprint by right-clicking on the Content Browser and selecting User Interface and then Widget Blueprint:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/019ade72-7ac5-4639-84ec-59fbf045dcbd.png\")
<\/figure>\n\n\n\nYou can use the mouse wheel in the context menu to scroll to the User Interface section.<\/p>\n\n\n\n
- Open your new Widget Blueprint by double-clicking on it.<\/li>
- Find the Custom Button Widget in the Widget Palette:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/7ec28d12-c477-458d-bb1d-e22f94528e26.png\")
<\/figure>\n\n\n\n- Drag an instance of it out into the main area.<\/li>
- With the instance selected, change the Label property in the Details panel:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/5941564e-b55b-4f07-b642-a24507181855.png\")
<\/figure>\n\n\n\nVerify that your button has changed its label.<\/p>\n\n\n\n
- Now, we will create a binding to demonstrate that we can link arbitrary blueprint functions to the label property on our widget, which, in turn, drives the Widget’s textblock label.<\/li>
- Click on Bind to the right of the Label property and select Create Binding:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/e4e52462-a9f1-4ed4-a5fd-8cbe749f1003.png\")
<\/figure>\n\n\n\n- Within the graph that is now displayed, place a Get Game Time in Seconds node by right-clicking within the main area:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"https:\/\/learning.oreilly.com\/library\/view\/unreal-engine-4x\/9781789809503\/assets\/6f13155b-1c21-4fcc-9bd0-3e49c3ef08fc.png\")
<\/figure>\n\n\n\n- Link the return value from the Get Game Time node to the Return Value pin in the function:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"https:\/\/learning.oreilly.com\/library\/view\/unreal-engine-4x\/9781789809503\/assets\/6421b9a8-c550-46aa-a2c4-22482c2699f5.jpg\")
<\/figure>\n\n\n\n- A Convert Float to String node will be automatically inserted for you:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/508844dd-cbe0-48c4-a007-d9ecb4fbafff.jpg\")
<\/figure>\n\n\n\n- Compile the blueprint to ensure it is working correctly.<\/li>
- Next, open the Level Blueprints by clicking on the Blueprints button on the taskbar and then selecting Open Level Blueprint:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/a7e07af8-6327-4b45-9fd2-8b8ee267eba1.png\")
<\/figure>\n\n\n\n- To the right of the Event BeginPlay node, place a Create Widget node into the graph:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/287da0f3-30e0-48de-a7fb-7524a6bc0782.png\")
<\/figure>\n\n\n\n- Select the Class of widget to spawn it as the new Widget Blueprint that we created a moment ago within the editor:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/926ba980-6528-4778-8868-bf71d895ccb8.jpg\")
<\/figure>\n\n\n\n- Click and drag away from the Owning Player pin on the create widget node and place a Get Player Controller node:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/cd0d48b2-dc8f-4b71-805c-639f0510e06e.jpg\")
<\/figure>\n\n\n\n- Likewise, drag away from the return value of the Create Widget node and place an Add to Viewport node:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/e005b240-36a4-4bde-9cb9-fea79fb1ed0e.jpg\")
<\/figure>\n\n\n\n- Lastly, link the BeginPlay node to the execution pin on the create widget node:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2021\/01\/29583739-bbd2-4a2f-9750-d150412bd044.png\")
<\/figure>\n\n\n\n- Preview your game and verify that the widget we’ve displayed onscreen is our new custom button, with its label bound to the number of seconds that have elapsed since the game started:<\/li><\/ol>\n\n\n\n
![\"\"\/](\"https:\/\/learning.oreilly.com\/library\/view\/unreal-engine-4x\/9781789809503\/assets\/6e798818-3319-43c4-a5c3-24c71cc70708.png\")
<\/figure>\n\n\n\nButton displaying the elapsed time in the level\n\n<\/p>\n\n\n\n
How it works…<\/h1>\n\n\n\n
To use the UWidget class, our module needs to include the UMG module as one of its dependencies, because UWidget is defined inside the UMG module.<\/p>\n\n\n\n
The first class that we need to create, however, is our actual SWidget class.<\/p>\n\n\n\n
Because we want to aggregate two widgets together into a compound structure, we create our new widget as a CompoundWidget subclass. CompoundWidget allows you to encapsulate a widget hierarchy as a widget itself.<\/p>\n\n\n\n
Inside the class, we use the SLATE_BEGIN_ARGS and SLATE_END_ARGS macros to declare an internal struct called FArguments on our new SWidget. Within SLATE_BEGIN_ARGS and SLATE_END_ARGS, the SLATE_ATTRIBUTE and SLATE_EVENT macros are used. SLATE_ATTRIBUTE creates TAttribute for the type we give it. In this class, we declare a TAttribute called _Label, which is more specifically a TAttribute<FString>.<\/p>\n\n\n\n
SLATE_EVENT allows us to create member delegates that we can broadcast when something happens internally to the widget.<\/p>\n\n\n\n
In SCustomButton, we declare a delegate with the signature FOnClicked, called ButtonClicked.<\/p>\n\n\n\n
SLATE_ARGUMENT is another macro (which wasn’t used in this recipe) that creates an internal variable with the type and name you provide, appending an underscore to the start of the variable name.<\/p>\n\n\n\n
Construct() is the function that widgets implement to self-initialize when they are being instantiated. You’ll notice we also create TAttribute and FOnClicked instances ourselves, without the underscores. These are the actual properties of our object into which the arguments that we declared earlier will be copied.<\/p>\n\n\n\n
Inside the implementation of Construct, we retrieve the arguments that were passed to us in the FArgumentsstruct, and store them inside our actual member variables for this instance.<\/p>\n\n\n\n
We assign Label and ButtonClicked based on what was passed in, and then we actually create our widget hierarchy. We use the same syntax as usual for this with one thing to note, namely the use of Text_Lambda to set the text value of our internal text block. We use a lambda function to retrieve the value of our Label TAttribute using Get(), convert it into FText, and store it as our text block’s Text property.<\/p>\n\n\n\n
Now that we have our SWidget declared, we need to create a wrapper UWidget object that will expose this widget to the UMG system so that designers can use the widget within the WYSIWYG<\/strong> editor. This class will be called UCustomButtonWidget, and it inherits from UWidget rather than SWidget.<\/p>\n\n\n\n
The UWidget object needs a reference to the actual SWidget that it owns, so we place a protected member in the class that will store it as a shared pointer.<\/p>\n\n\n\n
A constructor is declared, as well as a ButtonClicked delegate that can be set in Blueprint. We also mirror a Label property that is marked as BlueprintReadWrite so that it can be set in the UMG editor.<\/p>\n\n\n\n
Because we want to be able to bind our button’s label to a delegate, we add the last of our member variables, which is a delegate that returns a String.<\/p>\n\n\n\n
The SynchronizeProperties function applies properties that have been mirrored in our UWidget class across to the SWidget that we are linked with.<\/p>\n\n\n\n
RebuildWidget reconstructs the native widget that UWidget is associated with. It uses SNew to construct an instance of our SCustomButton widget, and uses the Slate declarative syntax to bind the UWidget’s OnButtonClicked method to the ButtonClicked delegate inside the native widget. This means that when the native widget is clicked, the UWidget will be notified by having OnButtonClicked called.<\/p>\n\n\n\n
OnButtonClicked re-broadcasts the clicked event from the native button via the UWidget’s ButtonClicked delegate. This means that UObjects and the UMG system can be notified of the button being clicked without having a reference to the native button widget themselves. We can bind to UCustomButtonWidget::ButtonClicked so that we’re notified about this.<\/p>\n\n\n\n
OnButtonClicked then returns FReply::Handled() to indicate that the event does not need to propagate further. Inside SynchronizeProperties, we call the parent method to ensure that any properties in the parent are also synchronized properly.<\/p>\n\n\n\n
We use the OPTIONAL_BINDING macro to link the LabelDelegate delegate in our UWidget class to TAttribute, and, in turn, the native button’s label. It is important to note that the OPTIONAL_BINDING macro expects the delegate to be called NameDelegate based on the second parameter to the macro.<\/p>\n\n\n\n
OPTIONAL_BINDING allows the value to be overridden by a binding made via UMG, but only if the UMG binding is valid.<\/p>\n\n\n\n
This means that when UWidget is told to update itself, for example, because the user customizes a value in the Details panel within UMG, it will recreate the native SWidget if necessary, and then copy the values set in Blueprint\/UMG via SynchronizeProperties so that everything continues to work as expected.<\/p>\n","protected":false},"excerpt":{"rendered":"
The recipes in this chapter so far have shown you how t […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27,1],"tags":[26],"_links":{"self":[{"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/posts\/3254"}],"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=3254"}],"version-history":[{"count":3,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/posts\/3254\/revisions"}],"predecessor-version":[{"id":3288,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/posts\/3254\/revisions\/3288"}],"wp:attachment":[{"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Preview your game and verify that the widget we’ve displayed onscreen is our new custom button, with its label bound to the number of seconds that have elapsed since the game started:<\/li><\/ol>\n\n\n\n
- Lastly, link the BeginPlay node to the execution pin on the create widget node:<\/li><\/ol>\n\n\n\n
- Likewise, drag away from the return value of the Create Widget node and place an Add to Viewport node:<\/li><\/ol>\n\n\n\n
- Click and drag away from the Owning Player pin on the create widget node and place a Get Player Controller node:<\/li><\/ol>\n\n\n\n
- Select the Class of widget to spawn it as the new Widget Blueprint that we created a moment ago within the editor:<\/li><\/ol>\n\n\n\n
- To the right of the Event BeginPlay node, place a Create Widget node into the graph:<\/li><\/ol>\n\n\n\n
- A Convert Float to String node will be automatically inserted for you:<\/li><\/ol>\n\n\n\n
- Link the return value from the Get Game Time node to the Return Value pin in the function:<\/li><\/ol>\n\n\n\n
- Within the graph that is now displayed, place a Get Game Time in Seconds node by right-clicking within the main area:<\/li><\/ol>\n\n\n\n
- Now, create the implementation for UCustomButtonWidget:<\/li><\/ol>\n\n\n\n
- Create a second class, this time based on Widget:<\/li><\/ol>\n\n\n\n
- Implement the class with the following in the corresponding .cpp file:<\/li><\/ol>\n\n\n\n
- Create a new class based on the Slate Widget parent class (SCompoundWidget):<\/li><\/ol>\n\n\n\n