Unreal Engine 4：学习笔记（七）Widget

短命女 2022-05-17 00:06 226阅读 0赞

与Widget相关的主要有三个组件，分别是Widget Blueprint、UWidgetComponent、UWidgetInteractionComponent，下面将分别讲讲它们功能及它们之间的联系。

## Widget Blueprint ##

Widget Blueprint是基于UUserWidget创建的，UUserWidget的类层级结构如下：

UObject-+
            |-UVisual-+
                      |-UWidget-+
                                |-UUserWidget

> UUserWidget  
> The user widget is extensible by users through the WidgetBlueprint.
> 
> UWidget  
> This is the base class for all wrapped Slate controls that are exposed to UObjects.
> 
> UVisual  
> The base class for elements in UMG: slots and widgets.

通过  Add New -> User Interface -> Widget Blueprint，可以创建一个Widget Blueprint，将其命名为“login widget”，在它上面摆放好UI元素后就可以使用它了。

![70][]

参考文档：  
[https://docs.unrealengine.com/en-US/Engine/UMG/UserGuide/BestPractices][https_docs.unrealengine.com_en-US_Engine_UMG_UserGuide_BestPractices]

下面是在Level Blueprint中使用刚才创建好的login widget的一种方式，在Level Blueprint、Character Blueprint等Blueprint中都可以使用这个Widget。

![70 1][]  
Create Widget节点创建Widget Blueprint的一个实例，Owning Player是Player Controller，若为空则使用默认Player Controller。Return Value就是Widget Blueprint的一个实例的引用。  
Login是创建的一个变量，用于存放对Widget Blueprint实例的引用，在Level被销毁时，可以使用这个变量直接删除Widget Blueprint的实例。  
Add to Viewport 是将Widget Blueprint的实例显示到屏幕上。  
Set Input Mode有三种：  
**Set Input Mode Game and UI**     即能操作游戏控件，又能操作UI控件  
**Set Input Mode Game Only**       只能操作游戏控件  
**Set Input Mode UIOnly**          只能操作UI控件  
Remove from Parent  使Widget Blueprint的实例不在屏幕上显示

其它的用的设置节点：

Set Show Mouse Cursor    是否显示鼠标  
Add Child     将一个Widget Blueprint的实例添加到另一个Widget Blueprint的实例上。  
Remove Child   将一个Widget Blueprint的实例从另一个Widget Blueprint的实例上删除。  
Enable Input     允许鼠标输入。  
  
 在代码中创建、添加、删除Widget Blueprint的方式：

#include "Blueprint/UserWidget.h"
    
    // NewWidgetClass is TSubclassOf<UUserWidget>
    UUserWidget* CurrentWidget = CreateWidget<UUserWidget>(GetWorld(), NewWidgetClass); 
    CurrentWidget->AddToViewport();
    // CurrentWidget->RemoveFromViewport();
    CurrentWidget->RemoveFromParent();

在代码中设置输入模式的方式：

#include "GameFramework/PlayerController.h"
    
    SetInputMode(FInputModeGameAndUI());
    SetInputMode(FInputModeUIOnly());
    SetInputMode(FInputModeGameOnly());

参考文档：  
[https://docs.unrealengine.com/en-US/Engine/UMG/UserGuide/CreatingWidgets][https_docs.unrealengine.com_en-US_Engine_UMG_UserGuide_CreatingWidgets]

##    UWidgetComponent ##

如果想把Widget Blueprint放置到3D世界中显示，则需要在UWidgetComponent中设置Widget Blueprint。

> The widget component provides a surface in the 3D environment on which to render widgets normally rendered to the screen. Widgets are first rendered to a render target, then that render target is displayed in the world.

参考文档：  
[https://docs.unrealengine.com/en-US/Engine/Components/Widget][https_docs.unrealengine.com_en-US_Engine_Components_Widget]

## UWidgetInteractionComponent ##

如果想与UWidgetComponent中设置的Widget Blueprint进行交互，就需要UWidgetInteractionComponent来解决。

> This is a component to allow interaction with the Widget Component. This class allows you to simulate a sort of laser pointer device, when it hovers over widgets it will send the basic signals to show as if the mouse were moving on top of it.  
> You'll then tell the component to simulate key presses, like Left Mouse, down and up, to simulate a mouse click.
> 
> If you are using a Widget Component to display UI that exists in 3D in your game world and you want to allow players to interact with that widget, the Widget Interaction component provides a way for that interaction to occur.
> 
> The Widget Interaction component performs a Raycast to see if it hits a Widget Component placed in the world and if it hits one, you can set up rules to determine how to interact with it.  
> The interaction is performed by simulating a defined key press, for example if a Button can be clicked on with the Left Mouse Button, you could tell other forms of input to simulate a Left Mouse Button click (controller button press, motion controller trigger press, etc.).

参考文档：  
[https://docs.unrealengine.com/en-US/Engine/UMG/UserGuide/WidgetInteraction][https_docs.unrealengine.com_en-US_Engine_UMG_UserGuide_WidgetInteraction]  
[https://docs.unrealengine.com/en-US/Engine/UMG/HowTo/VirtualKeyboards][https_docs.unrealengine.com_en-US_Engine_UMG_HowTo_VirtualKeyboards]

[70]: /images/20220517/873ed23476f7461fa2061d26970fa182.png
[https_docs.unrealengine.com_en-US_Engine_UMG_UserGuide_BestPractices]: https://docs.unrealengine.com/en-US/Engine/UMG/UserGuide/BestPractices
[70 1]: /images/20220517/9d94601cf95541d28a070735c9268eab.png
[https_docs.unrealengine.com_en-US_Engine_UMG_UserGuide_CreatingWidgets]: https://docs.unrealengine.com/en-US/Engine/UMG/UserGuide/CreatingWidgets
[https_docs.unrealengine.com_en-US_Engine_Components_Widget]: https://docs.unrealengine.com/en-US/Engine/Components/Widget
[https_docs.unrealengine.com_en-US_Engine_UMG_UserGuide_WidgetInteraction]: https://docs.unrealengine.com/en-US/Engine/UMG/UserGuide/WidgetInteraction
[https_docs.unrealengine.com_en-US_Engine_UMG_HowTo_VirtualKeyboards]: https://docs.unrealengine.com/en-US/Engine/UMG/HowTo/VirtualKeyboards