卡牌游戏 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
版权归原作者 长脖鹿Johnny 所有， 如有侵权，请联系我们删除。