ugui源码_UGUI 源码笔记（一）文件结构和部分组件使用

这是我阅读 UGUI 源码记录的相关笔记，共三部分、文件结构和部分组件使用、输入事件、核心部分

ZeroyiQ：UGUI 源码笔记（一）文件结构和部分组件使用

ZeroyiQ：UGUI 源码笔记（二）输入事件

ZeroyiQ：UGUI 源码笔记（三）核心部分

一、UGUI

1. Define

通过 3D 网格系统构建的 UI 系统。源码地址

1.1 实现

使用 UGUI 制作一个图元（图片、按钮...)，会先构建一个方形网格，然后绑定材质球，材质球里存放了要显示的图片。

1.2 问题

材质球和网格的渲染，性能开销过大，drawcell 过高。

1.3 解决

减少材质球：一部分类型相同的图片，进行合图。多个图元可以只是用一个材质球，改变模型顶点上的 UV 就能显示不同的图片了。
合并网格：将有相同材质球（图片、shader）和相同层级的网格，进行合并。

2. 源码文件结构(v2019.1)

EventSystem 输入事件
EventData 事件数据
InputModules 输入事件捕捉模块
Raycasters 射线碰撞检测
EventHandle 事件处理和回调
Animation 动画
CoroutineTween 补间动画
Core 渲染核心
Culling 裁剪
Layout 布局
MaterialModifies 材质球修改器
SpecializedCollections 特殊集合
Utility 工具集
VertexModifies 顶点修改器

二、部分组件

1. Canvas

类似于画画的画布。Canvas 包含了上述解决步骤中的合并网格的功能。

1.1 Render Mode

Screen Space - Overlay：不与空间上的排序有任何关系，常用在纯 UI。Sort Order 值越大，显示越前面
Screen Space - Camera：依赖 Camera 的平面透视，能够加入非 UGUI的元素到 UI 中。【常用】
World Space： UI 物体会放出现在世界空间中，常在世界空间中与普通3D物体一同展示，列如场景中对象的血条。

2. Canvas Scale

缩放比例组件，用来指定 Canvas 中元素的比例大小。

2.1 UI Scale Mode

Constant Pixel Size：指定比例大小。
Scale With Screen Size：以屏幕基准自动缩放，能设置以宽还是以高。【手游项目常用】
Constant Physical Size：以物理大小为基准。

2.2 ScreenMatchMode.MatchWidthOrHeight

根据屏幕高宽匹配。使用对数空间转换能够有更好的表现。

float logWidth = Mathf.Log(screenSize.x / m_ReferenceResolution.x, 2);
float logHeight = Mathf.Log(screenSize.y / m_ReferenceResolution.y, 2);
float logWeightedAverage = Mathf.Lerp(logWidth, logHeight, m_MatchWidthOrHeight);
scaleFactor = Mathf.Pow(2, logWeightedAverage);

e.g. 设备和游戏屏幕比例，宽是 10/5 = 2，高是 5/10 = 0.5，匹配值设定为 0.5。

正常空间平均值计算：(2+0.5)* 0.5 = 1.25，会放大 Canvas。

对数空间平均值计算：2^((log2(2)+log2(0.5))*0.5) =2^((1+-1)*0.5) = 1 ，Canvas 比例不变。

3. Image 、RawImage

对于图片、图集展示的组件。

3.1 区别

Image：展示图集中的图元，能够参与合并。
RawImage：能展示单张图片，不能合并。

3.2 选择

图片尺寸小，能够打成图集 -> Image

图片尺寸大，合图效率低 -> RawIamge

图片相同类型数量多，合并图集太大，实际展示图片又很少 -> RawIamge

4 RectTransForm

虽然 RectTransform 是 UnityEngine 下的类，但是在 UGUI 中大量使用，也需要有所了解。

简单来说，UGUI 通过 RectTransform 来定义 UI 的位置、大小、旋转。

4.1 Anchors

锚点：子节点相对于父节点的对齐依据。数值为相对于父节点的比例。

100X100的图片，全展 Anchors，父节点 120X120 效果如下。

Anchors Presets 工具，列出了常用的 Anchor 布局。按住 Shift 可以连同 Pivot 一同改变，按住 Alt 可以连同位置一同改变，在子节点铺满父节点的时候非常好用。

4.2 Pivot

物体自身的支点，影响物体旋转、缩放、位置。