Cocos Creator 多分辨率完美适配系列-3（背景适配实
本系列教程指引：
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
过程如下：
- 求出设计分辨率在画布（SHOW ALL 模式下）的实际宽高
- 将实际宽高的设计分辨率 缩放 至宽高刚好包含画布大小
- 计算过程如下：
- 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
本系列教程指引：
