二 多解析度適配方案

2021-09-11 14:14:56 字數 1945 閱讀 6132

cocos creator 在設計之初就致力於解決一套資源適配多種解析度螢幕的問題。簡單概括來說,我們通過以下幾個部分完成多解析度適配解決方案:

接下來我們首先了解設計解析度、螢幕解析度的概念,才能理解 canvas(畫布)元件的縮放作用 ###設計解析度和螢幕解析度 設計解析度 是內容生產者在製作場景時使用的解析度藍本,而 螢幕解析度 是遊戲在裝置上執行時的實際螢幕顯示解析度。

通常設計解析度會採用市場目標群體中使用率最高的裝置的螢幕解析度,比如目前安卓裝置中 800x480 和 1280x720 兩種螢幕解析度,或 ios 裝置中 1136x640 和 960x640 兩種螢幕解析度。這樣當美術或策劃使用設計解析度設定好場景後,就可以自動適配最主要的目標人群裝置。

那麼當設計解析度和螢幕解析度出現差異時,cocos creator 會如何進行適配呢?

假設我們的設計解析度為 800x480, 美術製作了乙個同樣解析度大小的背景影象。

###設計解析度和螢幕解析度寬高比相同 在螢幕解析度的寬高比和設計解析度相同時,假如螢幕解析度是 1600x960,正好將背景影象放大 1600/800 = 2 倍 就可以完美適配螢幕。這是最簡單的情況,這裡不再贅述。 ###設計解析度寬高比大於螢幕解析度,適配高度避免黑邊 假設螢幕解析度是 1920x960,同樣在下圖中以紅色方框表示裝置螢幕可見區域。我們使用 canvas 元件提供的 適配寬度(fit width)模式,將設計解析度的寬度自動撐滿螢幕寬度,也就是將場景放大 1920/800 = 2.4 倍。

在設計解析度寬高比較小時,使用這種模式會裁剪掉螢幕上下一部分背景圖。

###不管螢幕寬高比如何,完整顯示設計解析度中的所有內容,允許出現黑邊 最後乙個例子,我們螢幕解析度假設為 640 x 960 的豎屏,如果要確保背景影象完整的在螢幕中顯示,需要同時開啟 canvas 元件中的 適配高度 和 適配寬度,這時場景影象的縮放比例是按照螢幕解析度中較小的一維來計算的,在下圖的例子中,由於螢幕寬高比小於 1,就會以寬度為準計算縮放倍率,即 640/800 = 0.8 倍。

在這種顯示模式下,螢幕上可能會出現黑邊,或超出設計解析度的場景影象(穿幫)。儘管一般情況下開發者會盡量避免黑邊,但如果需要確保設計解析度範圍的所有內容都顯示在螢幕上,也可以採用這種模式。 ###根據螢幕寬高比,自動選擇適配寬度或適配高度 如果對於螢幕周圍可能被剪裁的內容沒有嚴格要求,也可以不開啟 canvas 元件中任何適配模式,這時會根據螢幕寬高比自動選擇 適配高度 或 適配寬度 來避免黑邊。也就是說,設計解析度寬高比大於螢幕解析度時,會自動適配高度(上面第一張圖);設計解析度寬高比小於螢幕解析度時,會自動適配寬度(上面第二張圖)。 ###canvas 元件不提供分別縮放 x 和 y 軸縮放率,會使影象變形拉伸的適配模式 在 cocos 引擎中,也存在稱為 exactfit 的適配模式,這種模式沒有黑邊,也不會裁剪設計解析度範圍內的影象。但是代價是場景影象的 x 和 y 方向的縮放倍率不同,影象會產生形變拉伸。

###在場景中使用 canvas 元件 新建場景時,會自動在場景根節點上新增乙個包含 canvas 元件的節點。在 canvas 元件上就可以設定上文中提到的選項:

位置(position)屬性會保持在 (width/2, height/2),也就是和設計解析度相同大小的螢幕中心。

由於錨點(anchor)屬性的預設值會設定為(0.5, 0.5),canvas 會保持在螢幕中心位置,並且 canvas 的子節點會以螢幕中心作為座標系原點,這一點和 cocos 引擎中的習慣不同,請格外注意。 ###執行時 canvas 的特性 除了上述特性外,執行時 canvas 元件還會有以下屬性變化:

* 縮放(scale):根據前文中描述的縮放倍率計算原則,將計算後的縮放倍率賦值給 scale 屬性。 * 尺寸(size):在無黑邊的模式中,canvas 的 size 屬性會和螢幕解析度保持一致。在有黑邊的模式中,canvas 的 size 會保持設計解析度不變。

由於執行時 canvas 可以準確獲得螢幕可見區域的尺寸,我們就可以根據這個尺寸來設定 ui 元素的對齊策略,來保證 ui 元素都能在螢幕可見區域正確顯示。

Android多解析度適配方案

一 android常見的度量單位 二 android drawable的載入原理 如何縮放 若手機螢幕密度 320dp xhdpi 2.0x 放在drawable xhdpi目錄下,顯示原始大小,不會失真 放在drawable xxhdpi目錄下,縮小,可能失真 放在drawable hdpi目錄下...

adnriod 多解析度適配

如何將乙個應用程式適配在不同的手機上,雖然這不算是乙個技術問題,但是對於剛剛做螢幕的開發人員來說,還真不是一件多麼簡單的事情。首先 你需要在androidmanifest.xml檔案的元素如下新增子元素 android normalscreens true android anydensity tr...

android多解析度適配

前一階段開發android專案,由於客戶要求進行多解析度適配,能夠支援國內主流的解析度手機。因此經過了幾次開發走了很多彎路,目前剛剛領略了android多解析度適配的一些方法。先介紹一下所走的彎路,由於android的布局檔案存放在res的layout中,可以根據不同的手機解析度指定特定的layou...