Cocos Creator 在設(shè)計(jì)之初就致力于解決一套資源適配多種分辨率屏幕的問題。簡(jiǎn)單概括來說，我們通過以下幾個(gè)部分完成多分辨率適配解決方案：

• Canvas（畫布）組件隨時(shí)獲得設(shè)備屏幕的實(shí)際分辨率并對(duì)場(chǎng)景中所有渲染元素進(jìn)行適當(dāng)?shù)目s放。
• Widget（對(duì)齊掛件）放置在渲染元素上，能夠根據(jù)需要將元素對(duì)齊父節(jié)點(diǎn)的不同參考位置。
• Label（文字）組件內(nèi)置了提供各種動(dòng)態(tài)文字排版模式的功能，當(dāng)文字的約束框由于 Widget 對(duì)齊要求發(fā)生變化時(shí)，文字會(huì)根據(jù)需要呈現(xiàn)完美的排版效果。
• Sliced Sprite（九宮格精靈圖）則提供了可任意指定尺寸的圖像，同樣可以滿足各式各樣的對(duì)齊要求，在任何屏幕分辨率上都顯示高精度的圖像。

接下來我們首先了解設(shè)計(jì)分辨率、屏幕分辨率的概念，才能理解 Canvas（畫布）組件的縮放作用

設(shè)計(jì)分辨率和屏幕分辨率

設(shè)計(jì)分辨率 是內(nèi)容生產(chǎn)者在制作場(chǎng)景時(shí)使用的分辨率藍(lán)本，而 屏幕分辨率 是游戲在設(shè)備上運(yùn)行時(shí)的實(shí)際屏幕顯示分辨率。

通常設(shè)計(jì)分辨率會(huì)采用市場(chǎng)目標(biāo)群體中使用率最高的設(shè)備的屏幕分辨率，比如目前安卓設(shè)備中 800x480 和 1280x720 兩種屏幕分辨率，或 iOS 設(shè)備中 1136x640 和 960x640 兩種屏幕分辨率。這樣當(dāng)美術(shù)或策劃使用設(shè)計(jì)分辨率設(shè)置好場(chǎng)景后，就可以自動(dòng)適配最主要的目標(biāo)人群設(shè)備。

那么當(dāng)設(shè)計(jì)分辨率和屏幕分辨率出現(xiàn)差異時(shí)，Cocos Creator 會(huì)如何進(jìn)行適配呢？

假設(shè)我們的設(shè)計(jì)分辨率為 800x480， 美術(shù)制作了一個(gè)同樣分辨率大小的背景圖像。

此處輸入圖片的描述

設(shè)計(jì)分辨率和屏幕分辨率寬高比相同

在屏幕分辨率的寬高比和設(shè)計(jì)分辨率相同時(shí)，假如屏幕分辨率是 1600x960，正好將背景圖像放大 1600/800 = 2 倍 就可以完美適配屏幕。這是最簡(jiǎn)單的情況，這里不再贅述。

設(shè)計(jì)分辨率寬高比大于屏幕分辨率，適配高度避免黑邊

假設(shè)屏幕分辨率是 1920x960，同樣在下圖中以紅色方框表示設(shè)備屏幕可見區(qū)域。我們使用 Canvas 組件提供的 適配寬度（Fit Width）模式，將設(shè)計(jì)分辨率的寬度自動(dòng)撐滿屏幕寬度，也就是將場(chǎng)景放大 1920/800 = 2.4 倍。

此處輸入圖片的描述

在設(shè)計(jì)分辨率寬高比較小時(shí)，使用這種模式會(huì)裁剪掉屏幕上下一部分背景圖。

不管屏幕寬高比如何，完整顯示設(shè)計(jì)分辨率中的所有內(nèi)容，允許出現(xiàn)黑邊

最后一個(gè)例子，我們屏幕分辨率假設(shè)為 640 x 960 的豎屏，如果要確保背景圖像完整的在屏幕中顯示，需要同時(shí)開啟 Canvas 組件中的 適配高度 和 適配寬度，這時(shí)場(chǎng)景圖像的縮放比例是按照屏幕分辨率中較小的一維來計(jì)算的，在下圖的例子中，由于屏幕寬高比小于 1，就會(huì)以寬度為準(zhǔn)計(jì)算縮放倍率，即 640/800 = 0.8 倍。

