UGUI多分辨率适配解析
发表于2016-07-22
之所以是解析而不是方式，是因为我觉得网上各种适配方式有很多，各不相同。可能各有各的想法，各有各的优势。我这是以我自己的理解来提出对其实现原理的一点看法。
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