本系列教程指引：

1. Cocos Creator 多分辨率完美适配系列-1（现状与最终效果）
2. Cocos Creator 多分辨率完美适配系列-2（部署验证设置）
3. Cocos Creator 多分辨率完美适配系列-3（背景适配实现）
4. Cocos Creator 多分辨率完美适配系列-4（内容适配实现）
5. Cocos Creator 多分辨率完美适配系列-5（贴边栏动画实现）
6. Cocos Creator 多分辨率完美适配系列-6（刘海屏适配）
7. Cocos Creator 多分辨率完美适配系列-7（封装库使用）

1. 详细了解 SHOW ALL 模式

在之前第一节中，我们提及到 Cocos Creator 的一种的屏幕适配方式（SHOW ALL），也就是 Canvas 两个都 Fit 都勾选

SHOW_ALL_SETTINGS.png

也提及到这种适配模式可能会出现 上下黑边 或者 左右黑边 。注意，是只会有这两种黑边类型，不会出现其他组合的黑边，如：上下左右黑边、上左黑边。

那么实际上， SHOW ALL 模式是怎么进行适配的呢？参考下方官方提供的一张图

SHOW_ALL_ADAPTER

按照上图，我们 不难 得出 SHOW ALL 模式下适配过程为

1. 先算以下两个值：
    * A1: 画布分辨率宽 / 设计分辨率宽
    * A2: 画布分辨率高 / 设计分辨率高
2. 取 A1、A2 最小值
3. 设计分辨率宽、高分别乘以最小值，即为实际画布上的我们设计稿的宽高了

按照上图：

A1: 画布分辨率宽 / 设计分辨率宽 = 640 / 800 = 0.8
A2: 画布分辨率高 / 设计分辨率高 = 960 / 480 = 2

设计稿在画布上的宽度 = 800 x 0.8 = 640
设计稿在画布上的高度 = 480 x 0.8 = 384

大家可以对对看，是不是刚好等于红框中，白色内容的尺寸！ 那么问题来了？为什么是乘以最小值呢？

因为这个模式叫 SHOW ALL，意思为在画布上完整展示我们的设计分辨率下的设计稿内容。为了保证这一点，我们需要按照最小缩放比例，也就是最小值去进行适配。而如果乘以最大值，以上图为例，那么就会变成下方这个适配结果

SHOW_ALL_MAX_DESIGN.png

很明显，在实际显示时，我们会缺失设计搞左右两边部分内容。

至此，我们已经完成了对 SHOW ALL 模式的理解。理解 SHOW ALL 模式对于我们后续的适配方案是十分有必要的

PS：理解整个适配过程之后，大家是否可以理解到为什么只可能出现 上下黑边 或者 左右黑边 呢？又是什么时候才会出现呢？（作者比较懒，读者可以自行脑补，或者赞赏到一定程度可以召唤作者）

2. 背景适配实现

通过上一节的理解，相信大家对 SHOW ALL 模式已经有一定理解了。回归到我们主题，如何做背景适配呢？

可能不少朋友会直接用 Widget 组件，直接将背景拉伸至和设计分辨率宽高一致。如果实际画布分辨率和设计分辨率一致，那么这种做法问题不大，但是如果不一致，那么会出现很明显的拉伸感，会让用户觉得“这个游戏开发得不用心”。

需要肯定的是拉伸是一种适配手段，但我们肯定不止于拉伸。了解SHOW ALL 模式之后，我们可以用 缩放 去做背景适配。

那么 SHOW ALL 模式下应该怎么缩放呢？先上图示

BACKGROUND_ADAPTER_PROCESS.png

过程如下：

1. 求出设计分辨率在画布（SHOW ALL 模式下）的实际宽高
2. 将实际宽高的设计分辨率 缩放 至宽高刚好包含画布大小
   • 计算过程如下：
     • B1: 画布宽度 / 设计稿实际宽度
     • B2: 画布高度 / 设计稿实际高度
     • 取B1，B2最大值，修改节点缩放值为最大值即可

伪代码如下：

A1: 画布分辨率宽 / 设计分辨率宽 = 640 / 800 = 0.8
A2: 画布分辨率高 / 设计分辨率高 = 960 / 480 = 2

设计稿在画布上的宽度 = 800 x 0.8 = 640
设计稿在画布上的高度 = 480 x 0.8 = 384

B1: 画布宽度 / 设计稿实际宽度 = 640 / 640 = 1 
B2: 画布高度 / 设计稿实际高度 = 960 / 384 = 2.5

this.node.sacle = 2.5

对应实际代码如下：

// 1. 先找到 SHOW_ALL 模式适配之后，本节点的实际宽高以及初始缩放值
let scaleForShowAll = Math.min(
  cc.view.getCanvasSize().width / this.node.width, 
  cc.view.getCanvasSize().height / this.node.height
);
let realWidth = this.node.width * scaleForShowAll;
let realHeight = this.node.height * scaleForShowAll;

// 2. 基于第一步的数据，再做缩放适配
this.node.scale = Math.max(
  cc.view.getCanvasSize().width / realWidth, 
  cc.view.getCanvasSize().height / realHeight
 );

3. 验证适配结果

为了方便验证结果，我们只需要创建一个 Background 节点并加入一个 Sprite 组件，节点采用上面适配代码就可以了。

实际运行后，我们取两组结果演示：

BACKGROUND_ADAPTER_RESULT.png

上面是同一张图片在不同分辨率下的 缩放 适配，无须美术弄多张图，一张图足以，只是可能会有点模糊，但是整体适配效果还是不错的。

为了方便大家使用，上面代码（其实也就4行）已经弄成了一个 组件 ，下载下来直接拖入到背景节点即可。

更多源码和示例，欢迎打开下方 Github 项目，如果觉得还不错，还可以 Star 一下呢~

https://github.com/zhitaocai/CocosCreator-Multi-resolution-Adapter

4. 进入下一个章节

至此，我们的「背景适配」基本告一段落了，现在大家理解 SHOW ALL 模式下的缩放适配了吗？如果文章有描述不清楚的或者错漏之处，欢迎留言或者指正或者赞赏。

pay.png

本系列教程指引：

1. Cocos Creator 多分辨率完美适配系列-1（现状与最终效果）
2. Cocos Creator 多分辨率完美适配系列-2（部署验证设置）
3. Cocos Creator 多分辨率完美适配系列-3（背景适配实现）
4. 👉Cocos Creator 多分辨率完美适配系列-4（内容适配实现）
5. Cocos Creator 多分辨率完美适配系列-5（贴边栏动画实现）
6. Cocos Creator 多分辨率完美适配系列-6（刘海屏适配）
7. Cocos Creator 多分辨率完美适配系列-7（封装库使用）