屏幕分辨率对UI适配的影响
一般来说,UIRoot都会选择FixSize的缩放模式,这样可以让UI随着分辨率而自动缩放,保持和屏幕相对的大小比例不变,让UI整体看上去不会有变大变小的奇怪现象。但是,还有另一个真正严重的问题:不同屏幕的宽高比不一样。
在Unity中,不同屏幕的宽高比,一般都会以高度为基准而拉伸宽度。
切换屏幕比例模式的方法为在Game视图中的屏幕比例菜单,FreeAspect为不限长宽比,可以在其中选择想要的长宽比。
如果屏幕比例菜单中没有想要的屏幕比例,可以单击菜单最底部那个小较好按钮,会弹出一个让自定义一个新的屏幕比例模式的界面,Label选项中,可以输入一个名称来为这个自定义的屏幕比例命名。在Type中可以选择FixedResolution和Aspect Ratio两个选项,如果选择FixedResolution,可以在下面的Width&Height中输入分辨率的宽和高的具体像素;如果选择Aspect Ratio,可以在下面的Width&Height中输入分辨率的宽高比。设定好之后单击OK按钮,即可保存这个自定义的屏幕分辨率模式。
因为NGUI的UIRoot具备FixSize模式,所以,一般在进行UI随屏幕自适应时,主要着重解决的是屏幕宽高比发生变化之后的自适应。
主流设备的屏幕分辨率
不论是PC设备还是移动设备,屏幕分辨率一般处于4:3到16:9之间,一般来说,只需要考虑这两个值作为极限值即可。
自适应核心组件Anchor的使用
所谓Anchor,即为锚点,它的工作原理是它会自动地绑定摄像机的某一个点作为锚点,锚点一共有上左、上、上右、左、中、右、左下、下、右下9个点可以设定。当相机变动时,Anchor组件所在的物体位置也会跟随相机的变动而变动,并始终处于相机边界的锚点位置。
Anchor的创建方式,在Unity顶部NGUI菜单中选择Create->Anchor即可。
Anchor组件的设置:
UICamera选项自动锁定了该Anchor所在的UI的摄像机,它将会绑定这个摄像机边缘上的某一个点作为锚点。Container即为包含的物体,一般情况下无需设置,因为将物体放置于Anchor的子物体中,就可以利用“子物体跟随父物体”实现跟随Anchor的锚点。
Side一项为核心项,选择该Anchor的脑电,一共9个点,分别对应相机边缘的上左、上、上右、左、中、右、左下、下、右下。
RunOnlyOnce意为执行一次,即只在开始的时候进行一次适配,默认为勾选上,一把把不需要去修改它。
RelativeOffset,这是Anchor的相对位置偏移,百分比形式的。
PixelOffset,像素偏移,Anchor会相对于相机边缘上的锚点以像素为单位进行偏移。
使用Anchor的注意事项
(1)在设定了Anchor的Side锚点之后,Anchor会自动跑到响应的锚点位置上去,不需要手动拖动Anchor。
(2)不论是3D UI还是2D UI,Anchor的用法是一模一样的,不要手动拖动Anchor的位置。
(3)一般情况下,尽量不要去设置Anchor的RelativeOffset和PixelOffset,就让Anchor保持锚点原位置,然后将UI控件放到Anchor下作为子物体,再去调整UI控件的位置。
(4)Anchor物体身上,尽量保证只有Anchor一个组件,以便于管理维护。
(5)一套UI体系中,可以有无数多个Anchor(例如有5个Anchor都定位于左上角是被允许的),但是,尽量确保Anchor的父物体中没有Anchor,也就是尽量避免Anchor中套Anchor。Anchor的父物体可以是UI Root,也可以是一个空物体。
(6)不要滥用Anchor,如果相机边缘的9个锚点中的每个点都有多个Anchor来定位,那么一定是UI结构的实际有问题了。
正式开发UI之前必须明确的几个问题
(1)针对的是什么样的平台。
(2)游戏的设备屏幕宽高比最大、最小是几比几。
(3)游戏开发时的标准分辨率是多少像素,这将关系到美术制作图片资源的标准。
(4)检查UI设计草图,和策划人员明确哪些UI会在屏幕宽高比变化时自适应位置。
(5)明确需要自适应位置的UI分别属于哪一个锚点,并设计一个最佳的UI结构。