Unreal UIs and C++: UWidgets

Create an UMG Widget, or subclass an existing UMG widget

In the previous tutorial we covered creating a C++ subclass of UUserWidget.

The alternative to this is to create a C++ subclass of an existing

Unreal UI Introduction Series

  1. An Introduction to Making UIs in Unreal
  2. Making UIs in Unreal with C++: Basics
    1. Creating C++-based UserWidgets
    2. Creating New UMG Widgets
    3. Creating New Slate Widgets (Coming soon)

Good for creating new compound widgets that you want to re-use everywhere

e.g. a button with an icon and text

RebuildWidget() is where you set up stuff

Look at existing widgets to see how they work

We can see inside the RebuildWidget() function for UBUtton It creates a new instance of the Slate class SButton.

TSharedRef<SWidget> UButton::RebuildWidget()
{
	MyButton = SNew(SButton)
		.OnClicked(BIND_UOBJECT_DELEGATE(FOnClicked, SlateHandleClicked))
		.OnPressed(BIND_UOBJECT_DELEGATE(FSimpleDelegate, SlateHandlePressed))
		.OnReleased(BIND_UOBJECT_DELEGATE(FSimpleDelegate, SlateHandleReleased))
		.OnHovered_UObject( this, &ThisClass::SlateHandleHovered )
		.OnUnhovered_UObject( this, &ThisClass::SlateHandleUnhovered )
		.ButtonStyle(&WidgetStyle)
		.ClickMethod(ClickMethod)
		.TouchMethod(TouchMethod)
		.IsFocusable(IsFocusable)
		;

	if ( GetChildrenCount() > 0 )
	{
		Cast<UButtonSlot>(GetContentSlot())->BuildSlot(MyButton.ToSharedRef());
	}
	
	return MyButton.ToSharedRef();
}

ExampleOverlay.h

// .h file
UCLASS()
class UExampleOverlay : public UOverlay
{
	GENERATED_UCLASS_BODY()
public:

#if WITH_EDITOR
	virtual const FText GetPaletteCategory() override;
#endif

protected:
	// UWidget interface
	virtual TSharedRef<SWidget> RebuildWidget() override;
	// End of UWidget interface
};

ExampleOverlay.cpp

// .cpp file
#define LOCTEXT_NAMESPACE "ExampleUMG"


TSharedRef<SWidget> UExampleOverlay::RebuildWidget()
{
	auto Result = Super::RebuildWidget();

	for (UPanelSlot* InSlot : Slots)
	{
	}

	return Result;
}

#if WITH_EDITOR
const FText UExampleOverlay::GetPaletteCategory()
{
	return LOCTEXT("ExampleUI", "ExampleOverlay");
}
#endif

In the next and final tutorial of the series, we will discuss how to create subclasses of Slate widgets.

Unreal UI Introduction Series

  1. An Introduction to Making UIs in Unreal
  2. Making UIs in Unreal with C++: Basics
    1. Creating C++-based UserWidgets
    2. Creating New UMG Widgets
    3. Creating New Slate Widgets (Coming soon)