UE UMG①基本认识

本篇文章结合使用经验和chatGPT进行个人理解的梳理和总结,仅供参考。

widget坐标系

图源:在 UnrealEngine 中计算控件坐标 |让我们走出去 --- Calculating widget coordinate in UnrealEngine | LET US GO ABROAD (baemincheon.github.io)

在UE-UI的相关坐标系中,原点默认为左上角,原点水平向右为x递增,原点垂直向下为y递增。

控件坐标系

如图,默认控件的左上角为以自己为坐标系的原点,则右下角为(150,200)。

窗口坐标系

以运行时的窗口为准;因此,运行时假如改变了窗口大小,窗口坐标会及时发生变化。

屏幕坐标系

又称物理屏幕坐标系。实际使用的硬件显示屏所展示的屏幕。

UMG Slot(插槽)

插槽(Slots) 就是将各个控件绑定在一起的隐形粘合剂。更明确地说,在平板中,你必须首先创建一个插槽,然后 选择要在这个插槽中放置哪些控件。

插槽类似于盛放控件的容器,每种容器有对应的排列方式,使得其中的控件可以更好地统一管理。比如CanvasPanel(画布面板),主要根据锚点定位子控件;Overlay(覆层),主要根据对齐方式;GridPanel(网格面板),按照网格样式排列......

常用Slot

  • CanvasPanel(画布面板),主要根据锚点定位子控件,排版更加灵活自由,可以直接确定子控件位置和大小。
  • Overlay(覆层),主要根据对齐方式,可以快速定位相对于父布局的位置,比如左下方,中间等,并控制padding(填充)来调整距离。
  • GridPanel(网格面板),按照网格样式排列......

GameViewportWidgetSlot

  • GameViewportWidgetSlot 是一个用于管理和放置在游戏视口中的用户界面(UI)元素的类,这些元素可以是按钮、文本、HUD元素等。
  • 在UE中,视口通常指的是游戏窗口或屏幕的一部分,它是玩家看到游戏世界的窗口。
  • 在Unreal Engine的用户界面系统中,特别是使用UMG(Unreal Motion Graphics)创建的UI,GameViewportWidgetSlot 通常与 UGameViewportClient 类关联。UGameViewportClient 负责处理游戏视口内的所有渲染和用户输入,而 GameViewportWidgetSlot 则用于在这个视口中添加和配置UI元素。

在Unreal Engine 中使用 GameViewportWidgetSlot 时,控制的UI组件的位置和大小是相对于整个游戏视口的。这意味着设置一个UI组件的位置和大小时,是在考虑整个游戏窗口的尺寸作为参考。

GameViewportWidgetSlot 提供的属性如锚点(Anchors)、偏移(Offsets)和对齐(Alignment)等,都是基于整个视口来确定的。例如:

  • 锚点(Anchors) :这决定了UI组件是如何相对于视口的边界进行定位的。例如,如果设置锚点为视口的左上角,那么UI组件的位置将基于视口的左上角来计算。
  • 偏移(Offsets) :这些值(通常包括左、上、右和下)用来调整UI组件相对于其锚点的具体位置。
  • 对齐(Alignment) :这可以帮助控制UI组件的对齐方式,例如是否居中对齐于锚点等。

因此,当使用 GameViewportWidgetSlot 来布局UI组件时,是在控制这些组件相对于整个游戏视口的位置和大小,而不是仅仅相对于它们的父UI组件。这使得 GameViewportWidgetSlot 非常适合用于设计那些需要精确控制在整个游戏窗口中位置的UI元素,如HUD显示、游戏菜单等。

每个控件都有各自的GameViewportWidgetSlot吗?

在 Unreal Engine 中,并不是每个控件都会有一个 GameViewportWidgetSlot。事实上,GameViewportWidgetSlot 是一个特定类型的 slot,仅用于那些直接添加到游戏视口的控件。这种 slot 主要用于控制添加到视口的 Widget 如何在屏幕上定位和表现。通常,这涉及到最顶层的用户界面元素,如整个屏幕的覆盖层或者游戏的主菜单界面等。

