UGUI 知识精讲与实用案例（第 1 弹）——Canvas 和Text Mesh Pro组件（Text组件）详解包含案例

引言

        在 Unity 游戏开发的广袤领域中，用户界面（UI）的设计与实现是打造优质游戏体验的关键一环。UGUI（Unity GUI）作为 Unity 引擎内置的用户界面系统，为开发者提供了一套强大且灵活的工具，用于创建各种精美的界面元素和交互功能。无论是简洁的菜单界面，还是复杂的游戏内操作面板，UGUI 都能发挥重要作用。今天，让我们开启 UGUI 的探索之旅，深入了解它的基础构成，第一站为： Canvas 以及携带的组件、EventSystem 和 Text 文本控件。

一、什么是 UGUI

        UGUI 是 Unity 自 5.0 版本引入的全新 UI 系统，它取代了旧版的 NGUI 和 GUI 系统。与传统 UI 系统相比，UGUI 具有许多显著优势。它基于 GameObject 和 Component 的架构，与 Unity 的其他功能模块无缝集成，使得开发者能够更方便地进行界面的创建、管理和交互逻辑编写。UGUI 采用了一种可视化的设计方式，通过在 Scene 视图和 Inspector 面板中进行操作，即可快速搭建出各种 UI 界面，大大提高了开发效率。

二、Canvas 以及携带的组件

（一）Canvas 简介

        Canvas（画布）是 UGUI 中所有 UI 元素的容器，它就像是一块承载着各种 UI 内容的画板。在一个 Unity 项目中，可以存在多个 Canvas，每个 Canvas 都有自己独立的渲染顺序和显示规则。

（二）Rect Transform 组件

1. 位置与尺寸
   • Pos X、Pos Y、Pos Z分别表示 Canvas 在三维空间中的位置坐标。
   • Width和Height定义了 Canvas 的尺寸。合适的尺寸设定能确保 UI 元素有足够的空间进行摆放。
2. Anchors（锚点）
   • 锚点用于确定 UI 元素与父容器（这里即 Canvas 自身在场景中的相对位置关联）的连接方式。当设置锚点时，UI 元素会根据锚点的位置和父容器的变化而相应调整自身位置和大小。
3. Pivot（轴心点）
   • Pivot的X、Y值为0.5、0.5，表示 Canvas 的轴心点位于其中心位置（值的范围为0-1）。轴心点是对象进行旋转、缩放等变换操作的参考点。
4. Rotation（旋转）
   • 如创建具有倾斜效果的 UI 界面时，可调整这些旋转参数。
5. Scale（缩放）
   • 缩放操作可以用于调整整个 UI 的大小比例，不过在实际应用中需谨慎调整，以免影响 UI 元素的清晰度和可读性。

（三）Render Mode（渲染模式）

1. Screen Space - Overlay：这种模式下，Canvas 会覆盖整个屏幕，并且会始终显示在所有摄像机渲染内容的最上方。它常用于创建游戏中的固定界面，如生命值条、菜单栏等，这些界面不需要与游戏场景中的物体进行深度交互。
2. Screen Space - Camera：此模式需要指定一个摄像机，Canvas 会根据该摄像机的视角进行渲染。它可以使 UI 元素与游戏场景中的物体产生深度关系，比如在一些 AR 或 VR 游戏中，将 UI 元素放置在场景中的特定位置，增强沉浸感。
3. World Space：在这种模式下，Canvas 就像一个普通的游戏对象一样存在于三维世界中，它可以自由地调整位置、旋转和缩放。这种模式适用于创建与游戏场景紧密结合的 UI，例如角色头顶的血条、物品上的提示信息等。

（四）Event Camera（事件摄像机）

        设置为Main Camera，表示该 Canvas 的交互事件（如点击、拖拽等）将由主摄像机来检测和处理。如果项目中有多个摄像机，需要确保选择了合适的摄像机来处理 UI 事件，以保证交互的准确性。

（五）Sorting Layer（排序层）

       排序层用于决定 Canvas 在渲染时相对于其他对象的先后顺序。当场景中有多个 Canvas 或者 Canvas 与其他渲染对象有重叠时，通过设置不同的排序层，可以控制它们的显示顺序。

（六）Order in Layer（层内顺序）

     在同一排序层内，该参数进一步确定 Canvas 的渲染顺序，数值越小越先渲染。

（七）Additional Shader Channels（额外着色器通道）

        这些通道的选择会影响 UI 元素在着色器中的处理方式，对于一些需要特殊效果（如光照、法线贴图等）的 UI 开发，该参数的设置就显得尤为关键。

（八）Vertex Color Always In Gamma（顶点颜色始终在伽马空间）

       建议在伽马空间中保持顶点颜色，以便在 UI 着色器中进行伽马到线性颜色空间的转换，从而提高线性颜色空间中 UI 颜色的精度。在进行高质量的 UI 渲染时，遵循该建议可以使 UI 的颜色表现更加准确。

