UGUI整体解决方案(基础篇)
课程目录:
基础组件的讲解
每种组件的示例
扩展UGUI组件
图文混排 (Text Mesh Pro)
富文本
UGUI图表 (柱状图等)
多语言解决方案
UI优化
参考博文：https://blog.csdn.net/zcaixzy5211314/article/details/86515168
基础组件讲解：
任务3: RectTransform组件（锚点、中心点）
RectTransform组件是UI相关游戏物体的必须组件，不可移除
RectTransform组件的基础属性：
Position/Width/ Height单位为像素
Anchors锚点: 相对于父物体的对齐方式
Pivot中心点: Position的位置信息是根据Anchor和Pivot来计算的
在Debug模式下Inspector面板显示的RectTransform组件的属性更全面
比如LocalPosition/ SizeDelta等
任务4~6: Anchor锚点及适应性设置
锚点：相对于父物体 的对齐方式
RectTransform的位置是根据Anchor与Pivot的相对位置来计算的
AnchoredPosition: Pivot与四个锚点的中心的相对位置
rectTransform.localPosition: pivot与父物体的几何中心点的相对位置
任务8: 获取UI宽高最安全的方式
RectTransform有两个属性: Width和Height，如何在脚本中获取呢
在定位模式下(四个锚点在一起)，sizeDelta的值可以视为Width和Height
但是在拉伸模式下(锚点分开了)，此时sizeDelta的值变为(-(Left+Right), -(Top+Bottom))，用处不大
获取RectTransform的属性值的方式：
RectTransform rectTransform = transform as RectTran sform;
rectTransform.rect.width;
rectTransform.rect.height;
任务9：BluePrint蓝图模式和RawEditMode原始编辑模式
BluePrint 蓝图模式：
在蓝图模式时：旋转或缩放时，响应区域的大小不受影响
应用：当UI显示本身需要旋转或缩放(比如动画等)，但是响应区域不变时可勾选
比如：
RawEditMode 原始编辑模式：
在原始编辑模式时：修改Pivot和Anchor的值时不会改变Pivot或Anchor的点的位置，而是会改变UI的位置以符合Pivot和Anchor的值（注意，手动拖动锚点或轴心点则不受该模式影响）
任务10：Canvas的三种渲染模式
Canvas组件的RenderMode：
ScreenSpace-Overlay: 画布和摄像机位置无关，画布永远在最上层
Pixel Perfect: 抗锯齿效果有的时候会导致像素的略微的改变（比如会有1px的偏差）
如果勾选上该属性，则会忽略抗锯齿效果带来的像素改变。
ScreenSpace-Camera: 画布和摄像机位置有关，画布作为摄像机视域的一个切面
切面与摄像机的距离由PlaneDistance控制
WorldSpace: 将画布作为一个3D物体，位于世界坐标中，可以任意指定RectTransform的位置等
[画布为摄像机视域的切面：]
任务11：Constant Pixel Size
Canvas Scaler组件：
https://blog.csdn.net/gz_huangzl/article/details/52484611
作用于该Canvas下的所有UI元素的缩放与像素密度
UI Scale Mode:
Constant Pixel Size
Scale With Screen Size
Constant Physical Size
Constant Pixel Size:
像素大小为常量，即一张n*n的图片在任何分辨率下都占用n*n像素
Scale Factor: 缩放倍数
比如一个Image的width=300,height=400, ScaleFactor=0.5时，Image的width和height值不变，但是实际显示在屏幕上的尺寸却为150*200
Reference Pixels Per Unit: 每一个UI单位表示的像素数
If a sprite has this 'Pixels Per Unit' setting, then one pixel in the sprite will cover one unit in the UI.
该值可以和图片的一个值放在一起看
TextureType=Sprite的图片的Pixels Per Unit属性：
该图片的100像素在Unity的世界坐标中代表1个unit
如果该图片原始尺寸为128*128，则该图片大小为1.28unit*1.28unit
即如果将该图片和一个scale为1.28*1.28的单位游戏物体放在一起，大小相同
当该图片的Pixels Per Unit属性调为50时，128*128的像素表示2.56*2.56unit
此时该图片与1.28*1.28的单位游戏物体放在一起
假设现有一张128*128大小的图片，其Pixels Per Unit = 100；
则它正常情况在世界坐标中占用的空间为1.28 unit * 1.28 unit
若它所在的CanvasScaler.ReferencePixelsPerUnit = 100
则一个世界坐标单位换算成UI中变为100个ui单位
则它UI中显示的宽高为128*128
若它所在的CanvasScaler.ReferencePixelsPerUnit = 50
则它UI中显示的宽高为(1.28*50) * (1.28*50)
任务12：Constant Pixel Size模式下的UI适配
该模式下，无论屏幕分辨率如何改变，UI大小不变
比如在1920*1080分辨率下摆放的UI，在1280*720下UI大小不变，会导致错位
1920*1080下
1280*720下
UI适配方法：脚本动态修改CanvasScaler中ScaleFactor的值
float wScale = Screen.width / 1920f; float hScale = Screen.height / 1080f; // 因为长宽比可能不同，所以wScale和hScale可能不同 // 这里选择比例变化更大的作为缩放比例，也可以视具体想要实现的效果而定 float scale = wScale > hScale ? wScale : hScale; GetComponent<CanvasScaler>().scaleFactor = scale;
任务13：最常用的UI适配方式 -- Scale With Screen Size
顾名思义，即根据屏幕大小进行缩放
Reference Resolution: 设置UI时的默认窗口分辨率
注意，这种情况下，该值与Game视窗的长宽比需要一致，不然会有问题
Screen Match Mode:
Match Width Or Height:
针对宽或者高的值进行等比例缩放
Expand:
Shrink: