Unity UI 系统：Unity UI package (uGUI) 使用说明

卡牌游戏 UI 系统

Unity UI 基础概念

布局（Layout）

Unity 的屏幕坐标定义为左下角为 (0, 0)，右上角为 (1, 1) 。

锚点（Anchor）

• 锚点控制 子矩形UI的边 相对 父矩形对应坐标轴的指定比例边 的 距离 保持不变。
  • Anchor Min X 的 值 value 表示：该矩形UI左边的X坐标 相对 父矩形UI的比例值为value处对应的X轴坐标 的距离保持不变。
  • Anchor Min Y 的 值 value 表示：该矩形UI底边的Y坐标 相对 父矩形UI的比例值为value处对应的Y轴坐标 的距离保持不变。
  • Anchor Max X 的 值 value 表示：该矩形UI右边的X坐标 相对 父矩形UI的比例值为value处对应的X轴坐标 的距离保持不变。
  • Anchor Max Y 的 值 value 表示：该矩形UI顶边的Y坐标 相对 父矩形UI的比例值为value处对应的Y轴坐标 的距离保持不变。
• 所以锚点不能通过控制父控件的大小来直接控制子控件的缩放，只能通过控制子控件边与父控件边的距离来间接控制。

随屏幕大小缩放

• 通过 GameObject 菜单创建新的画布时，默认情况下也会添加画布缩放器组件。
• 在画布缩放器组件中，可将其 UI Scale Mode 设置为 Scale With Screen Size。使用此缩放模式，可以指定要用作参考的分辨率。如果当前屏幕分辨率小于或大于此参考分辨率，则会相应设置画布的缩放因子，使所有 UI 元素都与屏幕分辨率一起放大或缩小。
• 其他设置见官方说明。

布局组

网格布局组

Event System

事件系统的主要作用如下：

• 管理视为选中状态的 GameObject
• 管理正在使用的输入模块（Input Module）
• 管理射线投射（如果需要）
• 根据需要更新所有输入模块

Input Module

输入模块包含定义事件系统行为方式的主要逻辑，可用于：

• 处理输入
• 管理事件状态
• 将事件发送到场景中对象。

该卡牌游戏中采用的就是默认的 Standalone Input Module。该模块与控制器/鼠标/触摸输入具有相同的功能。响应输入时会发送按钮按压、拖拽以及类似事件。

处理输入事件

如 UI 可以通过实现 IPointerClickHandler 接口的方式来处理用户点击事件：

public class CardUI : MonoBehaviour, IPointerClickHandler
{
    public void OnPointerClick(PointerEventData eventData)
    {
        if (eventData.button == PointerEventData.InputButton.Left)
        {
            if (onClick != null)
                onClick.Invoke(this);
        }

        if (eventData.button == PointerEventData.InputButton.Right)
        {
            if (onClickRight != null)
                onClickRight.Invoke(this);
        }
    }
}

Raycaster

射线投射器用于确定指针在哪个对象上方。

当场景中存在并启用了射线投射器时，只要从输入模块发出查询，事件系统就会使用该射线投射器。

如果使用多个射线投射器，那么这些射线投射器都会进行针对性投射，并且结果将根据与元素的距离进行排序。

Graphic Raycaster

图形射线投射器用于对 Canvas 进行射线投射。射线投射器查看画布上的所有图形，并确定是否有任何图形被射中。

Canvas Group

画布组 (Canvas Group) 可集中控制整组 UI 元素的某些方面，而无需单独处理每个元素。画布组的属性会影响所在的 GameObject 以及所有子 Object 。

画布渲染器

画布渲染器 (Canvas Renderer) 组件用于渲染Canvas中包含的图形 UI 对象。

属性

画布渲染器在 Inspector 中没有公开属性。

详细信息

菜单 (GameObject > Create UI) 中提供的标准 UI 对象都在需要的地方附加了 Canvas Renderer，但对于自定义 UI 对象，可能需要手动添加此组件。虽然 Inspector 中没有公开属性，但可通过脚本访问一些属性和函数；请参阅脚本参考中的 CanvasRenderer 页面以了解完整的详细信息。

Unity UI 类型

基础 UI 组件

文本（Text）

图像（Image）

原始图像（Raw Image）

图像组件采用精灵，但原始图像采用纹理（无边框等）。

遮罩 (Mask)

遮罩不是可见的 UI 控件，而是一种修改控件子元素外观的方法。遮罩将子元素限制（即“掩盖”）为父元素的形状。因此，如果子项比父项大，则子项仅包含在父项以内的部分才可见。

按钮（Button）

组成

• Background（Image）
• Text

滑动条（Slider）

组成

• Background（Image）
• Fill Area
  • Fill（image）

滚动条（Scrollbar）

• 可以通过 Direction 设置滚动方向：
  

组成

• Background（Image）
  • Sliding Area（Tansform）
    • Handle（Image）

输入区域（InputField）

组成

• Background（Image）
  • Placeholder（Text）
  • Text

开关（Toggle）

组成

• Background（Image）
  • CheckMark（Image）
• Label（Text）

矩形滚动框（Scroll Rect）

组成

• Background（Image）
  • Viewport（Image + Mask）
    • Content
  • Scrollbar Horizontal（Scrollbar）
  • Scrollbar Vertical（Scrollbar）

下拉选单（Dropdown List）

组成

• Image
  • Label（Text）
  • DropdownArrow（Image）
  • Template（Scroll Rect）

UI Animation

过渡选项

Color Tint

Sprite Swap

Animator

Animator Controller

• 控制器会引用其中所用的动画剪辑（Animation Clip），使用状态机来管理各种动画状态和它们之间的过渡。
• 仅在对人形角色进行动画化时，才需要引用 Avatar。对于其他动画类型，只需Animator Controller。

设置 Trigger

代码中触发方法：

timeout_animator?.SetTrigger("pulse");

Reference

• https://docs.unity3d.com/2022.3/Documentation/Manual/com.unity.ugui.html
• https://zhuanlan.zhihu.com/p/157273459
• https://zhuanlan.zhihu.com/p/667966938
• https://www.lfzxb.top/personal-ui-framework-consider/
• https://developer.unity.cn/projects/63f6c166edbc2a7851283390