Unreal UIs and C++: Slate – Clone

Introduction

Slate is a UI framework that pre-dates UMG and Blueprints in Unreal. The Unreal editor itself is written using Slate.

When to use Slate, when to use UMG?

Some reasons for using Slate:

  • Creating Editor UI: Custom asset inspectors, windows and other visual tools used to have to be implemented using Slate. As of 4.22, Editor Utility Widgets can be written using UMG+Blueprints, but as far as I know, asset inspectors must still be written in Slate.
  • Need to implement low-level functionality that is not supported by any existing widgets. For example some complex graph-drawing might be better written in Slate than UMG C++.

It can be used to define UI layout in a somewhat unusual declarative syntax. Here’s how we could declare a Button with an icon and text side-by-side:

C++
SNew( SButton )
+ SButton::Slot()
[
	SNew( SHorizontalBox )
	+ SHorizontalBox::Slot()
		.VAlign( VAlign_Center )
		.HAlign( HAlign_Center )
	[
		SNew( SImage )
			.Image( MyIconBrush )
	]
	+ SHorizontalBox::Slot()
		.VAlign( VAlign_Center )
		.HAlign( HAlign_Fill )
	[
		SNew( STextBlock )
			.Text( FText::FromString( "Click me!" ) )
	]
]

Hopefully your experience with creating UIs in the Blueprint editor and with UMG in C++ should make some of this familiar.

  • SButton is the Slate button class
  • SButton::Slot() has properites the same as those you see in the Slot section of a Button` in the Blueprint editor.
  • SHorizontalBox is the Slate equivalent of UMG’s UHorizontalBox.

In fact, SButton is not the equivalent of UButton, UButton is a wrapper around SButton!

C++
class UButton : public UVisual
{
// ...
	/** Cached pointer to the underlying slate
	    button owned by this UWidget */
	TSharedPtr<SButton> MyButton;
};

Extending an Existing Slate Widget

I have found the easiest thing to do at first when learning Slate is to duplicate and extend an existing widget. For example let’s create a SImage that supports multiple images, drawn on top of each other.

Find SImage in the Unreal source code, and give it a read over.

Credit:@dansgamedevchannel6297