Week4 — UMG 界面系统¶

主要介绍UMG界面。

UMG简介¶

UMG是Unreal Motion Graphics的缩写，是UE4中的一种用于创建用户界面的工具。UMG是基于Slate框架的，Slate是UE4中的一种用于创建用户界面的工具，UMG是Slate的一个高级封装。

Widget Blueprint 创建流程¶

创建一个 UMG 界面的标准步骤：

1. Content Browser 右键 → User Interface → Widget Blueprint
2. 选择父类（默认 UserWidget，也可指定自定义 C++ 基类）
3. 在 Designer 面板中拖拽控件、设置锚点和布局
4. 在 Graph 面板中编写交互逻辑
5. 在 GameMode 或 PlayerController 中通过 CreateWidget 实例化并 AddToViewport

1
2
3
4
5
6
7
8
9

// C++ 中创建并显示 Widget
if (HUDWidgetClass)
{
    HUDWidget = CreateWidget<UMyUserWidget>(GetWorld(), HUDWidgetClass);
    if (HUDWidget)
    {
        HUDWidget->AddToViewport();
    }
}

UMG编辑器¶

UMG编辑器界面主要组成：

• Palette：用于选择控件的面板
• Hierarchy：显示控件的层级关系
• Details：显示控件的属性，可以修改控件的属性或者事件
• Graph：显示控件的事件
• Viewport：显示控件的预览
• Animation：显示控件的动画

常用控件¶

布局容器¶

UMG 的布局系统依赖 容器（Panel Widget） 来组织子控件：

• Canvas Panel：默认容器，使用锚点（Anchor）+ 偏移量进行绝对/相对定位
• Horizontal Box：水平排列子控件，支持 Slot 的 Fill/Size 属性控制比例
• Vertical Box：垂直排列子控件，用法同 Horizontal Box
• Overlay：子控件层叠显示，后添加的在上层
• Grid Panel：网格布局，指定行列放置子控件
• Size Box：约束子控件的最小/最大尺寸
• Scale Box：自动缩放子控件以适应可用空间

UMG蓝图制作要点¶

• 元素展现：通过图片文字等元素展现UI
• 交互体验：使用按钮滑动条输入框等控件实现交互
• 布局调整和适配：使用布局控件和锚点实现UI的适配，如使用四向拉伸的锚点实现UI的适配
• 功能实现：使用蓝图实现UI的功能，如preconstruct、construct、oninitilize等事件

还可以通过代码的方式实现UI的逻辑，创建一个继承自UserWidget的C++类，然后在UMG中把Class Citing设置为这个类，此时父类的事件会自动绑定到UMG中。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

UCLASS()
class UMyHUDWidget : public UUserWidget
{
    GENERATED_BODY()
public:
    // meta=(BindWidget) 要求 UMG 中必须存在同名控件
    UPROPERTY(BlueprintReadOnly, meta=(BindWidget))
    UTextBlock* PlayerNameText;

    // BindWidgetOptional 允许 UMG 中不存在该控件
    UPROPERTY(BlueprintReadOnly, meta=(BindWidgetOptional))
    UProgressBar* HealthBar;

    // BindWidgetAnim 绑定 UMG 中的动画
    UPROPERTY(meta=(BindWidgetAnim))
    UWidgetAnimation* FadeInAnim;
};

设计完UI后，在GameMode中设置UI的显示，使用CreateWidget函数创建UI，使用AddToViewport函数将UI添加到视口中。

刷新函数绑定：使用BindWidget函数绑定UI中的控件，然后在蓝图中调用刷新函数；为了主动刷新，可以在蓝图中调用函数，然后在函数中刷新UI。

UI 输入模式¶

在显示 UI 时需要注意 输入模式 的切换：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 切换到 UI 输入模式（显示鼠标，游戏输入暂停）
FInputModeUIOnly InputMode;
InputMode.SetLockMouseToViewportBehavior(EMouseLockMode::DoNotLock);
PlayerController->SetInputMode(InputMode);
PlayerController->bShowMouseCursor = true;

// 切换回游戏输入模式
FInputModeGameOnly GameMode;
PlayerController->SetInputMode(GameMode);
PlayerController->bShowMouseCursor = false;