Cocos Creator 在設(shè)計(jì)之初就致力于解決一套資源適配多種分辨率屏幕的問(wèn)題昭殉。簡(jiǎn)單概括來(lái)說(shuō)，我們通過(guò)以下幾個(gè)部分完成多分辨率適配解決方案：
- Canvas（畫(huà)布）組件隨時(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（九宮格精靈圖）則提供了可任意指定尺寸的圖像，同樣可以滿(mǎn)足各式各樣的對(duì)齊要求讹躯，在任何屏幕分辨率上都顯示高精度的圖像菩彬。
接下來(lái)我們首先了解設(shè)計(jì)分辨率、屏幕分辨率的概念潮梯，才能理解 Canvas（畫(huà)布）組件的縮放作用
設(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è)備屏幕可見(jiàn)區(qū)域下面。我們使用 Canvas 組件提供的 適配寬度（Fit Width）模式，將設(shè)計(jì)分辨率的寬度自動(dòng)撐滿(mǎn)屏幕寬度绩聘，也就是將場(chǎng)景放大 1920/800 = 2.4 倍沥割。
在設(shè)計(jì)分辨率寬高比較小時(shí)，使用這種模式會(huì)裁剪掉屏幕上下一部分背景圖凿菩。
不管屏幕寬高比如何机杜，完整顯示設(shè)計(jì)分辨率中的所有內(nèi)容，允許出現(xiàn)黑邊
最后一個(gè)例子衅谷，我們屏幕分辨率假設(shè)為 640 x 960 的豎屏椒拗，如果要確保背景圖像完整的在屏幕中顯示，需要同時(shí)開(kāi)啟 Canvas 組件中的 適配高度 和 適配寬度获黔，這時(shí)場(chǎng)景圖像的縮放比例是按照屏幕分辨率中較小的一維來(lái)計(jì)算的蚀苛，在下圖的例子中，由于屏幕寬高比小于 1玷氏，就會(huì)以寬度為準(zhǔn)計(jì)算縮放倍率堵未，即 640/800 = 0.8 倍。
在這種顯示模式下盏触，屏幕上可能會(huì)出現(xiàn)黑邊渗蟹，或超出設(shè)計(jì)分辨率的場(chǎng)景圖像（穿幫）。盡管一般情況下開(kāi)發(fā)者會(huì)盡量避免黑邊赞辩，但如果需要確保設(shè)計(jì)分辨率范圍的所有內(nèi)容都顯示在屏幕上雌芽，也可以采用這種模式。
根據(jù)屏幕寬高比诗宣，自動(dòng)選擇適配寬度或適配高度
如果對(duì)于屏幕周?chē)赡鼙患舨玫膬?nèi)容沒(méi)有嚴(yán)格要求膘怕，也可以不開(kāi)啟 Canvas 組件中任何適配模式，這時(shí)會(huì)根據(jù)屏幕寬高比自動(dòng)選擇 適配高度 或 適配寬度 來(lái)避免黑邊召庞。也就是說(shuō)岛心，設(shè)計(jì)分辨率寬高比大于屏幕分辨率時(shí)，會(huì)自動(dòng)適配高度（上面第一張圖）篮灼；設(shè)計(jì)分辨率寬高比小于屏幕分辨率時(shí)忘古，會(huì)自動(dòng)適配寬度（上面第二張圖）。
Canvas 組件不提供分別縮放 x 和 y 軸縮放率诅诱，會(huì)使圖像變形拉伸的適配模式
在 Cocos 引擎中髓堪，也存在稱(chēng)為 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）：在無(wú)黑邊的模式中，Canvas 的 Size 屬性會(huì)和屏幕分辨率保持一致革半。在有黑邊的模式中碑定，Canvas 的 Size 會(huì)保持設(shè)計(jì)分辨率不變。
由于運(yùn)行時(shí) Canvas 可以準(zhǔn)確獲得屏幕可見(jiàn)區(qū)域的尺寸又官，我們就可以根據(jù)這個(gè)尺寸來(lái)設(shè)置 UI 元素的對(duì)齊策略延刘，來(lái)保證 UI 元素都能在屏幕可見(jiàn)區(qū)域正確顯示。
