Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配

时间:2024-04-08 19:16:28

Canvas节点的宽高是和屏幕一致的 中心点在xy轴的中间
Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配

Rect Transform介绍

UGUI的Image节点RectTransform组件
Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配

  • scale 缩放
  • position 位置(注:相对于其父节点 即Canvas)
    以父节点为(0,0)
    Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配
    (相对点)
    相对点可以拖动 与此同时position的值也会相应改变
  • pivot 图片的中心点的位置 (0,0)是左下角 (1,1)是右上角 默认(0.5,0.5)*
    若中心点设为(0,0) 那么位置为(0,0)的时候 Canvas的中心会在图片的左下角位置
    Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配
    Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配
  • rotation 旋转
  • Anchors 中心点
    图片的中心点不能移出父节点的宽高范围
    但可以设置中心点的位置:
    Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配
    Min和Max的值也是范围为0-1的百分比
    当中心点处于右上角 那么改变像素后 依旧还会是在右上角 因为是根据比例换算的

实现UI屏幕适配

首先 找准界面布局的停靠点
左上 右上 左下 右下 上 下 左 右

在Canvas下创建一个空节点 再在该空节点下创建一个Image节点
此时 子图片的中心点的范围受限
Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配
这是因为不能超过其父亲的宽高:
Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配
此时 只需将子Image的父节点宽高设为0:
Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配
然后修改其父亲的中心点即可:
Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配
Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配

百分比显示

在拖动中心点的时候会显示百分比 此时可以精确控制中心点的百分比

最终的节点结构差不多是这样的:
Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配

总结

1、首先确定设计分辨率
Unity学习笔记(08):Rect Transform组件及实现不同尺寸分辨率的UI屏幕适配
2、配置UI界面上的Canvas节点
3、确保背景图的大小能够充满所有种类的屏幕 重要的景物都在主屏幕
(主流分辨率通常为1920X1080)
4、UI布局的时候找准停靠点(左上 右上 左下 右下 上 下 左 右之类的)