【Unity3D】UI Toolkit简介

1 前言

​ UI Toolkit 是一种基于 Web 技术的 GUI 框架，是为了解决 UGUI 效率问题而设计的新一代 UI 系统（UGUI 的介绍详见→UGUI概述）。与 UGUI 不同，UI Toolkit 没有采用 GameObject 的方式，而是参考了 Web 技术的 XML 和 CSS 方案。这意味着它只保存变化的数据，而不是整个界面状态，这使得它具有更高的效率。

​ UI Toolkit 的历史可以追溯到 Unity 2018 年发布的 UIElement，起初主要用于 Editor 编辑面板中的 UI 开发，自 Unity 2019 起，它开始支持运行时 UI，并更名为 UIToolkit，它以 Package 包（com.unity.ui）的形式存在，并在 Unity 2021.2 版本中，被官方内置在 Unity 中，与 UGUI 的地位相同。

​ UI Toolkit 的优点：

  • 跨平台
  • 高性能（一个 Draw Call 绘制所有 UI）
  • 自定义样式应用到任何元素
  • 复用性、灵活性更好
  • 配套的 UI 编辑工具（UI Builder）
  • 同使支持 Editor 和 Runtime

​ UI Toolkit 的缺点：

  • 不依赖 GameObject，难以制作放置在 3D 世界中的可互动 UI
  • 不支持 Shader，难以制作特效
  • 不支持 Animator 组件，无法制作实时循环动画（但有 Transition 动画系统）

​ UI Toolkit 内置案例见：【Window→UI Toolkit→Samples】，UI Tooolkit 容器介绍见→UI Toolkit容器 ，UI Tooolkit 元素介绍见→UI Toolkit元素，UI Tooolkit 样式选择器介绍见→UI Toolkit样式选择器。

2 UI Toolkit 简单使用

​ 1）创建 UI Document 对象

​ 在 Hierarchy 窗口右键，依次选择【UI Toolkit→UI Document】，创建 UI Document 对象，如下。

img

  • Panel Settings：定义一些全局的配置，比如字体、样式等信息，在创建 UI Document 对象时，会自动创建 PanelSettings.asset 文件；
  • Source Asset：待显示的页面资源
  • Sort Order：排序顺序，当有多个 UIDocument 对象时，序号越小的越先显示（在底部），序号越大的越后显示（在顶部）；

​ 2）创建 uxml 资源文件

​ 在 Assets 窗口右键，依次选择【Create→UI Toolkit→UI Document】，会生成一个 uxml 文件，重命名为 TestUXMLTemplate，并在 UIDocument 对象的 Inspector 窗口将 Source Asset 设置为 TestUXMLTemplate，如下。

img

​ 3）编辑 uxml 文件

​ 在 Assets 窗口双击 TestUXMLTemplate.uxml 文件，会打开 UI Builder 窗口，或者在菜单栏依次选择【Window→UI Toolkit→UI Builder】，也可以打开 UI Builder 窗口。将 VisualElement 拖拽到 Hierarchy 窗口，如下。

img

​ 选中 Hierarchy 窗口 中的 VisualElement，在 Inspector 窗口配置 Flex 和 Background，如下，按 Ctrl + S 键保存。

img

​ 4）查看效果

​ 回到 Game 窗口，显示效果如下。中间的立方体是事先添加的 Cube 对象，半透明的黄色是 UI Document 显示的效果。

img

3 UI Builder 窗口介绍

​ 在 Unity 2021.2 版本之前，需要在 Package Manager 窗口中安装 UI Builder，自 Unity 2021.2 版本开始 UI Builder 已内置在 Unity Editor 中。UI Builder 官方介绍见→UI Builder。

​ 在 Assets 窗口双击 uxml 文件，会打开 UI Builder 窗口，或者在菜单栏依次选择【Window→UI Toolkit→UI Builder】，也可以打开 UI Builder 窗口。

img

  • StyleSheets：样式窗口，用于管理元素样式；
  • Hierarchy：元素层级窗口，用于管理元素；
  • Library：容器和元素库；
  • Inspector：监视器窗口，用于配置容器和元素属性。

​ 滚动鼠标滑轮可以放大和缩小预览窗口大小；按鼠标中键拖拽，可以调整预览窗口的位置。点击 Viewport 窗口右上角的 Preview 按钮，可以查看运行态的 UI 界面。

img

4 样式属性介绍

​ 每个元素（或容器）都有以下样式属性，本节将逐一讲解这些属性。

img

4.1 StyleSheet（样式表）

​ 样式表模块中，可以添加和导出样式，并查看匹配到的样式选择器。样式选择器官方介绍详见→USS selectors。

