Canvas节点的宽高是和屏幕一致的 中心点在xy轴的中间
Rect Transform介绍
UGUI的Image节点有RectTransform组件
- scale 缩放
-
position 位置(注:相对于其父节点 即Canvas)
以父节点为(0,0)
(相对点)
相对点可以拖动 与此同时position的值也会相应改变 -
pivot 图片的中心点的位置 (0,0)是左下角 (1,1)是右上角 默认(0.5,0.5)*
若中心点设为(0,0) 那么位置为(0,0)的时候 Canvas的中心会在图片的左下角位置
- rotation 旋转
-
Anchors 中心点
图片的中心点不能移出父节点的宽高范围
但可以设置中心点的位置:
Min和Max的值也是范围为0-1的百分比
当中心点处于右上角 那么改变像素后 依旧还会是在右上角 因为是根据比例换算的
实现UI屏幕适配
首先 找准界面布局的停靠点
左上 右上 左下 右下 上 下 左 右
在Canvas下创建一个空节点 再在该空节点下创建一个Image节点
此时 子图片的中心点的范围受限
这是因为不能超过其父亲的宽高:
此时 只需将子Image的父节点宽高设为0:
然后修改其父亲的中心点即可:
百分比显示
在拖动中心点的时候会显示百分比 此时可以精确控制中心点的百分比
最终的节点结构差不多是这样的:
总结
1、首先确定设计分辨率
2、配置UI界面上的Canvas节点
3、确保背景图的大小能够充满所有种类的屏幕 重要的景物都在主屏幕
(主流分辨率通常为1920X1080)
4、UI布局的时候找准停靠点(左上 右上 左下 右下 上 下 左 右之类的)