（九）Canvas Scaler 组件参数

 Dynamic Pixels Per Unit（动态每单位像素数）为1，Reference Pixels Per Unit（参考每单位像素数）为100。这两个参数共同决定了 UI 元素在世界空间中的尺寸和缩放比例。

（十）Graphic Raycaster 组件参数

        （1）Ignore Reversed Graphics（忽略反向图形）

        该选项被勾选，意味着当图形的渲染顺序与预期相反时，将忽略这些图形的交互事件。这在一些复杂的 UI 层级结构中，可以避免误触发不必要的交互。

        （2）Blocking Objects（阻挡对象）

        设置为None，表示没有特定的对象会阻挡 UI 元素的交互射线检测。

        （3）Blocking Mask（阻挡遮罩）

        设置为Everything，意味着所有对象都有可能阻挡 UI 元素的交互射线。通过合理设置阻挡对象和遮罩，可以精准控制 UI 元素的交互范围，比如防止在点击 UI 时误触发场景中其他对象的事件。

三、EventSystem

        EventSystem（事件系统）是 UGUI 中处理输入事件的核心机制。它负责接收来自鼠标、键盘、触摸等设备的输入，并将这些输入转化为相应的事件，如 PointerClick（点击）、PointerEnter（鼠标进入）、PointerExit（鼠标离开）等，然后将这些事件分发给对应的 UI 元素。在一个 Unity 项目中，通常只有一个 EventSystem 对象，并且它会自动添加到场景中。EventSystem 还支持自定义事件的处理，开发者可以根据项目需求，创建自己的事件类型和处理逻辑，以实现更加丰富的交互效果。

（一）First Selected（初始选中对象）

        当前设置为None (Game Object)，该参数用于指定场景启动时默认被选中的游戏对象。在一些包含多个可交互 UI 元素的界面中，设置合适的初始选中对象可以为用户提供明确的操作起始点，例如在菜单界面中，可以将第一个可操作的按钮设置为初始选中对象。

（二）Send Navigation Events（发送导航事件）

        此选项处于勾选状态，这表示 EventSystem 会发送导航相关的事件。在使用键盘或游戏手柄等设备进行 UI 导航操作时（如通过方向键在按钮之间切换焦点），这些导航事件会被发送给相应的 UI 元素，使得 UI 元素能够根据导航操作做出反应，比如改变颜色或激活状态。

（三）Drag Threshold（拖拽阈值）

        它定义了触发拖拽操作的最小距离。当用户触摸屏幕或移动鼠标的距离超过这个阈值时，系统才会判定为开始执行拖拽操作，小于该阈值则可能被视为误操作或简单的点击。合理设置拖拽阈值可以避免因用户轻微的操作抖动而误触发拖拽事件，提升交互的准确性。

（四）Send Pointer Hover To Parent（将指针悬停事件发送给父级）

        该选项被勾选，意味着当指针（如鼠标指针或触摸点）悬停在 UI 元素上时，不仅当前 UI 元素会接收到悬停事件，其所属的父级 UI 元素也会接收到该事件。这在一些具有层级结构的 UI 设计中非常有用，例如一个包含多个子按钮的面板，当鼠标悬停在某个子按钮上时，面板也可以根据需要做出相应的反应，如改变背景颜色。

（五）Horizontal Axis（水平轴）

        设置为Horizontal，它指定了用于 UI 导航的水平输入轴。在使用键盘或游戏手柄进行 UI 导航时，与该轴相关的按键（如键盘的左右箭头键）会被用于在水平方向上切换 UI 元素的焦点。

（六）Vertical Axis（垂直轴）

        设置为Vertical，与水平轴类似，它定义了用于 UI 导航的垂直输入轴。当用户使用键盘的上下箭头键或游戏手柄的相应按键时，UI 元素的焦点会在垂直方向上进行切换。

（七）Submit Button（提交按钮）

        设置为Submit，表示当用户按下对应的提交按键（如键盘的回车键或游戏手柄的确认键）时，当前选中的 UI 元素会接收到提交事件。这对于触发按钮的点击操作、确认输入等交互功能至关重要。

（八）Cancel Button（取消按钮）

        设置为Cancel，意味着按下相应的取消按键（如键盘的 Esc 键）时，系统会发送取消事件。通常用于关闭窗口、取消操作等场景。

（九）Input Actions Per Second（每秒输入操作次数）

       该参数限定了每秒能够执行的输入操作的最大次数。例如，当用户持续按住某个按键进行重复操作时，系统会根据这个参数来限制操作的触发频率，避免因过快的输入导致 UI 响应异常。

（十）Repeat Delay（重复延迟）

        表示在用户持续按住某个按键时，第一次触发操作后，再次触发重复操作的延迟时间（单位为秒）。例如，当用户按住一个按钮时，第一次点击会立即触发，之后每隔 0.5 秒会再次触发一次，直到用户松开按键。

四、Text 文本控件

        Text 文本控件是 UGUI 中最常用的组件之一，用于显示文本信息。它具有丰富的属性设置，能够满足各种文本显示的需求：

（1）Text Input 区域

• 文本输入框：这里用于输入具体的文本内容。可以手动输入文本，也可通过代码动态赋值，从而在游戏中显示相应文字信息，比如显示角色名称、游戏提示等内容。

（2）Text Style 区域

• Text Style：用于选择预设的文本样式。可根据实际需求创建和选择不同的样式，方便统一管理文本外观，如标题样式、正文样式等。

（3）Main Settings 区域

• Font Asset：指定为 “LiberationSans SDF (TMP_Font Asset)”，用于选择文本显示的字体资源。合适的字体能增强游戏的风格一致性，比如复古风格游戏可选择手写字体。
• Material Preset：“LiberationSans SDF Material”，该材质预设决定了文本的渲染外观，如颜色、纹理等。
• Font Style：包含一系列按钮（B、I、U、S、ab、AB、SC），用于设置文本的风格，如加粗（B）、斜体（I）、下划线（U）等，方便对文本进行格式调整。
• Font Size：数值为 “83.24”，用于设置文本的大小。可根据文本在界面中的重要性和布局需求进行调整，比如标题通常设置较大字号。
• Auto Size：未显示勾选状态，若启用该功能，文本会根据所在矩形区域自动调整大小，以适应空间限制。
• Vertex Color：白色色块，用于设置文本顶点的颜色，直接决定文本显示的颜色。
• Color Gradient：未勾选，若启用，可设置文本颜色渐变效果，使文本外观更丰富。
• Override Tags：未勾选，勾选后可覆盖文本中使用的标签效果。
• Spacing Options (em)：包含 Character（字符间距）、Word（单词间距）、Line（行间距）、Paragraph（段落间距），可分别调整文本中字符、单词、行、段落之间的距离，优化文本排版。
• Alignment：一系列按钮用于设置文本对齐方式，如左对齐、居中对齐、右对齐等，确保文本在显示区域内整齐排列。
• Wrapping：设置为 “Enabled”，表示启用文本换行功能，当文本长度超过显示区域宽度时自动换行。
• Overflow：设置为 “Overflow”，定义文本超出显示区域时的处理方式，如超出部分是否显示、是否缩放等。
• Horizontal Mapping 和 Vertical Mapping：均设置为 “Character”，决定文本在水平和垂直方向上的映射方式，一般保持默认即可。

（4）Extra Settings 区域

• Margins：包含 Left（左）、Top（上）、Right（右）、Bottom（下）四个边距设置，数值均为 “0”，用于设置文本内容与显示区域边缘的距离，可调整文本在框内的位置。
• Geometry Sorting：设置为 “Normal”，用于控制文本几何图形的排序方式，一般在处理复杂重叠文本时调整。
• Is Scale Static：未勾选，若勾选，文本缩放时会保持固定属性，防止因缩放导致的显示问题。
• Rich Text：勾选，启用富文本功能，允许使用标签对文本进行样式设置，如<b>加粗、<color>设置颜色等。
• Raycast Target：勾选，使文本成为射线检测目标，可用于响应点击等交互事件。
• Maskable：勾选，使文本可被遮罩影响，在需要制作文本遮罩效果时有用。
• Parse Escape Characters：勾选，启用转义字符解析功能，确保特殊字符能正确显示和处理。
• Visible Descender：勾选，确保文本中字符的下延部分（如字母 “y”“p” 的下部）可见。
• Sprite Asset：设置为 “None (TMP_Sprite Asset)”，用于指定包含文本中使用的精灵图资源，可实现图文混排效果。
• Style Sheet Asset：设置为 “None (TMP_Style Sheet)”，用于指定样式表资源，可统一管理文本样式，方便批量修改。
• Kerning：勾选，启用字距调整功能，优化字符之间的间距，使文本显示更美观。
• Extra Padding：未勾选，若勾选，可为文本添加额外的内边距，调整文本在显示区域内的空白空间。

结语

        通过本次对 UGUI 基础元素的学习，我们了解了 Canvas 的作用和渲染模式、Canvas 携带的重要组件、EventSystem 的工作原理以及 Text 文本控件的使用方法，并通过一个简单的计分板案例进行了实践。UGUI 的世界丰富多彩，还有更多强大的功能和复杂的交互等待我们去探索。在后续的学习中，我们将继续深入 UGUI 的知识领域，学习更多实用的案例和技巧，不断提升我们的 UI 开发能力。希望大家在 UGUI 的学习过程中能够保持热情，勇于尝试，创造出更加精彩的用户界面。