UIX 系统

UIX Canvas 示例（英语）

UIX 系统介绍

UIX 是 Resonite 的 UI（用户界面）系统。它允许你创建二维用户界面，在概念上类似于 Unity UI 系统。它是 Dash Menu（仪表板菜单）和 Scene Inspector（场景检查器）的基础。

你可以访问 UIX 分类（UIX 分类）查看构建 UIX 及其元素和组件的更多信息。

演示与入门

你可以使用 Developer Tool（开发者工具）在 Objects（物体）类别下生成一个非常有用的 UIX 演示，名为 UIX Canvas Blank 或 UIX Canvas Sample。它提供了布局、图像、按钮和滑块的示例。

另一个有用的起点是使用 Resonite Essentials 文件夹中 UI Presets 文件夹内的面板（Panel）。双击面板项将其生成出来，然后在此基础上进行编辑。

这有一篇 UIX 教程（UIX 教程）可以帮助你轻松组装 UIX。

Facets（面版）

UIX 有助于制作 Facets（面版），这是可自定义的 Dash（仪表盘）插件，能在用户空间中为用户提供更多功能。

基本概念

Canvases（画布）

一个 UI 需要在其根节点上有一个 Canvas（画布）组件。Canvas 定义了 UI 的尺寸。

利用 Canvas 概念的组件：

组件	描述
Canvas	所有元素的 UIX 根组件。
Nested Canvas （嵌套画布）	UIX 元素的二级根组件，主要用于与主 Canvas 保持一致性。

RectTransforms（矩形变换）

参与 UI 的每一个 Slot（插槽）都必须拥有一个 RectTransform 组件。当你附加其他 UI 组件时，RectTransform 会自动被添加。RectTransform 决定了该 UI 元素的边界，以可用总空间的比例表示——因此默认的 RectTransform 锚点位于 0,0 和 1,1。

利用 RectTransform 概念的组件：

组件	描述
RectTransform	设计用于容纳按钮、字段、滑块等 UIX 元素的容器。
RectTransformComputedProperties	一个可以返回 RectTransform 及其所有内容大小的组件。

Layouts（布局）

虽然你可以通过调整 RectTransform 手动定位元素，但通常你希望这是自动处理的。布局（Layout）会覆盖其 Slot 子对象的 RectTransform 设置。例如，Horizontal Layout（水平布局）组件会尝试将其子对象排列成一条水平线。

警告：

Layouts（布局）是根据子对象本身来计算子对象的位置和大小的。如果你修改、添加或删除一个子对象，但没有得到预期的结果，你可能需要强制重新计算。

目前唯一的方法是复制整个对象或仅复制持有布局的那个 Slot，然后删除原始对象。如果原始 Slot、组件或字段有 ProtoFlux 引用，你需要将它们重新引用到新复制的 Slot 上。

有时，对于某些 UIX 损坏的情况，你可以尝试以下操作：

由于布局依赖于子对象的顺序，而你无法在检查器中直接拖动子对象排序，你必须指定子对象的 OrderOffset 属性。通常这些值为 0，但如果你更改它，子对象将按 OrderOffset 递增排序；如果 OrderOffset 相同，则按 Slot 创建的时间排序。

同样，如果你更改了子对象的 OrderOffset，你的布局将不得不重新计算，这可能会遇到上述警告中的问题。

利用 Layout 概念的组件：

组件	描述
ArcLayout & ArcSegmentLayout	创建围绕中心呈弧形排列的布局，用于制作环形菜单。
GridLayout	形成具有行和列的大小区域网格的布局。
HorizontalLayout	以水平方式排列元素的布局。
IgnoreLayout	使层级中的对象被上方的布局忽略。
LayoutElement	控制此元素在布局中应如何成形、受控和放置。
OverlappingLayout	在同一空间内重叠或放置在另一个布局之上的布局。
VerticalLayout	以垂直方式排列元素的布局。

Graphics（图形）

要实际显示内容，你的 UI 需要一个或多个 Graphics 组件。Image（图像）将填充元素，可选择使用 Material（材质，定义外观）和 Sprite（精灵，定义形状）。其他元素包括用于显示文本的 Text（文本），以及用于隐藏子 UI 元素部分的 Mask（遮罩）。

利用 Graphics 概念的组件：

组件	描述
Image	为此图形 UIX 元素创建一个图像组件。
Mask	为此图形 UIX 元素创建一个遮罩。将一个子 Slot 元素作为焦点，并遮蔽其余部分。
Text	创建一个文本图形 UIX 元素，使用文本字符串作为元素内容。

Interaction（交互）

Interaction 组件允许输入。Button（按钮）会对悬停和按下做出视觉响应，并触发 Slot（以及子 Slot）上的其他组件。Slider（滑块）工作原理类似，但还可以控制子元素的 RectTransform 来移动它。

利用 Interaction 概念的组件：

组件	描述
Button	创建按钮组件元素，允许用户按下按钮以触发事件。
Checkbox	创建复选框组件元素，允许用户按下切换按钮以根据状态触发事件。
Slider	创建一个滑块，允许用户滑动滑块柄来改变数值。
TextField	创建一个文本字段，允许用户在其中输入文本。
ReferenceRadio & ValueRadio	创建单选组件数值持有者。

Utility（实用工具）

UIX 的 Utility 是辅助组件，可以帮助 UIX 正常工作或执行特定操作，例如控制幻灯片和平移，以及获取 Rect 驱动器。

利用 Utility 概念的组件：

组件	描述
AxisMultiViewportPanner	在 UIX 画布、面板或元素上制作一个包含不同元素的平移器（Panner）。

ProtoFlux 注意事项

能与 UIX 交互的 ProtoFlux 节点并不多，但以下是一些节点及其功能的列表：

• 对于与 UIX 上的 Button（按钮）交互，使用 Button Events 节点可以引用被按下的按钮并从该按钮触发事件。
• 对于与 TextField（文本字段）组件交互并监听用户输入文本时的操作，使用 UI Category（UI 分类）中的节点可能会有所帮助。