第22章介绍用户界面

介绍用户界面

注意:
本章的关卡和资源可以在 GitHub 上找到： https://github.com/AMZN-Olex/O3DEBookCode2111/tree/ch22_basic_ui

介绍

O3DE 带有自己的用户界面子系统 LyShine。系统的核心是在 LyShine Gem 中实现的（已在 MyProject 中启用），但为 LyShine 启用另外两个支持 Gem 也很有用。

例 22.1.启用 LyShine 及其支持 Gem

set(ENABLED_GEMS
  ...
  LyShine
  LyShineExamples     # new
  UiBasics            # new
)

注意:
LyShine 的官方参考可以在 https://www.o3de.org/docs/user-guide/interactivity/user-interface/ 找到

LyShineExamples 和 UiBasics Gem 提供了额外的画布示例和 UI 元素。它们的集合位于 O3DE 安装中，位于 Gems\UiBasics\Assets\UI\Slices\Library 和 Gems \LyShineExamples\Assets\UI\Canvases\LyShineExamples。

注意:
启用这些 Gem 后，在 Visual Studio 中或使用 CMake 重新构建项目，关闭 Asset Process 并再次打开它。它应该有几百个新资产要处理。否则，您将不会看到新的 UI 元素。

在本章中，我们将创建一个叠加层来显示两个数字。此叠加层将用于保存足球比赛的比分

加载 UI

用户界面工作首先使用 UI Canvas Asset Ref 组件加载 UI 资源。

在关卡中创建新实体。
添加 UI Canvas Asset Ref 组件。

分配画布或创建新画布。

提示:
您可以通过单击 Canvas pathname 属性旁边的最右侧图标按钮，从此组件打开 UI 编辑器。

翻转 Load automatically 或使用 C++ API 加载画布。

   UiCanvasAssetRefBus::Event(entityId, &UiCanvasAssetRefBus::Events::LoadCanvas);

在 UI Editor 中创建 Canvas

UI Editor 是 O3DE Editor 的工具之一。您可以通过主菜单使用 Tools→ UI Editor 来调出它。

这将打开带有空画布的 UI Editor。画布是一起绘制的 UI 元素的容器。在开始之前，让我们将新的空画布保存到我们的项目位置。我们会将其保存到 C：\git\book\MyProject\Assets\UI\hud.uicanvas。

注意:
该位置在项目及其 Gem 中是可选的。无论您将资产放在项目下还是某个 Gem 下，Asset Processor 都会找到该资产，但最好遵循一些标准。

左侧的 Hierarchy （层次结构）面板列出了 UI 实体的层次结构。基础系统使用 O3DE 实体和组件。Hierarchy panel （层次结构面板）实质上是 Entity Outliner 的另一个版本。让我们创建一个画布，其中元素放置在画布的顶部中间部分。

图 22.1.元素层次结构

右键单击 Hierarchy 中的空白区域，然后选择 New 和 Empty element。
双击此元素将其命名为 Root。它将用作所有其他 UI 元素的父元素。
右键单击 Root element（根元素），然后单击 New （新建）和 Element from Slice browser（切片浏览器中的元素）。
搜索 “panel” 并选择 “Panel.slice”。
右键单击面板元素，选择“新建”、“切片库中的元素”。从组 “UiBasics\Assets\UI\Slices\Library” 中选择 Text。
将文本元素重命名为“Score Text”。

提示:
元素的顺序决定了首先绘制哪个元素。首先绘制根元素，最后绘制叶元素。

我们有所需元素的轮廓，但面板太大，文本位于中心。移动和修改元素的方法是使用其 Transform2D 组件并通过 Mode 工具栏。

选择 “Root” 元素。
前往 properties 并找到 Transform 2D 组件。

在 Transform 2D （变换 2D）组件的底部，找到 Scale to device 属性，将其设置为“Scale to fit Y （uniformly）”（缩放以适应 Y （均匀））。这将使内容适合视区屏幕的大小。这意味着您不必担心设置像素值，并且可以将下面的任何元素视为与实际视区屏幕大小成正比的值。
然后选择 top middle anchor。它是 Anchors （锚点）部分下的一个小图标，在一个较大的灰色框内有一个白色框。

图 22.2.根元素