SIKI_Unity_3_进阶_UGUI整体解决方案(基础篇)

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: