屏幕适配策略
1、什么是屏幕适配策略
屏幕适配策略包含了 3 个要素：
-
屏幕朝向
-
设计分辨率
-
适配策略
在羊了个羊的游戏中，我们的【屏幕适配策略】是这样的：
-
竖屏
-
设计分辨率为 750x1334
-
适配策略是： 如果屏幕更宽（比如说 iPad），那么高度适配，屏幕更长（iPhone16)，那么宽度适配。
具体是什么意思呢？下面逐一解释。
2、设计分辨率解决什么问题？
先说结论：
设计分辨率主要解决了【美术根据什么样的规范去设计整个游戏界面资源的问题】
在《羊了个羊》这个游戏中，我们确定了屏幕适配策略，并告知美术，于是美术就知道如何去出美术资源了。
美术出资源中，涉及适配策略的内容主要包含：
1） 游戏的背景图
2） 游戏中的 UI 元素布局
2.1 背景图
1）如果背景图是可以随便变形的，那么美术直接出成 750x1334 即可
2）如果背景图是可以平铺的，那么基本上和设计分辨率没什么关系，平铺即可
3）如果背景图必须保持比例，那么要考虑背景图是否允许缩放
3.1) 允许缩放，那么开发自己通过挂载缩放组件，去适配；
3.2) 不允许缩放，那么这时候，美术就必须考虑【适配策略】中的 2 种情况
3.2.1） 如果手机屏幕尺寸是更宽的（iPad），那么根据开发适配策略，如果美术出的图是 750x1334，那么进行高度适配后，屏幕左右两侧出现黑边。（这种情况下，美术有 2 种做法：A.提供图片，去补2侧黑边； B. 增加750这个宽度值到某个W，使其和 IPad 的宽高比一致。W 多少值呢？那取决于市面上最胖的那台设备的宽高比。或者综合考虑，看是否覆盖到哪个程度的机型来确定的）
3.2.2） 如果手机屏幕是更高的（iPhone16），那么根据开发适配策略，如果美术出的图是 750x1334，那么进行宽度适配后，屏幕上下两侧出现黑边。（同样的，美术通常的做法是，提供更高的图片，比如说 750x1750，具体原则和前面计算 W 值是类似的，这里不多说了。）
2.2 界面元素布局
美术出的界面元素，只能出现在 750x1334 的屏幕范围内，当然，要考虑到刘海屏、挖孔屏和小游戏平台的胶囊体对界面布局的影响。
综上所述，美术出图的策略，会影响到开发的适配，如果出的背景图是可拉伸的，那就非常的爽了，所以尽量去讨好美术大佬，让他们发挥自己的聪明才智，设计出这种背景图，才是最优解。
3、开发的适配策略
开发如何去将一套的美术资源显示在不同尺寸的设备屏幕的？
我们前面讲到了
如果屏幕更宽（比如说 iPad），那么高度适配，屏幕更长（iPhone16)，那么宽度适配。
这到底是什么意思呢？
我们来看具体的例子：
分别看 2 台设备：
1）iPad 屏幕是尺寸 1668x2224
2）iPhone16 屏幕尺寸是 1179x2556
如果不做适配，理论上两台设备上应该分别是这样显示的：
iPad
iPhone
其中黑色表示屏幕，蓝色图片是美术的图片（750x1334）（这里我们先假设美术出了一张不规范的图，因为它没有考虑黑边的情况）
iPad 高度适配以后，它将变成以下样式：
实际上引擎对画布做了缩放，缩放比例为：
2224/1334 ≈ 1.6672
iPhone 宽度适配以后，它将变成以下样式：
实际上引擎对画布做了缩放，缩放比例为：
1179/750 = 1.572
实际上我们确实发现，美术只要给出 2 黑边的解决方案所需的资源（或者允许缩放，拉伸），我们就能很快的修复这个黑边问题。
在确定适配策略以后，本篇最重要的东西来了。
【在确定了适配策略以后，请问，之前的这 2 台设备 iPad 和 iPhone16 上运行我们的游戏时， 画布 Canvas 和屏幕的关系是什么？】
只有搞定了最后这个问题，屏幕适配才算真正掌握了。
结论1：Canvas 画布和屏幕的关系是缩放关系。
画布 Canvas 的尺寸，在我们适配完毕后，就是 750x1334 + 黑边所组成的部分。它的尺寸分别是：
iPad 设备中的画布尺寸 = 1001 x 1334 (其中 1001 ≈ 1668/1.6672)
iPhone16设备中的画布尺寸 = 750 x1626（其中 1626 = 2556/1.572）
即我们做完适配策略后，Canvas 画布被标准化下来了。Canvas 要么比设计分辨率更胖，要么比设计分辨率更长，但是总有一边是“贴合”的。
我们所有以上的工作，都是为了让我们只需要去关心画布，不用关心设备尺寸（说白了就是解耦设备尺寸）。
当然，还会有需要关注的时候，比如胶囊体、刘海之类的，他们是在屏幕坐标系下的度量衡，并不是在我们的设计分辨率 750x1334 标准下的度量衡。
结论2： 同一对象，在 Canvas 画布的尺寸和设计分辨率的尺寸是一致的。
结论3：设计分辨率在 Canvas 画布中完全可见，并且宽和高至少有一个是相同的。
以上就是个人理解的适配策略，也一直沿用至今。
本节属于理论部分，下节将进入实操。
下一篇 屏幕适配策略-实操
