Skip to main content

教程：UIX系统

教程

创建空画布 (Empty Canvas)

image.png

  1. 使用 Developer Tool（开发者工具），选择 Create New Wizard（新建向导） > Empty Object（空物体）。
  2. 在该物体上，点击 Attach Component（附加组件） > UIX > Canvas。
  3. 将物体的 Scale（缩放）在所有轴上更改为 0.001，以使物体大小更合理。
  4. 然后，你可以根据喜好更改 Canvas 的 Size（尺寸）的 x 和 y 值（以像素为单位）。
  5. 接下来，在同一个空物体上，点击 Attach Component > UIX > Graphics > Image。你可以更改图像的 Tint（色调）来改变画布的底色。
  6. 再次使用 Developer Tool，选择 Create New > Materials > UI > UI Unlit。
  7. 将材质的 ZWrite 属性更改为 On，并将 OffsetFactor 和 OffsetUnits 属性更改为 1。
  8. 抓取材质球并点击空物体的 Image 组件的 Material 插槽将其加载进去。这修复了“透视（bleed-through）”效应，该效应会导致重叠放置的不同 UIX 物体相互穿透显示。
  9. 你可能还希望使画布可被抓取（Attach Component > Transform > Interaction > Grabbable）。

现在你可以添加子对象以在画布上显示。

用户 ProbablePrime 的公共文件夹中（路径：Tutorials > UIX）包含一个 CanvasTemplate，它已经为你完成了上述所有步骤。只需生成一个并从那里开始即可。

创建一个按钮 (A Button)

image.png

  1. 在你的画布（或布局）下添加一个子对象，并将其命名为“Button”。
  2. 在该物体上，点击 Attach Component > UIX > Graphics > Image。你可以更改图像的 Tint 来改变按钮的底色。
  3. 更改 RectTransform 的 AnchorMin/Max 以在按钮周围添加边框。这实际上是告诉父级子对象的位置以及如何缩放它。
    • AnchorMin (x,y) 是子对象在父级画布上所适应矩形的左下角，范围从 0 到 1。（0,0）是父级的左下角。
    • AnchorMax (x,y) 是子对象在父级画布上所适应矩形的右上角，范围从 0 到 1。（1,1）是父级的右上角。
    • 添加一个小的边框（例如父级大小的 5%），意味着 AnchorMin 应为 (0.05, 0.05)（即 0,0 加上 5%），AnchorMax 应为 (0.95, 0.95)（即 1,1 减去 5%）。
  4. 点击 Attach Component > UIX > Interaction > Button。基于图像的 Tint，按钮会自动为其 normal（正常）、highlight（高亮）、press（按下）和 disabled（禁用）状态填充颜色。
  5. 你可以向按钮添加文本：
    1. 创建按钮的子对象并将其命名为“Text”。
    2. 在该子对象上，点击 Attach Component > UIX > Graphics > Text。
    3. 将文本更改为你想要的内容。
    4. 调整字体大小，设置自动大小（autosize），并将对齐方式更改为你想要的样式。
  6. 你可以通过创建一个 Button Events 节点将按钮连接到 ProtoFlux。从 Scene Inspector 中抓取 Button 组件的引用，并将其放入 Button Events 节点的 reference 字段中。

你也可以在按钮上放置图标：

  1. 在 Button 物体上，点击 Attach Component > Assets > SpriteProvider。
  2. 将你选择的图像放入 SpriteProvider 的 Texture 属性中。
  3. 抓取 SpriteProvider 并将其放入 Button 的 Image 组件的 Sprite 属性中。
  4. 使用 Image 上的 Tint 属性为图标着色。
  5. 你可以将 Button 作为另一个带有 Image 的物体的子对象，以设置背景。

用户 ProbablePrime 的公共文件夹中（路径：UI Stuff > Icons > Shapes）有许多图标供你使用。

可滚动文本 (Scrollable Text)

image.png

  1. 在你的画布（或布局）下添加一个子对象，并将其命名为“Mask”。
  2. 在该物体上，点击 Attach Component > UIX > Graphics > Mask。这实际上会使任何超出 RectTransform 范围的子对象图形元素变得不可见。
  3. 在同一个物体上，点击 Attach Component > UIX > Graphics > Image。
  4. 开启 Mask 的 ShowMaskGraphic 属性。
  5. 在 Mask 物体下添加一个子对象，并将其命名为“ScrollRect”。
  6. 在该物体上，点击 Attach Component > UIX > Interaction > ScrollRect。
  7. 在同一个物体上，点击 Attach Component > UIX > Layout > ContentSizeFitter。
  8. 将 ContentSizeFitter 的 VerticalFit 属性设置为 MinSize。
  9. 在同一个物体上，点击 Attach Component > UIX > Layout > VerticalLayout。
  10. 在 ScrollRect 物体下添加一个子对象，并将其命名为“Content”。
  11. 在该物体上，点击 Attach Component > UIX > Graphics > Text。
  12. 将文本更改为你想要的内容。通常对于来自文件的长文本，你需要从计算机导入文本文件，检查结果，导航到 Text 组件（路径：物体 > ScrollRect > Content），然后抓取并拖动 Text 组件的 Content 属性到你物体的 Text Content 中。
  13. 调整字体大小，设置自动大小，并将对齐方式更改为你想要的样式。
  14. 将字体颜色更改为能与遮罩（Mask）图像颜色形成对比的颜色！

简单的垂直布局 (Vertical Layout)

image.png

  1. 在你的画布（或布局）下添加一个子对象，并将其命名为“Layout”。
  2. 在该物体上，点击 Attach Component > UIX > Graphics > Image。将 Tint 设置为能将此物体与子物体区分开的颜色。
  3. 同样在该物体上，点击 Attach Component > UIX > Layout > VerticalLayout。
  4. 将 VerticalLayout 上的所有 Padding（内边距）和 Spacing（间距）属性更改为 4。
  5. 添加 Layout 的一个子对象，并将其命名为“Element”。
  6. 在该物体上，点击 Attach Component > UIX > Graphics > Image。将 Tint 设置为能将此物体与布局物体区分开的颜色。
  7. 将此物体复制几次。它们都将成为 Layout 的子对象。
  8. 你可能需要注意 UIX#Layouts 中关于布局的警告，如果需要，复制画布以强制重新计算布局。
  9. 你可以向每个 Element 添加 LayoutElement。这会告诉父级布局如何计算宽度和高度。

示例

视频教程

以下是 ProbablePrime 逐步讲解 UIX 的视频：

No comments to display

Back to top