So! For the sake of future tutorials I plan to write here, I thought it be best to do a quick write up on creating a widget for Slate in C++ with Unreal Engine. I will link back to this then from other tutorials for the sake of time.

To start with this tutorial, let’s create a C++ class deriving from UObject as SCompoundWidget, the class we really want to inherit from doesn’t appear in the Choose Parent Class list in editor.

Compound Widgets

Creating a Parent Class

Next! Let’s use the template below, this is a standard template for any widget for Slate.

Obviously, you should name the class whatever you’d like, here I’m just using an arbitrary name of SNotificationButtons as it will be used in another tutorial.

The UObject class we’ve created will create a standard class inheriting from UObject - we’re just overriding that with the template below.

SCompoundWidget: This widget type is pretty much a raw, internal widget that isn’t exposed to UMG and has a construct method which includes a ChildSlot member. ChildSlot becomes out main area to write our slate code for this widget.

SLATE_BEGIN_ARGS(): This is a macro that creates a struct of variables and exposes them to InArgs in our construct function. On line 17, you can define defaults for each argument setup by prefixing the argument name with _

SLATE_ARGUMENT(): Is a macro to declare a slate argument/parameter, Arguments can only be values however you can also use SLATE_ATTRIBUTE() and pass in a function instead if you so choose.

SLATE_END_ARGS() is quite literally a closing brace }. It just closes of the struct created by SLATE_BEGIN_ARGS().

Let’s now setup our .cpp file and take a look at the construct method for SCompoundWidgets.

The first thing we’ll do is setup a standard Localization text namespace, just for some string wrangling later on.

Then we have our two Macros: BEGIN_SLATE_FUNCTION_BUILD_OPTIMIZATION() and END_SLATE_FUNCTION_BUILD_OPTIMIZATION()

these super long macros basically handle whether or not pragma is optimized depending on the platform and the build type. Honestly, they are magic, just wrap them around your Construct function ❤ :P

Our first line in our construct method, line 13 is taking the argument set by SLATE_ARGUMENT back in our header file, and assigning it to the WidgetName method.

In order to use this after, simply use WidgetName.Get(), as the TAttribute class has a getter that we should pull from.

Child Slot

The child slot of a SCompoundWidget is where the magic happens. I recommend looking at or searching for “ChildSlot” across UE4’s code base to get an idea of how slate code is structured. But essentially, SNew() and SAssignNew() are the two main widget creation methods and all things considered Slate is a little like JSON in syntax.

SNew() can be considered ‘create and forget’ as in, you spawn a widget without planning to access it later.

SAssignNew() will create a widget of class, and can then be saved for later in a member. The example below creates an SBorder widget and saves it as a shared pointer in the header.

This isn’t going to be a slate tutorial, however I plan on creating one on syntax and going a little more in depth — but then, all tutorials I’m doing will have some manner of Slate used and you can pick up more from future tutorials.

Lastly, let’s talk creation! So in another area say we spawn our widget using the SNew() Method, any of the arguments we specify in the header are now accessible as any of the .parameters written underneath like so:

One other note on slate. It’s picky, I mean… Really, really picky about formatting. VS will indent when you don’t want it to, and good luck pasting slate code. What I end up doing is pasting my slate, and then doing one Ctrl+Z to remove the ‘fixed’ indentation that VS applies.

If someone has some sort of VS extension that correctly handles Slate specific formatting please DM me on Twitter or Discord!

So that’s it! This is the basics of an SCompoundWidget, I will be referring back to this whenever I’m creating a widget in another tutorial and should prove to be a helpful resource if you need a quick template yourself.

Find this tutorial useful?

If you found my tutorials useful, consider becoming a Patron to support more!

Alessa ❤️