unity之UGUI基础
unity之UGUI基础
‘祈止’Canvas
Canvas（画布）是UI的基础，创建Canvas时也会自动创建一个EventSystem用于处理UI交互事件。
Canvas持有的组件如下：
Rect Transform
是Transform的特殊实现，用于所有UI元素。
根组件：没有预制锚点，面板灰色无法控制。
子组件：有预制锚地，面白正常可以控制。
Base：(会更具Anchors的设置而改变)
- Pos X/Y/Z：局部坐标，等同于Transform的xyz。
- Width/Height：定义矩形的宽度和高度。
Anchors(锚点)：子物体可以使用预制Anchors。
- Min：确定锚点x/y值较小的位置。
- Max：确地锚点x/y值较大的位置。
Pivot(旋转轴)：控制UI物件的旋转轴和中心，值代表百分比。UI物件的坐标点。
Rotation：控制物件选择角度
Scale：控制缩放
Anchors
特别的，Anchors是由四个小三角形组成的，用于锚定UI矩形相对其父物体的Transform。
UI矩形的每个角对应一个“小三角形”，UI矩形每个角与其对于的小三角形距离恒定。
也就是说，当小三角形分开始，矩形会跟随父类物体的伸缩产生对于的伸缩。可以认为Anchors将UI矩形映射到一个父物体的矩形（线/点）上。
Base
注：Unity官方对于rect transform没有base的说法。这里便于表述，我起了这个名字。
Base信息是物体的pivot相对物体的Anchors的距离。但Anchors可以分开，（分开后不基于pivot计算，而是基于UI边界）因此Base信息存在四种情况：
- 锚点合为一体：PosX/Y和width/Height。
- 当MinX ≠ MaxX：PosX -> Left（UI左边界相对左锚点偏移量），width -> Right（相对右锚点偏移量）两者共同控制宽度。
- 当MinY ≠ MaxY：PosY -> Top（UI上边界相对上锚点偏移量），height -> Bottom（相对下锚点偏移量）两者共同控制宽度。
Canvas
Canvas组件用于修改画布设置。
Render Mode
渲染模式有以下：
- Screen Space - Overlay（屏幕空间-叠加）：将UI元素直接渲染在屏幕上，可以随屏幕大小自动调整。
- Screen Space - Camera（屏幕空间-摄像）：将UI放置在摄像机前，可与 3D 物体产生深度遮挡关系，因此受摄像机设置的影响。
- World Space（世界空间）：画布像场景物体一样处于世界空间中，作为物体渲染。
Pixel Perfect：勾选后，UI元素可与屏幕像素严格对齐。但高分辨率或非整数倍缩放，可能导致UI位置偏移。
Sort Order：用于控制多个Canvas的渲染前后顺序，数值越小，越先渲染（在更下层）。
Target Display：指定Canvas渲染的目标显示器。
Additional Shader Channels
为 UI 着色器提供额外的顶点数据通道（见unity Shaderlab内容），例如用于自定义特效、顶点动画等。
- Nothing
Vertex Color Always In Gamma Color Space
顶点颜色始终在伽马色彩空间
勾选后，顶点颜色会始终以 Gamma 空间处理，避免在 Linear 色彩空间项目中出现颜色偏差。
Canvas Scaler
Canvas Scaler(画布缩放器)：用于控制Canvas中UI元素的整体缩放
UI Scale Mode
Constant Pixel（固定像素）：保证像素大小不变
Scale Factor
Scale Factor（缩放因子）：通过此因子对Canvas中所有UI元素进行比例调整。
其实就是一个全局的缩放倍率。
Scale With Screen（屏幕尺寸比例）：屏幕越大，元素越大。
Reference Resolution x/y：设置UI布局设计的分辨率，如果屏幕分辨率较大，界面会被放大。
Screen Match Mode：如果当前分辨率比例不符合参考分辨率（上面的x/y），用于缩放画布的模式。
Match Width or Height：用宽度或高度作为参考。
Expand：横向或纵向扩展画布。会增加空白，但保证全部显示。
Shrink：横向或纵向裁剪画布。不增加空白，但无法完全显示。
Match：（当选择Match Width or Height）判断缩放是以宽度或高度（上面的x/y）为参考，还是介于两者之间。
Constant Physical Size（固定物理大小）：保证元素的物理大小不变。
- Physical Unit：物理单位，用于指定位置和尺寸。
- Fallback Screen DPI：当无法获取屏幕DPI时，使用此值。
- Default Sprite DPI：用于计算精灵的物理尺寸时，使用的默认DPI。
特别的，当Canvas组件选择World模式时：
Dynamic Pixels Per Unit：每单位用于生成位图的像素数。用于文本等。
Reference Pixeis Per Unit
每单位参考像素：定义一个unity单位对应的像素数量
Graphic Raycaster
用于设置图形与射线检查之间的关系。
| 条目 | 功能 |
|---|---|
| Ignore Reversed Graphics | 射线是否忽略反转的图形 |
| Blocking Objects | 3D场景中那些物体可以阻挡射线 |
| Blocking Mask | 确定哪些Layer上的物体可以阻挡射线 |
Canvas Renderer
此组件用于渲染UI元素
Cull Transparent Mesh（剔除透明UI元素），当UI元素透明度alpha值为0时。剔除物体，不进行渲染流程。
Image
基础属性
Source Image（图片来源）：必须导入为Sprite。
Color：给图片涂上的颜色。
Material：用于渲染图像的材质。
Raycast Target：是否为射线检测的目标。
Raycast Padding：用于扩大射线检测的碰撞箱，用于让小图标更容易被点到。
遮罩与类型
Maskable：是否可以被父类的Mask组件遮罩。
Image Type：
Simple：直接拉伸，容易导致边缘变形
- Use Sprite Mesh：使用Sprite的网格，用于不规则图标。
- Preserve Aspect：强制Image保持原始宽高比，放置变形。
- Set Native Size：设置为原生尺寸。
Sliced：将图形分为九宫格，拉伸时只缩放中心区域，保持边框不变。
- Fill Center ：勾选后填充中心，否者只显示边框。
- Pixels Per Unit Multiplier：调整图像的像素密度。
Tiled：重复平铺。
- Fill Center ：勾选后填充中心，否者只显示边框。
- Pixels Per Unit Multiplier：调整图像的像素密度。
Filled：填充，用于制作进度条，冷却等等。
- Fill Method：填充方式。
- Fill Origin：填充的起点。
- Fill Amount：填充量
- Clockwise：顺时针
- Preserve Aspect：强制Image保持原始宽高比，放置变形。
- Set Native Size：设置为原生尺寸。
Text(Text Mesh Pro)
Text Input
Enable RTL Editor：启用从右到左排列文本。
Text Style ：文本样式
Main Settings
Font
Font Asset：是TMP的字体资源，基于有符号距离场(SDF)技术，能在任何分辨率下保持文字清晰。
Material Preset：对应字体的渲染材质，控制着色、发光、外描边。
Font Style：提供粗体（B）、斜体（I）、下划线（U）、删除线（S）、上标（ab）、下表（AB）、小型大写字母（SC）。
Font Size：字体大小。
Auto Size：是否自动调整字体大小。
| 选择Auto Size时 | |
|---|---|
| Min | 指定自动调整的最小值。单位是points. |
| Max | 指定自动调整的最小值。单位是points. |
| WD% | 指定调整的最大可接受字符宽度。TMP通过压缩字符使其更高，通常值适用于数字。 |
| Line | 行高。 |
Color
| Vertex Color | 文字主颜色，材质中定义的任何颜色和纹理都会乘以此颜色。 |
|---|---|
| Color Gradient | 未勾选，用于给文字添加垂直/水平颜色渐变。 |
| Override Tag | 未勾选，若开启会忽略文本中的改变颜色的富文本标签。 |
Spacing
Spacing Options(em)
| 选项 | 功能 |
|---|---|
| Character | 字体间距，字与字之间的距离。 |
| Word | 词间距，调整单词间距。 |
| Line | 行间距。 |
| Paragraph | 段落间距 |
Alignment(对齐)
略
Text Wrapping Mode（文本换行模式）
决定何时换行。
Overflow(溢出处理)
当前为Overflow，表示文本超出文本框时会继续显示
H/V Mapping(水平/垂直映射)
Character：按字符进行纹理映射，每个字符独立渲染。
Line/Paragraph：按行/段落映射。
Match Aspect：匹配宽高比，两个只有一个可以选这个。
Extra Settings
| 选项 | 功能 |
|---|---|
| Margins | left/top/right/bottom，文字边距。 |
| Geometry Sorting | 几何体排序，在特殊情况下解决排版问题。每个字符有一个矩形，此为排序方式。 |
| Is Scale Static | 启用后，顶点不再RectTransform 缩放变化。使用GPU缩放。 |
| Rich Text | 启用支持富文本标签。 |
| Raycast Target | 启用为射线检测目标。 |
| Maskable | 文本可以被父级Mask组件遮罩。 |
| Parse Escape Characters | 启用时，将“\”作为转义字符使用。 |
| Visible Descender | 显示文字底部。 |
| Emoji Fallback Support | 表情回退，当前字体不支持某个表情时，自动使用系统字体。 |
| Sprite Asset | 指定TMP精灵资源，可以在文本中插入自定义图标。 |
| Style Sheet Asset | 样式资源表，可预定义文本样式。 |
| Font Features | 字体特性。启动OpenType字体特性，提高英文排版美观度。 |
| Extra Padding | 额外内边距，TMP为文字生成sprites但可能会被裁剪，添加额外内边界以避免。 |
Toggle
Interactable
可互动：是否可互动。
Transition
| None | 让按钮完全没有状态效果。 |
|---|---|
| Color Tint | 可以为每个单独状态选择颜色，还可以设置淡入淡出的时间。 |
| Sprite Swap | 可以为每个状态设置自定义Sprite。 |
| Animation | 根据状态进行动画，必须存在动画元件。 |
Color Tint
| Target Graphic | 用于交互部分的图片。 |
|---|---|
| Normal Color | 默认状态的颜色。 |
| Highlighted Color | 高亮颜色。未被选择时悬停。 |
| Pressed Color | 按下时的颜色。 |
| Selected Color | 选中时的颜色。 |
| Disabled Color | 禁用控件时的颜色。->Interactable不选中时。 |
| Color Multiplier | 颜色的系数，所有颜色会乘以此系数，以变得更亮。 |
| Fade Duration | 状态转化需要的时间。 |
Sprite Swap
| Target Graphic | 显示图片。 |
|---|---|
| Highlighted Sprite | 高亮时的图片。 |
| Pressed Sprite | 按下时的图片。 |
| Selected Sprite | 选中时的图片。 |
| Disabled Sprite | 禁用时的图片。->Interactable不选中时。 |
Animation
| Normal Trigger | 默认状态的动画触发器。 |
|---|---|
| Highlighted Trigger | 高亮的动画触发器 |
| Pressed Trigger | 按下时的动画触发器 |
| Selected Trigger | 选中时的动画触发器 |
| Disabled Trigger | 禁用时的动画触发器 |
| Auto Generate Animation | 自动创建一个 Animator Controller 和对应的动画片段 |
Navigation
| Horizontal | 横向水平导航 |
|---|---|
| Vertical | 竖向垂直导航 |
| Automatic | 自动推测导航 |
| Explicit | 显示 |
| None/Everything | 无导航/所有导航 |
Visualize：可视化，选中后在场景里显示设置的导航效果。
Other
Is On：默认下为选中的状态。
Toggle Transition：切换开关时的效果。
None/Fade：无/淡入淡出。
Graphic：勾选标记的图片。
Group：该Toggle所属的Toggle组。
On Value Changed：当开关变化时调用的UnityEvent，传入布尔值。
Toggle Group
将Toggle Group添加到Toggle中的Group中，以将多个Toggle编为一个组。组内的Toggle为单选按钮。
Allow Switch Off：允许不选择所有的开关。
Slider
前半部分同上Toggle。
| 项目 | 功能 |
|---|---|
| Fill Rect | 填充的图形 |
| Handle Rect | 控制手柄的图形 |
| Direction | 滑动条的方向 |
| Min Value/Max Value | 最小值/最大值 |
| Whole Numbers | 是否将滑动条限制在整数位 |
| Value | 滑动条的数值，在编辑器中设置后作为默认值。 |
On Value Changed：当开关变化时调用的UnityEvent，传入数值浮点数。
Scrollbar（滚动条）
上部同上述内容的。
Number Of Steps：将滚动条分成的数量 。
Scroll View
| Content | 要滚动的元素的引用 |
|---|---|
| Horizontal | 支持水平滚动 |
| Vertical | 支持垂直滚动 |
| Movement Type | 运动类型（Unrestricted，Elastic，Clamped） |
| –> Elastic | 这是弹性模式下使用的弹跳量 |
| Inertia | 开启惯性 |
| –> Deceleration Rate | 减速率 |
| Scroll Sensitivity | 滚动灵敏度 |
| Viewport | 视口元素的引用 |
| Horizontal（Vertical） Scrollbar | 可选的，滚动条元素的引用 |
| –> Visibility | 是否在不需要时自动隐藏 |
| –> Spacing | 滚动条和视窗间的空间 |
| On Value Changed（Vector2） | 滚动条变化时触发，传入二维向量。 |
Button
同上。
On Click()：按钮按下时执行的事件。
Dropdown（下拉菜单）
上半部同上。
| Template | 下拉菜单的模版 |
|---|---|
| Caption Text | 文本组件，用于保存当前选中项的文本 |
| Caption Image | 图片组件，用于保存当前选中项的图片 |
| Placeholder | 占位符，没有选择时用于占位。可以是文本或图片。 |
| Item Text | 文本组件，用于保存元素的文本 |
| Item Image | 图片组件，用于保存元素的图片 |
| Value | 当前选项的索引 |
| Multi Select | 是否多选 |
| Alpha Fade Speed | 透明淡出速度 |
Options：选项。
text / Sprite / 主颜色
On Value Changed(Int32)：当选项变化时的事件。
InputField
Text Viewport
文本显示区域，
Text Component
文本组件，显示文字的组件。
Text
显示文本
Input Field Settings
| Font Asset | |
|---|---|
| Point Size | 字体大小 |
| Character Limit | 字符限制 |
| Content Type | 内容类型，定义输入字符接受的字符类型 |
| –> Line Type | 行类型 |
| Piaceholder | 占位符，无输入时的提示文本 |
| Vertical Scrollbar | 垂直滚动条 |
| Caret Blink Rate | 插入点（光标竖线）闪烁速度 |
| Caret Width | 光标竖线的宽度 |
| Custom Caret Color | 开启自定义光标竖线的颜色 |
| Selection Color | 选择文字时的背景颜色 |
Control Settings
| OnFocus - Select All | 获取焦点时，全选文本 |
|---|---|
| Reset On Deactivation | 停用时重置 |
| –> Keep Text Selection Visible | 保持文本可见，与上一项互斥 |
| Restore On ESC Key | 按ESC恢复 |
| Should Activate On Select | 应在选择时激活 |
| Hide Soft Keyboard | 隐藏软键盘 |
| –> Hide Mobile Input | 隐藏移动输入，与上一项互斥 |
| Read Only | 只读模式 |
| Rich Text | 富文本 |
| Allow Rich Text Editing | 允许富文本编辑 |
Events
| On Value Changed（String） | 当数值变化时触发 |
|---|---|
| On End Edit | 当编辑结束时触发 |
| On Select | 当选择时触发 |
| On Deselect | 当取消选择时触发 |
