深入浅出 Creator 引擎屏幕适配底层原理

本文不讲屏幕适配的具体操作，而是讲解Cocos Creator引擎底层是如何来处理屏幕适配的，屏幕适配的策略与参数引擎底层是如何来用的。

先来看下关于屏幕适配的用户设置的参数如图1.1所示:

 

设计分辨率: 设计宽度x设计高度;

适配屏幕宽度:  bool值;

适配屏幕高度: bool值;

 

1:把两个维度的适配变换到适配一个维度

屏幕适配是针对UI操作的，不是针对游戏地图与游戏中的战斗元素的。游戏地图可以滚动来实现同一个大小的地图适配到不同分辨率的手机，但是UI操作都在一个平面内，只有UI才有屏幕适配。

屏幕适配的本质就是把一个 UI布局中的物体，部署到不同的面积大小的房间里(不同分辨率的屏幕)。一个UI布局有两个维度，宽度与高度，各种手机的屏幕的宽度与高度都不一样，可想而知，如果我们做适配的时候，要考虑两个维度的不同来放置物体，这样我们用户处理起来会比较麻烦，所以Cocos Creator的策略就是调整所有的屏幕的分辨率到一种”中间状态”(逻辑分辨率),使得所有的不同分辨率的手机屏幕，在一个维度上是一样的。

再做屏幕适配的时候，只需要在另外一个维度上，把UI物体部署好就可以了。这样降低了开发者做屏幕适配的难度。具体如何做呢？方案如下:

手机屏幕A 1920x1080,手机屏幕B 2532x1170, 我们要找一个中间状态，比如我们把宽度,都变换到同一个大小，如960, 手机屏幕A的等比”中间状态”的分辨率为960x540(1080*960/1920),手机屏幕B的等比”中间状态”的分辨率为960x443.60 (1170*960/2532),这样我们在一个维度固定的情况下，只要适配另外一个维度布局就可以了，简化了用户做适配时的操作。同理我们也可以把高度变化到同一个大小，然后去适配宽度。而每个手机屏幕都有一个中间状态转换比例,如手机屏幕A: 960/1920，手机屏幕B:

960/2532。

 

2: 游戏引擎绘制UI图片时的处理

  当游戏引擎的UI的坐标系都是按照”中间状态”(逻辑坐标)来布局的时候,引擎在最后绘制的时候要乘上这个中间状态转换比例,才是最终绘制时候的像素大小。每个UI图片素材有个设计时的原始大小,而对于游戏引擎而言，最好的UI图片素材的大小的参考与中间状态固定的维度一样, 这样引擎就直接把图片的大小x中间状态转换比例,就得到了UI元素绘制时候的大小。 所以在做UI设计的时候，UI图片的设计大小都基于我们的固定的那个维度与大小，如上面宽度固定960, 高度上UI设计时用哪个为参考呢？理论上来说哪个都可以，一般我们会选一个与我们目标手机相同的比例，比如16:9,这样就可以根据一个固定维度得到另外一个维度，这样UI设计分辨率就有了。

 

总结一下:

  适配屏幕宽度/高度: 指定了逻辑分辨率时按照哪个比例来转换,固定宽度，就以宽度为统一，所有手机的逻辑分辨率都变换到宽度一样;固定高度,以高度为统一，所有手机的逻辑分辨率都变换到高度一样。

  策略定下来了，游戏引擎底层会把UI元素的图片大小*转换比例，来作为最终的像素大小，所以UI图片的设计分辨率的参考一个维度就出来,如上例子就是960。

  最后另外一个维度的设计分辨率，可以随便开发者定义，一般用目标玩家主流的手机分辨率的比例一样，这样自己选一个高度，比如我们选640。这样得到设计分辨率960x640。

 

到底用固定宽度还是固定高度，还是根据游戏的特点与选取，一般横屏游戏用固定高度，竖屏游戏用固定宽度。但是如果某一个维度的UI很复杂，适配起来比较麻烦，我们可以把复杂的那个维度作为固定的维度。

 

今天的分享就到这里了，希望大家对这几个参数有深刻的了解。以及站在引擎的角度来看适配。