img

4.2 Inlined Styles（内部样式）

​ 内部样式官方介绍详见→USS common properties，样式属性官方介绍详见→USS properties reference，Box model 如下。

img

4.2.1 Display（显示）

img

  • Opacity：不透明度，取值为 0 ~ 100。0 表示透明的，100 表示完全不透明。
  • Display：占位显示，取值有 flex、none。flex 表示尽可能占用剩余空间；none 表示不占用空间，其他元素（或容器）会挤占该元素（或容器）空间，导致该元素（或容器）不可见。
  • Visibility：可见性，取值有 visible、hidden。visible 表示元素（或容器）可见；hidden 表示元素（或容器）不可见，但该元素（或容器）的空间仍然占用着，其他元素不会挤占该元素（或容器）的空间。
  • Overflow：裁剪时的边距策略，取值有 visible、hidden。在子元素（或容器）边框超过当前容器的场景下，visible 表示当前容器的 Margin & Padding 不会约束超出部分的容器；hidden 表示当前容器的 Margin & Padding 会约束超出部分的容器。

​ 如下，容器的 overflow 属性设置为 visible，边距没有对文本生效。

img

4.2.2 Position（位置）

img

  • Position：取值有 Relative、Absolute，它们的区别是：Relative 表示在平铺排列后相对于自己的偏移；Absolute 表示相对于父容器的偏移，官方释义见→Relative and absolute positioning。
  • Left：元素（或容器）左侧的位置。
  • Top：元素（或容器）顶部的位置。
  • Right：元素（或容器）右侧的位置。
  • Bottom：元素（或容器）左侧的位置。

​ Position 的取值类型有：px、%、auto、initial，含义如下：

  • px：取值单位是像素。
  • %：取值单位是百分比。
  • auto：自动的，取值受 Flex、Align、样式选择器等影响。
  • initial：取值受 Flex、Align 等影响，不受样式选择器影响。

4.2.3 Flex（拉伸）

img

  • Basis：元素（或容器）的基础空间，取值类型有 px、%、auto、initial，含义同 4.2.2 节。
  • Shrink：如果水平方向有空余空间，元素（或容器）占用水平方向剩余空间的比例，取值有比例值、initial（不占用剩余空间）。
  • Grow：如果竖直方向有空余空间，元素（或容器）占用竖直方向剩余空间的比例，取值有比例值、initial（不占用剩余空间）。
  • Direction：子元素（或容器）排列的方向，取值有：column（从上往下）、column-reserve（从下往上）、row（从左往右）、row-reserve（从右往左）。
  • Wrap：子元素（或容器）的排列超过一行（或一列）后的排列策略，取值有 nowrap（不换行，截断显示）、wrap、wrap-reverse，

4.2.4 Align（对齐）

img

  • Align Items：auto、flex-start、flex-end、center、stretch
  • Justify Content：flex-start、flex-end、center、space-between、space-around

​ 说明：Align 的属性受 Flex 的 Direction 影响。

4.2.5 Size（尺寸）

img

  • Width：元素（或容器）的宽度，取值类型有 px、%、auto、initial，含义同 4.2.2 节。
  • Height：元素（或容器）的高度，取值类型有 px、%、auto、initial，含义同 4.2.2 节。
  • Max：元素（或容器）的最大宽度和高度，取值类型有 px、%、none（不限）、initial，含义同 4.2.2 节。
  • Min：元素（或容器）的最小宽度和高度，取值类型有 px、%、auto、initial，含义同 4.2.2 节。

4.2.6 Margin & Padding（外边距和内边距）

img

  • Margin：外边距，取值类型有 px、%、auto、initial，含义同 4.2.2 节。
  • Padding：内边距，取值类型有 px、%、auto、initial，含义同 4.2.2 节。

4.2.7 Text （文本）

img

  • Font：字体类型。
  • Font Asset：字体资源。
  • Font Style：字体样式，取值有 bold（粗体）、italic（斜体）。
  • Size：字体大小。
  • Color：字体颜色。
  • Align：字体对齐方式，取值有 left（居左）、center（水平居中）、right（居右）、upper（居上）、middle（竖直居中）、lower（居下）。
  • Wrap：字体包裹方式，即文字超过一行后的显示方式，取值有 normal（自动换行）、nowrap（截断显示）。
  • Outline Width：描边宽度。
  • Outline Color：描边颜色。
  • Text Shadow：文本阴影。
  • Letter Spacing：字符间隔，取值类型有 px、initial，含义同 4.2.2 节。
  • World Spacing：单词间隔，取值类型有 px、initial，含义同 4.2.2 节。
  • Paragraph Spacing：段落间隔，取值类型有 px、initial，含义同 4.2.2 节。