对于一般的 UMG 控件(如按钮、文本框等),它们通常被放置在一个父 Widget 中,如 Canvas PanelVertical Box 等,而这些父 Widget 控制着子控件的布局和位置。这些子控件的 slot 类型通常是与其父容器相关的,例如 Canvas Panel SlotVertical Box Slot 等,而不是 GameViewportWidgetSlot

为什么 GameViewportWidgetSlot 是控制整个视口的?

GameViewportWidgetSlot 是用于直接与游戏视口交互的 Widgets 的 slot。当你将一个 Widget 添加到游戏视口时(例如,使用 Add to Viewport 节点),这个 Widget 通常是意图覆盖整个屏幕或者大部分屏幕的。因此,控制这个 Widget 如何在视口中定位变得非常重要,这就是 GameViewportWidgetSlot 的用途。

每个控件拥有不同的 GameViewportWidgetSlot 对象的原因

当你将多个 Widget 直接添加到视口时,每个 Widget 实际上都在视口中占据了一个 slot。每个这样的 slot 都可以独立控制其对应的 Widget。例如,你可以有一个全屏的游戏菜单和一个小的分数显示器,它们都添加到视口中,每个都可以有自己的 GameViewportWidgetSlot 来控制其位置和大小。这样,虽然它们都是直接与视口交互,但可以有不同的表现和布局。

访问插槽

按照惯例,所有与插槽相关的属性都位于 细节 面板中的 布局 类别下。你还会发现,控件所用的插槽类型会显示在括号中。

蓝图控制。

这些蓝图可以理解得更细致一些。图中,直接通过GameTitleBox小控件获取Slot。上文提到Slot相当于容器,控制的是子控件,这个"控制"在哪里体现呢?就在子控件的Layout设置上。因此,在实际的Slot我们无法直接调整所有的子控件,而是只能在每个子控件控制"相对于父布局的位置"。

所以图中节点获取的是父布局Slot,并且告诉它"我要在哪个位置"。

常见应用:改变控件位置

根据父对象slot类型

比如CanvasPanel类,有函数Set Position直接修改位置。

如果是Overlay,可以修改Alignment和Padding参数。

SetWidgetSlotPosition

Helper function to set the position in the viewport for the Slot.

Target is Game Viewport Subsystem

当使用SetWidgetSlotPosition函数并传入GameViewportWidgetSlot参数时,你实际上是在设置该UI组件在游戏视口中的绝对位置。这通常用于控制那些需要覆盖在游戏内容之上的UI元素,如HUD(Head-Up Display)、菜单或任何全屏界面。

那么如何获得GameViewportWidgetSlot呢?【缺失】

相关推荐
Bluesonli17 天前
第 22 天:多线程开发,提高 UE5 性能!
学习·游戏·ue5·虚幻引擎·unreal engine
Bluesonli1 个月前
第 16 天:游戏 UI(UMG)开发,打造主菜单 & 血条!
学习·游戏·ui·ue5·虚幻·unreal engine
学游戏开发的1 个月前
UE求职Demo开发日志#32 优化#1 交互逻辑实现接口、提取Bag和Warehouse的父类
c++·笔记·游戏引擎·unreal engine
Bluesonli1 个月前
第 14 天:UE5 C++ 与蓝图(Blueprint)交互!
c++·游戏·ue5·交互·unreal engine
学游戏开发的1 个月前
UE求职Demo开发日志#29 继续流程实现
笔记·游戏引擎·unreal engine
Bluesonli1 个月前
第 9 天:UE5 物理系统 & 碰撞检测全解析!
开发语言·学习·游戏·ue5·虚幻·unreal engine
Bluesonli1 个月前
第 10 天:UE5 交互系统,拾取物品 & 触发机关!
学习·游戏·ue5·虚幻·unreal engine
薛文旺1 个月前
UE虚幻引擎No Google Play Store Key:No OBB found报错如何处理
游戏引擎·虚幻·unreal engine
Bluesonli1 个月前
UE5 蓝图学习计划 - Day 9:数组与跨蓝图通信
学习·ue5·虚幻·虚幻引擎·unreal engine