本系列教程指引：

1. Cocos Creator 多分辨率完美適配系列-1（現(xiàn)狀與最終效果）
2. Cocos Creator 多分辨率完美適配系列-2（部署驗(yàn)證設(shè)置）
3. Cocos Creator 多分辨率完美適配系列-3（背景適配實(shí)現(xiàn)）
4. Cocos Creator 多分辨率完美適配系列-4（內(nèi)容適配實(shí)現(xiàn)）
5. Cocos Creator 多分辨率完美適配系列-5（貼邊欄動(dòng)畫(huà)實(shí)現(xiàn)）
6. Cocos Creator 多分辨率完美適配系列-6（劉海屏適配）
7. Cocos Creator 多分辨率完美適配系列-7（封裝庫(kù)使用）

1. 詳細(xì)了解 SHOW ALL 模式

在之前第一節(jié)中，我們提及到 Cocos Creator 的一種的屏幕適配方式（SHOW ALL），也就是 Canvas 兩個(gè)都 Fit 都勾選

SHOW_ALL_SETTINGS.png

也提及到這種適配模式可能會(huì)出現(xiàn) 上下黑邊 或者 左右黑邊 。注意，是只會(huì)有這兩種黑邊類型，不會(huì)出現(xiàn)其他組合的黑邊，如：上下左右黑邊、上左黑邊。

那么實(shí)際上， SHOW ALL 模式是怎么進(jìn)行適配的呢？參考下方官方提供的一張圖

SHOW_ALL_ADAPTER

按照上圖，我們 不難 得出 SHOW ALL 模式下適配過(guò)程為

1. 先算以下兩個(gè)值：
    * A1: 畫(huà)布分辨率寬 / 設(shè)計(jì)分辨率寬
    * A2: 畫(huà)布分辨率高 / 設(shè)計(jì)分辨率高
2. 取 A1、A2 最小值
3. 設(shè)計(jì)分辨率寬、高分別乘以最小值，即為實(shí)際畫(huà)布上的我們?cè)O(shè)計(jì)稿的寬高了

按照上圖：

A1: 畫(huà)布分辨率寬 / 設(shè)計(jì)分辨率寬 = 640 / 800 = 0.8
A2: 畫(huà)布分辨率高 / 設(shè)計(jì)分辨率高 = 960 / 480 = 2

設(shè)計(jì)稿在畫(huà)布上的寬度 = 800 x 0.8 = 640
設(shè)計(jì)稿在畫(huà)布上的高度 = 480 x 0.8 = 384

大家可以對(duì)對(duì)看，是不是剛好等于紅框中，白色內(nèi)容的尺寸！ 那么問(wèn)題來(lái)了？為什么是乘以最小值呢？

因?yàn)檫@個(gè)模式叫 SHOW ALL，意思為在畫(huà)布上完整展示我們的設(shè)計(jì)分辨率下的設(shè)計(jì)稿內(nèi)容。為了保證這一點(diǎn)，我們需要按照最小縮放比例，也就是最小值去進(jìn)行適配。而如果乘以最大值，以上圖為例，那么就會(huì)變成下方這個(gè)適配結(jié)果

SHOW_ALL_MAX_DESIGN.png

很明顯，在實(shí)際顯示時(shí)，我們會(huì)缺失設(shè)計(jì)搞左右兩邊部分內(nèi)容。

至此，我們已經(jīng)完成了對(duì) SHOW ALL 模式的理解。理解 SHOW ALL 模式對(duì)于我們后續(xù)的適配方案是十分有必要的

PS：理解整個(gè)適配過(guò)程之后，大家是否可以理解到為什么只可能出現(xiàn) 上下黑邊 或者 左右黑邊 呢？又是什么時(shí)候才會(huì)出現(xiàn)呢？（作者比較懶，讀者可以自行腦補(bǔ)，或者贊賞到一定程度可以召喚作者）

2. 背景適配實(shí)現(xiàn)

通過(guò)上一節(jié)的理解，相信大家對(duì) SHOW ALL 模式已經(jīng)有一定理解了?；貧w到我們主題，如何做背景適配呢？

可能不少朋友會(huì)直接用 Widget 組件，直接將背景拉伸至和設(shè)計(jì)分辨率寬高一致。如果實(shí)際畫(huà)布分辨率和設(shè)計(jì)分辨率一致，那么這種做法問(wèn)題不大，但是如果不一致，那么會(huì)出現(xiàn)很明顯的拉伸感，會(huì)讓用戶覺(jué)得“這個(gè)游戲開(kāi)發(fā)得不用心”。

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