4.2.8 Background（背景）

img

  • Color：背景颜色。
  • Image：背景图片。
  • Image Tint：背景图片颜色。
  • Scale Mode：图片缩放模式，取值有 stretch-to-fill（宽度和高度都铺满，会破坏图片的原始宽高比）、scale-and-crop（宽度和高度都铺满，保持图片的原始宽高比，可能会裁剪图片）、scale-to-fit（宽度或高度铺满，保持图片的原始宽高比）。
  • Slice：切片比例，将图片划分为 9 宫格，4 个角的图片保持原始尺寸不变，可以用于对话框背景。

4.2.9 Border（边框）

img

  • Color：边框颜色。
  • Width：边框宽度，取值类型有 px、initial，含义同 4.2.2 节。
  • Radius：边框圆角，取值类型有 px、%、initial，含义同 4.2.2 节。

4.2.10 Transform（变换）

​ Transform 官方介绍见→USS transform。

img

  • Pivot Origin：变换作用的中心，取值类型有 px、%，含义同 4.2.2 节。
  • Translate：平移偏移量，取值类型有 px、%，含义同 4.2.2 节。
  • Scale：缩放偏移量，取值类型有比例数值、none、initial，含义同 4.2.2 节。
  • Rotate：旋转角度，取值单位有 deg（角度）、grad（梯度，100 grad = 90 deg）、rad（弧度）、turn（圈，1 turn = 360 deg）。

4.2.11 Cursor（光标）

img

  • Cursor Image：鼠标图片。

4.2.12 Transition Animations（过渡动画）

​ Transition Animations 官方介绍见→USS transition。

img

  • Property：动画作用的属性。
  • Duration：过渡动画执行的时间，取值类型有 s（秒）、ms（毫秒）、initial。
  • Easing：属性随时间的变化函数，类似于插值器。
  • Delay：动画延时执行时间，取值类型有 s（秒）、ms（毫秒）、initial。

5 UQuery

​ UQuery 主要用于查找子元素（或子容器），可以通过 type 和 name 查找。元素（或容器）的 Query 方法用于查找所有符合条件的子元素（或子容器），元素（或容器）的 Q 方法用于查找第一个符合条件的子元素（或子容器）。UQuery 官方介绍见→Find visual elements with UQuery。

5.1 UQuery 多元素查找（Query 方法）

​ 1）通过 type 查找

rootVisualElement.Query<Label>().ForEach(OnSelectedMultipleElements);

private void OnSelectedMultipleElements(Label obj) {
    obj.text = "xxx";
}

​ rootVisualElement 是根 VisualElement 容器，获取方式如下，下同。

VisualElement rootVisualElement = GetComponent<UIDocument>().rootVisualElement;

​ 2）通过 name 查找

rootVisualElement.Query("VisualElementName").ForEach(OnSelectedMultipleElements);

private void OnSelectedMultipleElements(VisualElement obj) {
    obj.style.backgroundColor = Color.black;
}

​ 3）通过 type 和 name 查找

rootVisualElement.Query<Label>("LabelName").ForEach(OnSelectedMultipleElements);
rootVisualElement.Query<Label>("LabelName").AtIndex(1).text = "yyy";

private void OnSelectedMultipleElements(Label obj) {
    obj.text = "xxx";
}

5.2 UQuery 单元素查找（Q 方法）

​ 1）通过 type 查找

Label label = rootVisualElement.Q<Label>();
label.text = "xxx";

​ 2）通过 name 查找

VisualElement visualElement = rootVisualElement.Q("VisualElementName");
visualElement.style.backgroundColor = Color.black;

​ 3）通过 type 和 name 查找

Label label = rootVisualElement.Q<Label>("LabelName");
label.text = "xxx";

6 UI Toolkit Debugger（调试器）

​ 1）打开 UI Toolkit Debugger

​ 在 UI Builder 窗口的右上角点击更多，展开后点击 UI Toolkit Debugger 即可打开调试窗口，也可以通过【Window→UI Toolkit→Debugger】打开调试窗口。

img

​ 2）查看 Box model

​ 点击 Show Layout 按钮，可以看到画布的元素布局边界，如下。

img

​ 选中元素（或容器），在 Debugger 窗口可以看到 Box model 等信息，如下。点击 Pick Element 按钮，可以在 Viewport 窗口拾取元素信息。

img

​ 声明：本文转自【Unity3D】UI Toolkit简介。

posted @ 2023-10-18 21:34  little_fat_sheep  阅读(415)  评论(1)  编辑  收藏  举报