本系列教程指引：
1. 詳細了解 SHOW ALL 模式
在之前第一節中，我們提及到 Cocos Creator 的一種的屏幕適配方式（SHOW ALL），也就是 Canvas 兩個都 Fit 都勾選
也提及到這種適配模式可能會出現 上下黑邊 或者 左右黑邊 。注意，是只會有這兩種黑邊類型，不會出現其他組合的黑邊，如：上下左右黑邊、上左黑邊。
那么實際上， SHOW ALL 模式是怎么進行適配的呢？參考下方官方提供的一張圖
按照上圖，我們 不難 得出 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 模式的理解。理解 SHOW ALL 模式對于我們后續的適配方案是十分有必要的
PS：理解整個適配過程之后，大家是否可以理解到為什么只可能出現 上下黑邊 或者 左右黑邊 呢？又是什么時候才會出現呢？（作者比較懶，讀者可以自行腦補，或者贊賞到一定程度可以召喚作者）
2. 背景適配實現
通過上一節的理解，相信大家對 SHOW ALL 模式已經有一定理解了。回歸到我們主題，如何做背景適配呢？
可能不少朋友會直接用 Widget 組件，直接將背景拉伸至和設計分辨率寬高一致。如果實際畫布分辨率和設計分辨率一致，那么這種做法問題不大，但是如果不一致，那么會出現很明顯的拉伸感，會讓用戶覺得“這個游戲開發得不用心”。
需要肯定的是拉伸是一種適配手段，但我們肯定不止于拉伸。了解SHOW ALL 模式之后，我們可以用 縮放 去做背景適配。
那么 SHOW ALL 模式下應該怎么縮放呢？先上圖示
過程如下：
- 求出設計分辨率在畫布（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 組件，節點采用上面適配代碼就可以了。
實際運行后，我們取兩組結果演示：
上面是同一張圖片在不同分辨率下的 縮放 適配，無須美術弄多張圖，一張圖足以，只是可能會有點模糊，但是整體適配效果還是不錯的。
為了方便大家使用，上面代碼（其實也就4行）已經弄成了一個 組件 ，下載下來直接拖入到背景節點即可。
更多源碼和示例，歡迎打開下方 Github 項目，如果覺得還不錯，還可以 Star 一下呢~
https://github.com/zhitaocai/CocosCreator-Multi-resolution-Adapter
4. 總結
至此，我們的「背景適配」基本告一段落了，現在大家理解 SHOW ALL 模式下的縮放適配了嗎？我們來做一下總結：
- 本章我們其實是在 SHOW ALL 模式基礎上，再將我們的內容縮放至剛好包含畫布，本質上上一種 縮放適配 方案。
- 對于圖片背景之類的，采用這種 縮放 方案問題不大，但是我們游戲的實際內容肯定是不能 縮放 適配的。
- 那么對于游戲內容適配，我們應該采用的是 重置寬高 的適配方案。 重置寬高 是我自己的一個叫法，其實本質是將我們的 游戲內容節點寬高適配為畫布大小 ，下一章我們將詳細說明 內容適配實現
本系列教程指引：