那么 SHOW ALL 模式下應(yīng)該怎么縮放呢？先上圖示

BACKGROUND_ADAPTER_PROCESS.png

過(guò)程如下：

1. 求出設(shè)計(jì)分辨率在畫(huà)布（SHOW ALL 模式下）的實(shí)際寬高
2. 將實(shí)際寬高的設(shè)計(jì)分辨率 縮放 至寬高剛好包含畫(huà)布大小
   • 計(jì)算過(guò)程如下：
     • B1: 畫(huà)布寬度 / 設(shè)計(jì)稿實(shí)際寬度
     • B2: 畫(huà)布高度 / 設(shè)計(jì)稿實(shí)際高度
     • 取B1，B2最大值，修改節(jié)點(diǎn)縮放值為最大值即可

偽代碼如下：

A1: 畫(huà)布分辨率寬 / 設(shè)計(jì)分辨率寬 = 640 / 800 = 0.8
A2: 畫(huà)布分辨率高 / 設(shè)計(jì)分辨率高 = 960 / 480 = 2

設(shè)計(jì)稿在畫(huà)布上的寬度 = 800 x 0.8 = 640
設(shè)計(jì)稿在畫(huà)布上的高度 = 480 x 0.8 = 384

B1: 畫(huà)布寬度 / 設(shè)計(jì)稿實(shí)際寬度 = 640 / 640 = 1 
B2: 畫(huà)布高度 / 設(shè)計(jì)稿實(shí)際高度 = 960 / 384 = 2.5

this.node.sacle = 2.5

對(duì)應(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é)果，我們只需要?jiǎng)?chuàng)建一個(gè) Background 節(jié)點(diǎn)并加入一個(gè) Sprite 組件，節(jié)點(diǎn)采用上面適配代碼就可以了。

實(shí)際運(yùn)行后，我們?nèi)山M結(jié)果演示：

BACKGROUND_ADAPTER_RESULT.png

上面是同一張圖片在不同分辨率下的 縮放 適配，無(wú)須美術(shù)弄多張圖，一張圖足以，只是可能會(huì)有點(diǎn)模糊，但是整體適配效果還是不錯(cuò)的。

為了方便大家使用，上面代碼（其實(shí)也就4行）已經(jīng)弄成了一個(gè) 組件 ，下載下來(lái)直接拖入到背景節(jié)點(diǎn)即可。

更多源碼和示例，歡迎打開(kāi)下方 Github 項(xiàng)目，如果覺(jué)得還不錯(cuò)，還可以 Star 一下呢~

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

4. 總結(jié)

至此，我們的「背景適配」基本告一段落了，現(xiàn)在大家理解 SHOW ALL 模式下的縮放適配了嗎？我們來(lái)做一下總結(jié)：

1. 本章我們其實(shí)是在 SHOW ALL 模式基礎(chǔ)上，再將我們的內(nèi)容縮放至剛好包含畫(huà)布，本質(zhì)上上一種 縮放適配 方案。
2. 對(duì)于圖片背景之類的，采用這種 縮放 方案問(wèn)題不大，但是我們游戲的實(shí)際內(nèi)容肯定是不能 縮放 適配的。
3. 那么對(duì)于游戲內(nèi)容適配，我們應(yīng)該采用的是 重置寬高 的適配方案。 重置寬高 是我自己的一個(gè)叫法，其實(shí)本質(zhì)是將我們的 游戲內(nèi)容節(jié)點(diǎn)寬高適配為畫(huà)布大小 ，下一章我們將詳細(xì)說(shuō)明 內(nèi)容適配實(shí)現(xiàn)

本系列教程指引：

1. Cocos Creator 多分辨率完美適配系列-1（現(xiàn)狀與最終效果）
2. Cocos Creator 多分辨率完美適配系列-2（部署驗(yàn)證設(shè)置）
3. Cocos Creator 多分辨率完美適配系列-3（背景適配實(shí)現(xiàn)）
4. ??Cocos Creator 多分辨率完美適配系列-4（內(nèi)容適配實(shí)現(xiàn)）
5. Cocos Creator 多分辨率完美適配系列-5（貼邊欄動(dòng)畫(huà)實(shí)現(xiàn)）
6. Cocos Creator 多分辨率完美適配系列-6（劉海屏適配）
7. Cocos Creator 多分辨率完美適配系列-7（封裝庫(kù)使用）