UGUI多分辨率适配解析

发表于2016-07-22
评论0 1k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594
      之所以是解析而不是方式,是因为我觉得网上各种适配方式有很多,各不相同。可能各有各的想法,各有各的优势。我这是以我自己的理解来提出对其实现原理的一点看法。 

Anchor 
      锚点这个概念在Unity文档的多分辨率适配中被明确的提到其作用。简单的说,就是定位。如果一个物体相对于屏幕位置左上角,那么无论屏幕分辨率怎么变化,它始终位于左上角。同理,如果是在(0,0)原点,那么也始终在中心原点。我对锚点定义为,锚点,是相对于父节点的偏移量,这个偏移量随屏幕分辨率变化而按比例变化,如果将分辨率的宽,高,看做归一化的数值(即0~1,实际UGUI就是这么做的),那么锚点是指一个偏移百分比。所以有了锚点,子节点在相对于父节点的位置上保持不变的。 
如图,参考分辨率960*640,我改变GameView的分辨率为800*468,图中绿色背景大小960*640,红色Image大小100*100,红色图片的锚点为左上,轴点为左上,在参考分辨率下,红色正方形的左上顶点距离Canvas左上顶点距离(50,-150) 


       当我将屏幕分辨率切换为800*468后, 
       因为我选的Screen Match Mode为Weight = 0,所以在800 * 468分辨率下的实际屏幕高度为 960 * (468/800)= 561.6。 
       又因为我的UI Scale Mode选的是Scale with Screen Size随屏幕尺寸变化,这个时候的缩放比是由宽度决定的,960/800 = 1.2 ,所以红色正方形此时的高度为100 / 1.2= 83.333 
       红色正方向锚点y轴坐标 = 参考锚点位置 * 缩放比 = 150 * 1.2 = 125,有兴趣可以测量一下 

缩放(CanvasScalar) 
       屏幕分辨率的改变,势必带来大小的变化。为了解释清楚这种变化,要指出的是Canvas的大小,不是设备屏幕大小,而是视口大小,视口的大小决定我们能看到的内容大小,然后再讲视口通过放大,缩小,拉伸,映射到设备的实际屏幕分辨率上。那么在CanvasScalar上的Scale With  Screen Size实际就是指这种视口到实际屏幕的大小变化,而Screen Math Mode是指视口的大小变化。 
所以参看上图,当我在GameView中改变了屏幕分辨率大小,因为我的Screen Math Mode是以Width为基准,所以Unity就以宽度为基准来改变了视口的大小。因为在改为800*468后,宽度不变,960,高度则变化为561.6。这样的视口在高度上所见内容比640要少(你可以发现字没有了),但是这样做,能让视口的高宽比,适应屏幕高宽比 
1、假设你的一张背景图正好在960*561的显示区域内,它被投射到屏幕上时,其内容是完整的,只是放大缩小了而已,但决不会出现拉伸,也就是失真变形。 
2、但实际上事与愿违,我们不可能为每个分辨率准备一套合适的图片,所以当视口大小改变,原来的图就可能会被裁切,又或是视口可见范围大于图片内容。而且这张图的高宽比,有可能不同于屏幕高宽比。那么这个时候,如果我们要达到(1)的效果,就必须将这种图的内容压缩在960*561的大小中,这样就形成了失真变形。这也是为什么有些手机游戏的屏幕适配是以变形来完成的。 

适配 
      上述的分析意在分析多分辨下高宽变化的原理,接下来就给出我理解的集中适配方案 
1、准备多套不同高宽比的图。最直接,但是也没人会用的吧,除非闲的蛋疼 
2、我们需要对界面元素进行分类(3D就不解释了,场景做大点,很好解决,2D实际上参考界面就行) 
a、全屏显示,又需要显示完整内容的,这种情况因为是内容完整优先,那么只能采用拉伸(AspectRatioFitter,指定屏幕分辨率) 
b、全平显示,且重复内容的,这种因为是一个纹理不停的重复,所以尺寸比视口大也没关系,反正就是一个纹理平铺了多少而已,这个时候使用扩大贴图尺寸超过视口 
c、非全屏显示的,但是对位置有要求的(按钮,图标),使用锚点 
d、非全屏显示,对位置没有要求的(2D动画人物,一些对位置没有要求的按钮,图标),Scale With  Screen Size,让它随屏幕缩放吧 
e、一些特殊的提示框,这种界面,因为其内容特殊性,可能无论在任何屏幕大小下,都要保持固定大小,比如loading弹出框,提示用户的信息等,这个就使用Constant Pixel Size 
       当然上述几点只是粗略总结,具体情况还是要根据需要使用。
   看了上面的文章 热爱游戏创作的你是不是已经开始热血沸腾了呢?是不是迫不及待的想加入游戏团队成为里面的一员呢?
        福利来啦~赶快加入腾讯GAD交流群,人满封群!每天分享游戏开发内部干货、教学视频、福利活动、和有相同梦想的人在一起,更有腾讯游戏专家手把手教你做游戏!
腾讯GAD游戏程序交流群:484290331

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台