此處輸入圖片的描述

在這種顯示模式下，屏幕上可能會(huì)出現(xiàn)黑邊，或超出設(shè)計(jì)分辨率的場(chǎng)景圖像（穿幫）。盡管一般情況下開發(fā)者會(huì)盡量避免黑邊，但如果需要確保設(shè)計(jì)分辨率范圍的所有內(nèi)容都顯示在屏幕上，也可以采用這種模式。

根據(jù)屏幕寬高比，自動(dòng)選擇適配寬度或適配高度

如果對(duì)于屏幕周圍可能被剪裁的內(nèi)容沒有嚴(yán)格要求，也可以不開啟 Canvas 組件中任何適配模式，這時(shí)會(huì)根據(jù)屏幕寬高比自動(dòng)選擇 適配高度 或 適配寬度 來避免黑邊。也就是說，設(shè)計(jì)分辨率寬高比大于屏幕分辨率時(shí)，會(huì)自動(dòng)適配高度（上面第一張圖）；設(shè)計(jì)分辨率寬高比小于屏幕分辨率時(shí)，會(huì)自動(dòng)適配寬度（上面第二張圖）。

Canvas 組件不提供分別縮放 x 和 y 軸縮放率，會(huì)使圖像變形拉伸的適配模式

在 Cocos 引擎中，也存在稱為 ExactFit 的適配模式，這種模式?jīng)]有黑邊，也不會(huì)裁剪設(shè)計(jì)分辨率范圍內(nèi)的圖像。但是代價(jià)是場(chǎng)景圖像的 x 和 y 方向的縮放倍率不同，圖像會(huì)產(chǎn)生形變拉伸。

在場(chǎng)景中使用 Canvas 組件

新建場(chǎng)景時(shí)，會(huì)自動(dòng)在場(chǎng)景根節(jié)點(diǎn)上添加一個(gè)包含 Canvas 組件的節(jié)點(diǎn)。在 Canvas 組件上就可以設(shè)置上文中提到的選項(xiàng)：

• 設(shè)計(jì)分辨率（Design Resolution）
• 適配高度（Fit Height）

• 適配寬度（Fit Width）

  
  
  

  此處輸入圖片的描述
  
  

  將 Canvas 節(jié)點(diǎn)作為所有圖像渲染節(jié)點(diǎn)的根節(jié)點(diǎn)，這些節(jié)點(diǎn)就都可以自動(dòng)享受 Canvas 智能適配多分辨率的縮放效果了。

編輯場(chǎng)景時(shí) Canvas 的特性

在編輯場(chǎng)景時(shí)，Canvas 節(jié)點(diǎn)的尺寸（Size）屬性會(huì)保持和 設(shè)計(jì)分辨率 一致，不能手動(dòng)更改。

位置（Position）屬性會(huì)保持在 (width/2, height/2)，也就是和設(shè)計(jì)分辨率相同大小的屏幕中心。

由于錨點(diǎn)（Anchor）屬性的默認(rèn)值會(huì)設(shè)置為(0.5, 0.5)，Canvas 會(huì)保持在屏幕中心位置，并且 Canvas 的子節(jié)點(diǎn)會(huì)以屏幕中心作為坐標(biāo)系原點(diǎn)，這一點(diǎn)和 Cocos 引擎中的習(xí)慣不同，請(qǐng)格外注意。

運(yùn)行時(shí) Canvas 的特性

除了上述特性外，運(yùn)行時(shí) Canvas 組件還會(huì)有以下屬性變化：

*　縮放（Scale）：根據(jù)前文中描述的縮放倍率計(jì)算原則，將計(jì)算后的縮放倍率賦值給 Scale 屬性。
*　尺寸（Size）：在無黑邊的模式中，Canvas 的 Size 屬性會(huì)和屏幕分辨率保持一致。在有黑邊的模式中，Canvas 的 Size 會(huì)保持設(shè)計(jì)分辨率不變。

由于運(yùn)行時(shí) Canvas 可以準(zhǔn)確獲得屏幕可見區(qū)域的尺寸，我們就可以根據(jù)這個(gè)尺寸來設(shè)置 UI 元素的對(duì)齊策略，來保證 UI 元素都能在屏幕可見區(qū)域正確顯示。