UE4 C + + (12): UMG learning

10/16/2020

UMG

  • UMG is usually used for UI interface
  • UMG needs to add modules
  • UMG usually uses UUserWidget

C + + UserWidget

#include "Blueprint/UserWidget.h"

UPROPERTY(EditAnywhere,BlueprintReadOnly,Category = "UMG Game")
TSubclassOf<UUserWidget> StartingWidgetClass;

UPROPERTY()
UUserWidget* CurrentWidget;


if (CurrentWidget != nullptr)
{
	CurrentWidget->RemoveFromViewport(); 
	CurrentWidget = nullptr;
}
if (NewWidgetClass != nullptr)
{
	CurrentWidget = CreateWidget<UUserWidget>(GetWorld(), NewWidgetClass);
	if (CurrentWidget != nullptr)
	{
		CurrentWidget->AddToViewport();
	}
}
  • CreateWidget creation module
  • Add/RemoveToViewport: add the UserWidget to the view, usually the GameViewportClient in the World

UserWidget in blueprint

Design window

Behavior

Buttons and text have Behavior attribute

  • Tool Tip Text: when the mouse is placed, this button will display a prompt
  • IsEnabled: whether the key can be pressed
  • Visibility: whether the button is visible or invisible and will not be pressed
  • Bind: refers to the trigger function, that is, it can only work when conditions are met

Event window

The event window is usually related to the event of a control, such as the press and release of a button

Similar to the events in the blueprint class

Nested widgets

Widgets can be nested with each other

There are three Widgets here. The green box represents one, the overall screen represents one, and the one on the left also represents one!

Widget and C + + interaction

FWAffectWidget has one picture and three buttons. Firstly, this Widget blueprint class needs to inherit a C + + control class and UUserWidget class indirectly

C + + get

UPROPERTY(Meta = (BindWidget)) //Get button 1 in blueprint directly
	UButton* ButtonOne;		
bool UFWAffectWidget::Initialize()
{
	if (!Super::Initialize()) return false;
	//Method 1
	RootPanel = Cast<UCanvasPanel>(GetRootWidget());	//Get root control
	if (RootPanel) 
	{
		BGImage = Cast<UImage>(RootPanel->GetChildAt(0));	//BGImage control with subscript 1
	}
	//Method 2
	UButton* ButtonTwo = (UButton*)GetWidgetFromName(TEXT("ButtonTwo"));

	//Bind button event method 1:
	ButtonOne->OnClicked.__Internal_AddDynamic(this,&UFWAffectWidget::ButtonOneEvent,FName("ButtonOneEvent"));

	//Binding event method 2: delegate fsscriptdelegate
	FScriptDelegate ButTwoDel;
	ButTwoDel.BindUFunction(this, "ButtonTwoEvent");
	ButtonTwo->OnReleased.Add(ButTwoDel);


	return true;
}
  • Reflection get control
  • Subscript acquisition of root component
  • Get by name

Creating UImage in C + +

UImage* DynImage; //Create UImage
void UFWAffectWidget::ButtonTwoEvent()
{
	//
	if (DynImage) return;
	
	//Create Widget method 2
	DynImage = WidgetTree->ConstructWidget<UImage>(UImage::StaticClass());
	//Add new control
	UCanvasPanelSlot* DynImageSlot = RootPanel->AddChildToCanvas(DynImage);
	DynImageSlot->SetAnchors(FAnchors(0.0f));
	DynImageSlot->SetOffsets(FMargin(244.0f, 268.0f, 100.0f, 100.0f));
}
  • Widgettree - > constructwidget: create UIImage or other controls
  • UCanvasPanelSlot: get the Slot property of the control, and you can set the position, anchor point, etc

C + + destroy UImage:

if (!DynImage) return;
	
RootPanel->RemoveChild(DynImage);
//DynImage->RemoveFromParent();

DynImage->ConditionalBeginDestroy(); //recycling
DynImage = NULL;

supplement

HUD

Usually, when initializing GameMode, we will specify HUD class. This class is usually similar to UserWidget, but it can only simply draw line segments, matrices, textures and materials

UCLASS()
class TESTTP_API ATestHUD : public AHUD
{
	GENERATED_BODY()
public:
	// Add the font attribute (then we set the font type in the blueprint editor)
	UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = HUDFont) 
		UFont* hudFont;
	
	// The following overloaded function will be called once per frame to render the font in the definition of this function
	virtual void DrawHUD() override;
};

void ATestHUD::DrawHUD()
{
	// Call the parent class DrawHUD() function first
	Super::DrawHUD();
	// The next thing is to render
	// Here is a blue line drawn from (200300) to (400500):
	DrawLine(200, 300, 400, 500, FLinearColor::Blue);
	// Write a line of text below (the parameters are text, position, font, zoom and color respectively):
	DrawText("UE4 is very interesting!", FLinearColor::White, 100,100,hudFont);
}

Slate framework

Slate is a UI framework completed by C + +. UMG is a UI framework further encapsulated by UE4 on the basis of slate. UMG has a simple graphical interface and event interface, which is easier to understand and operate. However, if you look at the source code carefully, you will find that there are about Slate C + + functions

summary

  • Widget s can be added to the Viewport
  • Widgets can be nested with each other

reference material

UE4 UMG

Tags: UE4

Posted by webmaster1 on Wed, 11 May 2022 16:50:47 +0300