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