iphonex适配游戏_Cocos Creator 适配怎么做？

背景和原理

因为手机设备的尺寸不一，分辨率也不一样，这给游戏开发适配带来了一点工作量。为了保证多端基本一致的视觉体验，在开发游戏的时候需要做游戏的适配。

在游戏开发前，需要了解的一个概念是游戏的“设计尺寸”。这个是设计同学在输出设计稿的唯一参考，通常以最常见的设备尺寸作为设计基准。如iPhone 6：750 x 1334。

图片来自cocos creator官网

如果最终的设计稿尺寸是750 * 1334，那么在比这个更小的手机上怎么显示呢？比如iPhone 5：640 *1136，你不可能只显示的一部分。引擎底层的通常做法是将canvas画布设置一个scale缩放。

问题是scale的值怎么设定？在2D游戏中，分别可以做X和Y方向设置缩放值。如果X和Y的缩放值是一样的，就是等比缩放。如果不一样那就是不等比缩放，那么画布会产生压缩或拉伸效果。iPhone 6的宽高比：750/1334 = 0.5622，iPhone 5的宽高比：0.5633。基本接近，但不完全一样，再比如iPhone X：0.4618，差别更大。

一般情况下可能不太接受游戏画布拉伸或者压缩，因此只能适配一个，要么适配宽度，要么适配高度。其结果就是裁剪了一部分，或者出现黑边。实际做法是屏幕尺寸依旧是canvas的大小，开发者绘制的精灵全部在一个容器里面，只要对容器设置一个scale值。如果scale放大了，超出屏幕外的自然就会被裁剪掉，scale变小了就会出现黑边。

cocos 示例

在cocos编辑器中，选择图层中canvas就能看到设计尺寸的填写地方，另外可以选择适配高度还是宽度。如图，游戏的设计尺寸：750 * 1220。如果设备的尺寸刚好是这样，那么就是非常完美，无需适配，刚好把屏幕填满。

如果是iPhone 5，选择适配宽度，就会出现黑边（只先关注背景，因为其他按钮元素做了适配）。

如果是iPhone 5，选择适配高度，屏幕虽然被填满，但是细心一点会发现，背景图的宽度两边是被裁剪了一部分。

如果同时选了适配高度和宽度呢？那么不会裁剪，其效果就是和适配宽度是一样的，因为这样才能保留所有细节，因此垂直方向出现黑边。

Widget 挂件

图片来自cocos creator官网

Widge称之为对齐挂件：能够根据需要将元素对齐父节点的不同参考位置。其实是一个相对定位组件，相对于自己的父元素。顶部的三个按钮相对于屏幕上边的距离保持不变。

先看下图层结构：

三个元素还有一个父容器: daoju_layout，父容器有一个widget对齐组件，相对于canvas父元素，分别设置了距离left/top/right：20px。因此无论是在哪种设备下，相对画布的位置总是保持不变。所以针对游戏里面那些相对静止的元素可以通过这种定位方式，让整体布局看起来更优雅一点。

那么怎么填满背景的黑边呢？有两种方式
1：设计一张高度更大背景图，那么就能把黑色的区域填充满。
2：让背景存在一定的拉伸，也是通过widget组件

将上下左右全部勾上，且全部是0，这样就可以铺满。
如果是相对纯色的背景，可以采用这种方式。如果背景上的图案拉伸后会很丑就不适合这种，尤其是在iPhoneX下。如下图，拉伸和不拉伸的区别还是挺明显。

iPhone 5

iPhone X

这种情况应该把背景图的高度设计大一点就不会出现黑边。不会有一劳永逸的方法，根据游戏的特点，需要开发者自己去调整。最重要的是要理解适配多端背后的原因和原理，搞清楚了这点后，熟悉widget组件的用法就能很快的适配好游戏。