本系列教程指引：
1. 詳細(xì)了解 SHOW ALL 模式
在之前第一節(jié)中甜紫，我們提及到 Cocos Creator 的一種的屏幕適配方式（SHOW ALL），也就是 Canvas 兩個都 Fit 都勾選
也提及到這種適配模式可能會出現(xiàn) 上下黑邊 或者 左右黑邊 。注意馒索，是只會有這兩種黑邊類型鞠抑，不會出現(xiàn)其他組合的黑邊，如：上下左右黑邊仆百、上左黑邊绽淘。
那么實(shí)際上企量， SHOW ALL 模式是怎么進(jìn)行適配的呢测萎？參考下方官方提供的一張圖
按照上圖，我們 不難 得出 SHOW ALL 模式下適配過程為
1. 先算以下兩個值：
* A1: 畫布分辨率寬 / 設(shè)計(jì)分辨率寬
* A2: 畫布分辨率高 / 設(shè)計(jì)分辨率高
2. 取 A1届巩、A2 最小值
3. 設(shè)計(jì)分辨率寬硅瞧、高分別乘以最小值，即為實(shí)際畫布上的我們設(shè)計(jì)稿的寬高了
按照上圖：
A1: 畫布分辨率寬 / 設(shè)計(jì)分辨率寬 = 640 / 800 = 0.8
A2: 畫布分辨率高 / 設(shè)計(jì)分辨率高 = 960 / 480 = 2
設(shè)計(jì)稿在畫布上的寬度 = 800 x 0.8 = 640
設(shè)計(jì)稿在畫布上的高度 = 480 x 0.8 = 384
大家可以對對看恕汇，是不是剛好等于紅框中腕唧，白色內(nèi)容的尺寸！ 那么問題來了瘾英？為什么是乘以最小值呢枣接？
因?yàn)檫@個模式叫 SHOW ALL，意思為在畫布上完整展示我們的設(shè)計(jì)分辨率下的設(shè)計(jì)稿內(nèi)容缺谴。為了保證這一點(diǎn)但惶，我們需要按照最小縮放比例，也就是最小值去進(jìn)行適配湿蛔。而如果乘以最大值膀曾，以上圖為例，那么就會變成下方這個適配結(jié)果
很明顯阳啥，在實(shí)際顯示時添谊，我們會缺失設(shè)計(jì)搞左右兩邊部分內(nèi)容。
至此察迟，我們已經(jīng)完成了對 SHOW ALL 模式的理解斩狱。理解 SHOW ALL 模式對于我們后續(xù)的適配方案是十分有必要的
PS：理解整個適配過程之后，大家是否可以理解到為什么只可能出現(xiàn) 上下黑邊 或者 左右黑邊 呢卷拘？又是什么時候才會出現(xiàn)呢喊废？（作者比較懶，讀者可以自行腦補(bǔ)栗弟，或者贊賞到一定程度可以召喚作者）
2. 背景適配實(shí)現(xiàn)
通過上一節(jié)的理解污筷，相信大家對 SHOW ALL 模式已經(jīng)有一定理解了。回歸到我們主題瓣蛀，如何做背景適配呢陆蟆？
可能不少朋友會直接用 Widget 組件，直接將背景拉伸至和設(shè)計(jì)分辨率寬高一致惋增。如果實(shí)際畫布分辨率和設(shè)計(jì)分辨率一致叠殷，那么這種做法問題不大，但是如果不一致诈皿，那么會出現(xiàn)很明顯的拉伸感林束，會讓用戶覺得“這個游戲開發(fā)得不用心”。
需要肯定的是拉伸是一種適配手段稽亏，但我們肯定不止于拉伸壶冒。了解SHOW ALL 模式之后，我們可以用 縮放 去做背景適配截歉。
那么 SHOW ALL 模式下應(yīng)該怎么縮放呢胖腾？先上圖示
過程如下：
- 求出設(shè)計(jì)分辨率在畫布（SHOW ALL 模式下）的實(shí)際寬高
- 將實(shí)際寬高的設(shè)計(jì)分辨率 縮放 至寬高剛好包含畫布大小
- 計(jì)算過程如下：
- B1: 畫布寬度 / 設(shè)計(jì)稿實(shí)際寬度
- B2: 畫布高度 / 設(shè)計(jì)稿實(shí)際高度
- 取B1，B2最大值瘪松，修改節(jié)點(diǎn)縮放值為最大值即可
- 計(jì)算過程如下：
偽代碼如下：
A1: 畫布分辨率寬 / 設(shè)計(jì)分辨率寬 = 640 / 800 = 0.8
A2: 畫布分辨率高 / 設(shè)計(jì)分辨率高 = 960 / 480 = 2
設(shè)計(jì)稿在畫布上的寬度 = 800 x 0.8 = 640
設(shè)計(jì)稿在畫布上的高度 = 480 x 0.8 = 384
B1: 畫布寬度 / 設(shè)計(jì)稿實(shí)際寬度 = 640 / 640 = 1
B2: 畫布高度 / 設(shè)計(jì)稿實(shí)際高度 = 960 / 384 = 2.5
this.node.sacle = 2.5
對應(yīng)實(shí)際代碼如下：
// 1. 先找到 SHOW_ALL 模式適配之后咸作，本節(jié)點(diǎn)的實(shí)際寬高以及初始縮放值
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. 基于第一步的數(shù)據(jù)，再做縮放適配
this.node.scale = Math.max(
cc.view.getCanvasSize().width / realWidth,
cc.view.getCanvasSize().height / realHeight
);
3. 驗(yàn)證適配結(jié)果
為了方便驗(yàn)證結(jié)果宵睦，我們只需要創(chuàng)建一個 Background 節(jié)點(diǎn)并加入一個 Sprite 組件，節(jié)點(diǎn)采用上面適配代碼就可以了壳嚎。
實(shí)際運(yùn)行后毫胜，我們?nèi)山M結(jié)果演示：
上面是同一張圖片在不同分辨率下的 縮放 適配，無須美術(shù)弄多張圖诬辈，一張圖足以酵使，只是可能會有點(diǎn)模糊，但是整體適配效果還是不錯的焙糟。
為了方便大家使用口渔，上面代碼（其實(shí)也就4行）已經(jīng)弄成了一個 組件 刃滓，下載下來直接拖入到背景節(jié)點(diǎn)即可鲫咽。
更多源碼和示例，歡迎打開下方 Github 項(xiàng)目劳秋，如果覺得還不錯悦穿，還可以 Star 一下呢~
https://github.com/zhitaocai/CocosCreator-Multi-resolution-Adapter
4. 總結(jié)
至此攻礼，我們的「背景適配」基本告一段落了，現(xiàn)在大家理解 SHOW ALL 模式下的縮放適配了嗎栗柒？我們來做一下總結(jié)：
- 本章我們其實(shí)是在 SHOW ALL 模式基礎(chǔ)上礁扮，再將我們的內(nèi)容縮放至剛好包含畫布，本質(zhì)上上一種 縮放適配 方案。
- 對于圖片背景之類的太伊，采用這種 縮放 方案問題不大雇锡，但是我們游戲的實(shí)際內(nèi)容肯定是不能 縮放 適配的。
- 那么對于游戲內(nèi)容適配僚焦，我們應(yīng)該采用的是 重置寬高 的適配方案锰提。 重置寬高 是我自己的一個叫法，其實(shí)本質(zhì)是將我們的 游戲內(nèi)容節(jié)點(diǎn)寬高適配為畫布大小 芳悲，下一章我們將詳細(xì)說明 內(nèi)容適配實(shí)現(xiàn)
本系列教程指引：
- Cocos Creator 多分辨率完美適配系列-1（現(xiàn)狀與最終效果）
- Cocos Creator 多分辨率完美適配系列-2（部署驗(yàn)證設(shè)置）
- Cocos Creator 多分辨率完美適配系列-3（背景適配實(shí)現(xiàn)）
- ??Cocos Creator 多分辨率完美適配系列-4（內(nèi)容適配實(shí)現(xiàn)）
- Cocos Creator 多分辨率完美適配系列-5（貼邊欄動畫實(shí)現(xiàn)）
- Cocos Creator 多分辨率完美適配系列-6（劉海屏適配）
- Cocos Creator 多分辨率完美適配系列-7（封裝庫使用）
