主題
Cocos Creator不同手機(jī)分辨率的背景圖像和場景內(nèi)容適配
特別說明
CocosCreator微信小游戲開發(fā)系列文章，是我在逐步開發(fā)過程中，基于官方文檔之上，記錄一些重點(diǎn)內(nèi)容，以及對官方文檔中有些知識點(diǎn)的補(bǔ)充和分析。
正文
我在《微信小游戲開發(fā)之Cocos Creator系列文章》中，寫Cocos Creator項目配置時，提到了Canvas默認(rèn)分辨率設(shè)置，微信推薦使用的設(shè)計稿分辨率是750x1334（iphone6的屏幕尺寸），然后把模擬器的分辨率尺寸也設(shè)成了750x1334。
當(dāng)我發(fā)布構(gòu)建，在微信開發(fā)者工具運(yùn)行時，哦豁，怎么會有黑邊呢，突然想起來現(xiàn)在市面上的手機(jī)分辨率五花八門的，肯定要做屏幕多分辨率適配的啊，大意了啊，我沒有閃。
按照慣例，先看下當(dāng)設(shè)計分辨率和屏幕分辨率出現(xiàn)差異時，Cocos Creator 官方建議如何進(jìn)行適配呢？
有興趣的可以去看下cocos官方文檔《多分辨率適配方案》的詳細(xì)介紹，我直接總結(jié)一下官方文檔中的適配方案：
文檔中的適配主要是靠Canvas組件節(jié)點(diǎn)上的兩個選項：
適配高度（Fit Height）適配寬度（Fit Width）
下面是這兩個選項適合使用的情形：
設(shè)計分辨率寬高比大于屏幕分辨率寬高比，勾選Fit Height，可以避免屏幕可見區(qū)域內(nèi)出現(xiàn)黑邊，之后配合Widget（對齊掛件）調(diào)整 UI 元素的位置，來保證 UI 元素出現(xiàn)在屏幕可見區(qū)域內(nèi)。設(shè)計分辨率寬高比小于屏幕分辨率寬高比，勾選Fit Width，可以避免出現(xiàn)黑邊，同樣需要配合Widget（對齊掛件）來調(diào)整 UI 元素的位置，使UI 元素出現(xiàn)在屏幕可見區(qū)域內(nèi)。比例相同的情況，隨便勾選哪一個都可以。
為什么是設(shè)計分辨率寬高比大于屏幕分辨率寬高比時，適配高度而不是適配高度呢？
來看看它的適配過程:
假設(shè)設(shè)計分辨率寬高是800 x 480，屏幕分辨率寬高是1024 x 768
1. 先算以下兩個值：
* A1: 屏幕分辨率寬 / 設(shè)計分辨率寬 = 1024 / 800 = 1.28
* A2: 屏幕分辨率高 / 設(shè)計分辨率高 = 768 / 480 = 1.6
2. 適配實(shí)際是將場景圖像放大 "A1或A2" 倍
3. 假設(shè)放到A1倍：分辨率變成 800*1.28 / 480*1.28 = 1024 / 614.4
可以看到高度其實(shí)還沒有達(dá)到當(dāng)前屏幕的高度，所以還是會出現(xiàn)黑邊
4. 放到A2倍：分辨率變成 800*1.6 / 480*1.6 = 1280 / 768
可以看到寬高都達(dá)到當(dāng)前屏幕寬高度，
只是寬度有部分超出屏幕被裁剪掉了，
但不會出現(xiàn)黑邊
5. 所以，設(shè)計分辨率寬高比大于屏幕分辨率時，適配高度。
同理，如果是設(shè)計分辨率寬高比小于屏幕分辨率寬高比，就應(yīng)當(dāng)適配寬度。
文檔中還提到了其他的幾種適配策略，但是他們都有可能出現(xiàn)黑邊：
SHOW_ALL模式：同時勾選
Fit Height和Fit Width，圖像內(nèi)容不會失真，場景圖像等比進(jìn)行縮放，縮放比例是取屏幕寬/設(shè)計分辨率寬與屏幕高/設(shè)計分辨率高中較小的一個值。NO_BORDER模式：
Fit Height和Fit Width兩個都不勾選，圖像內(nèi)容不會失真，但會有裁剪，場景圖像等比進(jìn)行縮放，縮放比例是取屏幕寬/設(shè)計分辨率寬與屏幕高/設(shè)計分辨率高中較大的一個值。EXACT_FIT模式：不詳細(xì)介紹了，官方也是一筆帶過。
看到這里，你會發(fā)現(xiàn)因為手機(jī)屏幕的分辨率實(shí)在太多，屏幕分辨率寬高比大于小于設(shè)計分辨率寬高比的手機(jī)屏幕都會有，所以在編輯器上勾選Fit Height和Fit Width中的某一個或者多個，都沒有辦法適配所有屏幕，那應(yīng)該怎么辦呢？
方案一：動態(tài)選擇啟用 Fit Height 模式和 Fit Width 模式
既然編輯器上怎么勾選都會有問題，那我們可以動態(tài)地判斷屏幕分辨率寬高比來選擇啟用Fit Height模式和Fit Width模式啊。
直接上代碼：
//FullScreenAdapter.js
cc.Class({
extends: cc.Component,
onLoad () {
//監(jiān)聽窗口大小變化時的回調(diào)，每次窗口變化都要自動適配
cc.view.setResizeCallback(() => this.screenAdapter());
this.screenAdapter();
},
/**
* Fit Height 模式：適用于寬大于高的屏幕
* Fit Width 模式：適用于高大于寬的屏幕
*/
screenAdapter() {
//當(dāng)前屏幕分辨率比例
let screenRatio = cc.winSize.width / cc.winSize.height;
//設(shè)計稿分辨率比例
let designRatio = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height;
if (screenRatio <= 1) {
//屏幕高度大于或等于寬度,即豎屏
if (screenRatio <= designRatio) {
this.setFitWidth();
} else {
//此時屏幕比例大于設(shè)計比例
//為了保證縱向的游戲內(nèi)容不受影響，應(yīng)該使用 fitHeight 模式
this.setFitHeight();
}
} else {
//屏幕寬度大于高度,即橫屏
this.setFitHeight();
}
},
setFitWidth() {
cc.Canvas.instance.fitHeight = false;
cc.Canvas.instance.fitWidth = true;
},
setFitHeight() {
cc.Canvas.instance.fitHeight = true;
cc.Canvas.instance.fitWidth = false;
}
});
把上面的js腳本掛載到Canvas節(jié)點(diǎn)上，就可以簡單的實(shí)現(xiàn)所有屏幕適配了。
注意： 如果項目運(yùn)行在可動態(tài)調(diào)整窗口大小的平臺（比如瀏覽器），最好每次調(diào)整窗口都刷新一下頁面。
方案二：基于SHOW_ALL模式，動態(tài)設(shè)置最大父節(jié)點(diǎn)的scale屬性
這個方案比較麻煩，但是確實(shí)可以實(shí)現(xiàn)所有屏幕的適配，大家有興趣可以去看看“Cocos Creator 多分辨率完美適配”系列文章。
劉海屏和水滴屏等手機(jī)狀態(tài)欄的適配
現(xiàn)在市面上的手機(jī)額頭上千奇百怪的狀態(tài)，什么劉海啊、水滴啊、挖孔啊、伸縮啊，為了用戶體驗，沒辦法我們也要去適配它。
方法很簡單，我們只要獲取微信菜單按鈕（右上角膠囊按鈕）距離屏幕頂部的距離，然后設(shè)置一下頂部節(jié)點(diǎn)的paddingTop就可以了，直接上代碼吧：
let menuInfo = wx.getMenuButtonBoundingClientRect();
let systemInfo = wx.getSystemInfoSync();
let paddingTop = this.node.parent.height * (menuInfo.top / systemInfo.screenHeight);
let widget = this.node.getComponent(cc.Widget);
widget.top = paddingTop;
widget.isAbsoluteTop = true;
widget.isAlignTop = true;
widget.updateAlignment();
介紹cocos提供的幾個獲取View的方法
cc.view.getDesignResolutionSize()
獲取的是你在編輯器中設(shè)計的分辨率，也就是canvas 組件下設(shè)置的設(shè)計分辨率。
cc.view.getFrameSize()
獲取各種手機(jī)、pad上的屏幕分辨率，也就是硬件分辨率。
cc.view.getVisibleSizeInPixel()
獲取的是 visibleSize 的基礎(chǔ)上乘以各種適配策略下的縮放比例后的分辨率。
cc.view.getVisibleSize()
返回視圖窗口可見區(qū)域尺寸
總結(jié)
多分辨率適配的核心原理是動態(tài)改變Canvas節(jié)點(diǎn)或者其他節(jié)點(diǎn)的scale屬性，熟悉Cocos Api文檔的各個方法，能為我們解決各種疑難問題提供豐富的思路。
結(jié)尾
既然您看到這了，說明文章對你還有吸引力，幫忙點(diǎn)個贊再走吧，謝謝！
關(guān)注我的公眾號「掉隊程序員」，持續(xù)輸出更多內(nèi)容！
自己動手寫，分解項目中的各個模塊需求，通過查文檔和搜索Cocos社區(qū)，解決碰到的問題，最終在微信上線了下面這款微信小游戲《成語錦衣衛(wèi)》，歡迎大家掃碼體驗，并作為參考項目模版，開發(fā)出屬于自己的小游戲
預(yù)告
下一節(jié)和朋友們說一說：Toast插件的使用，一直提示“readFile:fail permission denied”的原因
