[UE4]UMG使用實例(C++)

Keywords：UE4、UMG、C++、Widget、Demo、Example、示例、實例、例子、UI

兩年前寫過一篇C++操控UMG藍圖的文章，當時寫的有點亂，非核心的東西寫了不少，干擾閱讀（當時自己剛學UE4，完全懵逼）。另外最新版本中，UMG不需要在Build.cs中添加配置，默認即可。

假設新建的測試工程叫：UMGTest。實現一個簡單的功能：點擊按鈕，動態替換掉按鈕上的背景圖片。

UMG使用步驟如下：

1，創建自定義的UMG C++類。

在UE4編輯器中點擊：File -》 New C++ Class。

彈出的對話框中，勾選Show All Classes，並找到UserWidget，選中後再點擊Next。表示選擇UserWidget作為我們創建的C++ class的父類。

起好名字（這裡命名為：MyUserWidget），點擊創建

2，創建UMG藍圖

在內容瀏覽器中，右鍵點擊：User Interface -》 Widget Blueprint。

修改藍圖名稱並保存。這裡命名為：NewWidgetBlueprint。

然後雙擊打開UMG藍圖，拖拽一個Button組件到編輯視圖中。假設給這個Button命名為：BtnChangeImg。

並設置按鈕的大小，這裡設置為和圖片素材一樣的大小

再拖拽一個Image組件到這個Button內

並設置Image組件的大小

然後切換到Graph視圖

然後再點擊Class Settings

再找到Parent Class，設置為之前創建的C++類：MyUserWidget。

3，添加圖片資源

我這裡使用兩張PNG圖片，導入UE4即可。

4，編寫自定義UserWidget的C++代碼

添加需要的頭文件，比如我們在頭文件中使用了UImage，那麼需要指明這個UImage所在的頭文件。例如：

#include "Components/Image.h"

具體代碼如下：

UMGTestGameModeBase.h

// Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h"#include "GameFramework/GameModeBase.h"#include "UMGTestGameModeBase.generated.h"/** * */UCLASS()class UMGTEST_API AUMGTestGameModeBase : public AGameModeBase{ GENERATED_BODY()public: AUMGTestGameModeBase();protected: virtual void BeginPlay() override;private: //UMG藍圖的實例對象，用於顯示在遊戲的Viewport中UUserWidget* MyWidgetInstance;};

UMGTestGameModeBase.cpp

// Fill out your copyright notice in the Description page of Project Settings.#include "UMGTestGameModeBase.h"#include "Blueprint/UserWidget.h"AUMGTestGameModeBase::AUMGTestGameModeBase(){ MyWidgetInstance = NULL;}void AUMGTestGameModeBase::BeginPlay(){ //檢測Widget對象是否存在，如果存在則移除掉。 if (MyWidgetInstance) { MyWidgetInstance->RemoveFromViewport(); MyWidgetInstance = nullptr; } //載入自定義UMG的class，通過這個class創建Widget對象，並顯示在界面中。 if (UClass* MyWidgetClass = LoadClass<UUserWidget>(NULL, TEXT("WidgetBlueprint/Game/NewWidgetBlueprint.NewWidgetBlueprint_C"))) { if (APlayerController* PC = GetWorld()->GetFirstPlayerController()) { MyWidgetInstance = CreateWidget<UUserWidget>(PC, MyWidgetClass); if (MyWidgetInstance) { MyWidgetInstance->AddToViewport(); } } }}

MyUserWidget.h

// Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h"#include "Blueprint/UserWidget.h"#include "Components/Image.h"#include "MyUserWidget.generated.h"/** * */UCLASS()class UMGTEST_API UMyUserWidget : public UUserWidget{ GENERATED_BODY()public: UMyUserWidget(const FObjectInitializer& ObjectInitializer);protected: virtual void NativeConstruct() override; UFUNCTION() void OnBtnChangeImgClick();private: //英雄頭像的顯示圖片 UImage* HeroIcon; //兩張圖片素材 UTexture2D* TexHero1; UTexture2D* TexHero2; //顯示狀態標識 int ImgFlag;};

MyUserWidget.cpp

// Fill out your copyright notice in the Description page of Project Settings.#include "MyUserWidget.h"#include "Components/Button.h"#include "Engine/Texture2D.h"UMyUserWidget::UMyUserWidget(const FObjectInitializer& ObjectInitializer) : Super(ObjectInitializer){ HeroIcon = NULL; TexHero1 = NULL; TexHero2 = NULL; ImgFlag = 0;}void UMyUserWidget::NativeConstruct(){ Super::NativeConstruct(); //根據組件ID查找Image組件 if (UImage* img = Cast<UImage>(GetWidgetFromName(FName(TEXT("ImgHero"))))) { HeroIcon = img; } //根據組件ID查找Button組件，並為其添加Click回調事件 if (UButton* btn = Cast<UButton>(GetWidgetFromName("BtnChangeImg"))) { FScriptDelegate Del; Del.BindUFunction(this, "OnBtnChangeImgClick"); btn->OnClicked.Add(Del); } //載入圖片資源 if (TexHero1) { //如果已經載入過，則先銷毀掉 TexHero1->ConditionalBeginDestroy(); TexHero1 = NULL; GetWorld()->ForceGarbageCollection(true); } TexHero1 = LoadObject<UTexture2D>(NULL, TEXT("Texture2D/Game/pic_01.pic_01")); if (TexHero2) { TexHero2->ConditionalBeginDestroy(); TexHero2 = NULL; GetWorld()->ForceGarbageCollection(true); } TexHero2 = LoadObject<UTexture2D>(NULL, TEXT("Texture2D/Game/pic_02.pic_02"));}void UMyUserWidget::OnBtnChangeImgClick(){ //切換顯示圖片 if (HeroIcon && TexHero1 && TexHero2) { HeroIcon->SetBrushFromTexture(ImgFlag ? TexHero1 : TexHero2); ImgFlag = ImgFlag == 0 ? 1 : 0; }}

最終效果

按Shift+F1切換到游標顯示模式，然後點擊按鈕，就可以切換圖片。

完整工程下載地址：

http://pan.baidu.com/s/1i5em6TR

推薦閱讀：