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: