关于Unity中的屏幕适配

一、Game视图的屏幕分辨率可以先自定义添加,供以后选择,以下是手游经常用到的分辨率:

1.1136X640,iPhone5

2.1920X1080,横屏,主流游戏都是这个分辨率

3.1080X1920,竖屏

4.960X640,横屏iPhone4

5.640X960,竖屏iPhone

6.768X1024,ipad

7.800X480

8.480X800

Screen Space(Overlay)模式下的Canvas节点的Rect Transform组件的Width和Height是随着Game视图的分辨率的选择而改变的,是不能手写修改的,但是其子节点的Rect Transform组件是可以改变的。 

二、Image节点的Rect Transform组件是可以修改的,其中:

1.PosX,PosY,PosZ(0)表示Image节点在父节点下的相对坐标,以父节点的菊花为参照原点(0,0),可以修改菊花的位置,这时候PosX,PosY也就自动改变了。

2.ScaleX,ScaleY,ScaleZ表示Image节点的缩放,可以让节点随着自己设置的值拉伸收缩

3.Pivot:中心点,支点。定义图片的中心点在哪里,就是相当于Cocos2d里面的精灵的锚点,这个点是受PosX,Pos影响的,也就是说,这个点到父节点原点的距离就是PosX,PosY。Pivot(0,0)在左下角,Pivot(1,1)在右上角,Pivot(0.5,0.5)在中心

4.Rotation旋转,可以选择Scene视图的2D按钮来让视图更好调整。

5.那朵菊花,也就是父节点的原点,可以在父节点的范围内随意移动的,这个只能在子节点的Inspector面板里面设置因为父节点Canvas是不能更改Rect transform组件的。

 菊花不能超过父节点的范围,它是相对于父亲的百分比来算的,这样改变父节点的大小,菊花还是在哪个位置。

 其中Anchors属性(相对父亲的停靠点),是和左上角的图案配套来设置父节点的菊花位置的。Anchors min max 表示四小朵菊花瓣的位置,四小朵菊花瓣组成了大菊花。目前只知道4朵花瓣和在一起可以表示父节点的原点,分开的四朵花瓣的作用还没有搞清楚。

 除了那9个代表性的菊花的位置外,还可以自己设置菊花的位置,可以占用某一列下来的百分比,或者某一行的百分比,通过用鼠标拖拽在Scene视图里面移动可以看到视图中有百分比数值在变化,只要看到自己想要的停下了就行了。

三、菊花的作用:

一个父节点下面有很多的子节点,每个子节点都有自己相对于父节点的菊花,也就是说Image子节点的菊花可以在左上角,然后它把自己的Pivot设置成(0,1),这样,再把自己的PosX,PosY,设置成(0,0),就可以把Image节点附着到父节点的左上角了。

其他的子节点可以根据自己想附着的位置而设置自己的菊花位置。

 四、屏幕适配准备工作:

创建一个Canvas节点

设置Canvas节点的Canvas组件的Render Mode为Screen Space(Overlay)

创建一个Image类型的UI节点在Canvas父节点下面

设置图片的Texture Type为Sprite

把图片拖进Image节点的Source Image属性下面

点击Image节点的Set Native Size

设置Canvas节点的Canvas Scaler组件的UI Scale Mode为Scale With Screen Size

设置Canvas节点的Canvas Scaler组件的Reference Resolution为640X960,这个是美术的设计分辨率

设置Image的ScaleX,ScaleY,数值为640/512,640是640X960的宽,512是图片的宽度,让背景图片尽可能地覆盖Canvas,超出一点也没关系。

做背景图的时候要长一点,这样就可以适配所以分辨率的要求,不然如果是按照宽度适配的话,上下会不断改变,而按照高度适配的话,左右会不断改变,我们一般选择用宽度适配,

也就是设置Canvas节点的Canvas Scaler组件的UI Scale Mode为Scale With Screen Size,设置Canvas节点的Canvas Scaler组件的Match拉条,拉到Width,所以美术要做高背景图。

 五、屏幕适配开始解决方案:

一个Canvas下面有很多的子节点,每个子节点的宽高设置为0,然后每个子节点自己的子节点的菊花就不能移动,然后改变Canvas子节点的菊花位置到中上位置,这样子节点的子节点就会被固定在Canvas中上的位置,不管怎么改变Game视图的分辨率,Canvas怎么变化,子节点的子节点还是在中上的位置,这就是屏幕适配。

面试会问UGUI的屏幕适配策略

原文地址:https://www.cnblogs.com/HangZhe/p/6853736.html