感覺官網的這篇文章很不錯，為了自己日後檢視方便，就轉過來了～ 下面是正題：

多種解析度的適配一直都是一個蛋疼的問題，各家公司可能都有自己的一套方案。今天我為大家介紹的是我們在多款遊戲裡實踐後的解決方案，相對來說成本和實現難度都較低，效果也很不錯。

多種解析度適配的原理

因為橫屏和豎屏的原理完全相同，所以本文先以豎屏為例，後文再說明橫屏的處理。

製作一張 640×960 畫素的圖片，並傳入裝置檢視：

1. 檢視時將圖片縮放到合適大小，確保圖片左右兩邊正好填滿整個螢幕。
2. 在不同解析度的裝置上，這張圖片的顯示效果差異體現在圖片上下是否能夠填滿螢幕。

例如在 480×800 的裝置上，這張 640×960 圖片會被縮小為 480×720 畫素來顯示，左右填滿螢幕，上下出現黑邊。

在一些常見解析度中，圖片的顯示效果：

縮放比例 = 螢幕畫素寬度 / 圖片畫素寬度

• 螢幕尺寸 _640x960 畫素，縮放比例 100%，正好填滿整個螢幕
• 螢幕尺寸 640×1136 畫素，縮放比例 100%，上下有黑邊
• 螢幕尺寸 _480x800 畫素，縮放比例 _75%，圖片縮放後尺寸 _480x720 畫素，上下有黑邊
• 螢幕尺寸 _480x854 畫素，縮放比例 _75%，圖片縮放後尺寸 _480x720 畫素，上下有黑邊
• 螢幕尺寸 768×1024 畫素，縮放比例 120%，圖片縮放後尺寸 768×1152 畫素，無黑邊，但影象上下有裁剪（超出螢幕無法顯示）

上下有黑邊是肯定不好看的。那要保證填滿螢幕，我們只需要將圖片做得更大一點就可以了。圖片高度的計算：

圖片高度 = 螢幕畫素高度 / (螢幕畫素寬度 / 圖片畫素寬度)

按照這個公式，上述解析度，圖片的高度應該是：

• 螢幕尺寸 _640x960 畫素，影象高度 960 畫素
• 螢幕尺寸 640×1136 畫素，影象高度 1136 畫素
• 螢幕尺寸 _480x800 畫素，影象高度 1066.67 畫素
• 螢幕尺寸 _480x854 畫素，影象高度 1138.67 畫素
• 螢幕尺寸 768×1024 畫素，影象高度 853.3 畫素

其中最大值是 1138.67，考慮製作方便，高度取值 1140。也就是說 640×1140 的圖片可以完全填滿上述各種解析度的螢幕。

在遊戲裡我們也可以借鑑這種方式。不管螢幕多大，反正我把遊戲場景的寬度都給定死，就是 640。那麼在不同裝置上，要處理的問題就是場景高度的變化。以此為基礎，適配多種解析度的原理

1. 遊戲場景的寬度固定。
2. 根據螢幕解析度計算出遊戲場景的高度。
3. 使用較大的背景圖，確保任何解析度下都可以填滿螢幕。
4. 根據場景高度來定位顯示內容。

虛擬解析度

為了和裝置螢幕解析度區別開，我將遊戲裡使用的解析度稱為“虛擬解析度”。

在“虛擬解析度”中，座標系的尺寸是“點”。後文稱為“Point，縮寫為 pt”。

根據前面計算圖片高度的公式，在不同裝置上，虛擬解析度的寬度是固定的，而高度則不同。在 quick-cocos2d-x 裡要實現這個虛擬解析度的自動計算，只需要使用“FIXED_WIDTH”螢幕縮放策略。

開啟 config.lua 檔案，指定以下程式碼即可：

CONFIG_SCREEN_WIDTH     = 640
CONFIG_SCREEN_HEIGHT    = 960
CONFIG_SCREEN_AUTOSCALE = "FIXED_WIDTH"

1. CONFIG_SCREEN_WIDTH 和 CONFIG_SCREEN_HEIGHT 定義了一個“虛擬解析度”的參考值。
2. 遊戲引擎根據參考值和 CONFIG_SCREEN_AUTOSCALE 設定，最終計算出在裝置上使用的“虛擬解析度”。

我們在 quick-cocos2d-x 啟動時可以看到如下資訊：

# CONFIG_SCREEN_AUTOSCALE      = FIXED_WIDTH
# CONFIG_SCREEN_WIDTH          = 640.00
# CONFIG_SCREEN_HEIGHT         = 1066.67

此處的 CONFIG_SCREEN_HEIGHT 就由引擎做了調整，不再是 config.lua 裡指定的參考值。最終，CONFIG_SCREEN_WIDTH 和 CONFIG_SCREEN_HEIGHT 就是遊戲場景的虛擬解析度尺寸。

內容的定位

quick-cocos2d-x 在引擎初始化的時候就算好了一些特定的座標值，我們在遊戲裡可以用這些座標值當做“參考點”來定位我們的內容。

# display.width                = 640.00
# display.height               = 1066.67
# display.cx                   = 320.00
# display.cy                   = 533.33
# display.left                 = 0.00
# display.right                = 640.00
# display.top                  = 1066.67
# display.bottom               = 0.00

• display.width, display.height 是虛擬解析度的尺寸
• display.cx, display.cy 是螢幕中心的座標
• display.left, display.right, display.top, display.bottom 是螢幕四個角的座標

有了這些“參考點”，定位內容就很簡單了。

例如要在螢幕右上角放置一個按鈕圖片，用以下程式碼即可：

local x = display.right - 100 -- 圖片中心在螢幕右邊往左 100pt
local y = display.top   - 100 -- 圖片中心在螢幕頂部往下 100pt
local sprite = display.newSprite("Button.png") -- 建立 sprite 物件用於顯示圖片
sprite:setPosition(x, y) -- 設定這個 sprite 物件的座標

要在螢幕上顯示一張背景圖，確保圖片中心和螢幕中心重疊：

local bg = display.newSprite("Background.png")
bg:setPosition(display.cx, display.cy)

所以只要合理使用“參考點”，我們遊戲裡的所有內容都能做到自動適應任何解析度。

可視區域

前面在用內容填充螢幕時，有一個問題就是不同裝置上，同一張圖片能夠被使用者看到的內容是不同的。在 640×1136 這樣的裝置上，使用者可以看到全部內容。而在 768×1024 這樣的裝置，上下被裁剪掉的內容就比較多。

能夠被使用者看到的內容區域，就是場景的可視區域。這個區域正好就是“虛擬解析度”的尺寸。

由於不同裝置的可視區域高度有變化，我們在設計 UI 時，就要考慮到最小可視區域問題。按照 FIXED_WIDTH 的演算法，目前市面上的所有裝置裡，最小可視區域應該就是 iPad 了，其“虛擬解析度”只有 640×853。

但如果死板的把 UI 侷限在最小可視區域中，不同裝置上的體驗就不好，因為上下太多螢幕空間被浪費了。所以在 UI 設計時，就要讓一些內容是“動態尺寸”的。

例如下面的介面中，底部的工具欄是固定高度，藍色區域的高度則是根據虛擬解析度計算的：

local toolbarHeight = 130 -- 工具欄高度 130
local padding       = 50  -- 所有的留白 50

-- 計算出內容區域的高度
local contentHeight = display.height - toolbarHeight - padding

由於 quick-cocos2d-x 支援“九宮格”圖片，所以這類高度不確定的區域，製作起來沒有任何難度，稍稍練習一下就能掌握。

美術素材的準備

在理解原理後，最後一個難點就是美術素材的製作了。

美術素材主要有兩類：背景圖、場景元素。

對於背景圖，設計師按照 1536×2280 來製作，原因是：

1. 640×960 的參考虛擬解析度，背景圖最大尺寸是 640×1140，翻倍後是 1280×2280。
2. 考慮到可能會為 iPad 單獨做優化，所以圖片寬度放大到 1536。因為 Retina iPad 的螢幕解析度是 1536×2048。

背景圖製作時，也要考慮到最小可視區域問題，確保背景的主要內容在不同解析度下都能夠被看到。如果是比較複雜的背景，也可以分為多層疊加。

例如一張背景是由遠景和近處的人物構成。那麼可以將遠景和人物分為兩張圖。遠景螢幕居中顯示，人物則以程式進行定位，確保任何解析度下，人物的頭部都能完整顯示的。這樣可以取得很好的顯示效果。

場景元素的製作要麻煩一些。首先，確保最小可視區域中，能夠容納一個場景的所有內容。其次，在更大螢幕上，一些場景元素（主要是 UI）要可以拉伸。基本原則是按照 640×960 翻倍，也就是 1280×1920 的尺寸來製作。一些需要拉伸的元素則做成九宮格，或者多張圖的拼接。

設計師按照 1280×1920 的解析度製作出效果圖，開發人員再根據實際情況，對部分元素進行相對定位。

設計師的影象按照 100% 尺寸匯出後，還需要用 Texture Packer 等工具做進一步處理。這裡的處理除了打包，最主要的就是將影象縮小為 50%。這樣 1536×2280 的背景圖就變成了 768×1140；1280×1920 的場景就變成了 640×960。

最終，我們僅用一套素材，就適應了所有裝置。並且為 Retina iPad 和其他超高解析度裝置留下了優化的空間。

針對 iPad 的優化

由於 iPad 的螢幕寬度超過了 640，所以整個場景都會被放大一點。這樣帶來了兩個問題：

1. 有一些輕微的模糊。
2. 場景上下的內容被裁剪較多。

要解決這個問題有兩種方案：

1. 以 768×1024 為參考虛擬解析度。
2. 單獨為 iPad 設定虛擬解析度。

第一種方法最簡單。只要按照前文所述，重新計算出新的圖片尺寸，並以此為基礎讓美術製作就可以了。不過缺點也很突出：

1. 圖片的尺寸大大增加。背景圖需要製作為 1536×2728，場景元素的參考解析度是 1536×2048。這直接導致最終生成的圖片尺寸變大，佔用的記憶體增多。光是背景圖，就要增加 20%。
2. 只有在 iPad 上才是不縮放顯示，在其他所有裝置上，場景都會縮小後顯示。這對於一些文字內容，在手機上閱讀起來就比較困難。雖然可以放大字型，但因為縮放的存在，字型也無法做到特別清晰。

考慮到手機使用者遠遠多過 iPad 使用者，我們的遊戲還是以手機使用者的體驗為優先考慮。所以我們採用第二種方式來優化 iPad 體驗。

在遊戲啟動時，檢測到如果是 iPad，則使用 768×1024 的虛擬解析度。這樣做比較麻煩的地方就是程式要做不少調整，確保場景元素在 640x???? 和 768×1024 兩種虛擬解析度下都可以正常顯示。

從實踐看，熟練的開發人員一週左右就可以做好一款休閒遊戲（大概就是天天愛消除那種複雜度）的 iPad 優化。美術素材方面，除了極少數 UI 元素要做一些調整或為 iPad 單獨製作一份外，其他素材都可以繼續沿用。對開發成本的影響極小。

針對超高解析度裝置的優化

Retina 顯示螢幕的 iPad 和一些高階 Android 手機或平板，都提供了極高的解析度。在這些裝置上要獲得最好的顯示效果，就必須使用超高解析度的素材。這也是本文前面提到美術素材製作時，為什麼要求極高的解析度。

不過因為超高解析度的素材，遊戲體積幾乎是翻倍增加，這非常不利於遊戲的傳播。所以比較實際的做法還是單獨出一個版本供使用者下載，或者遊戲啟動後檢測到超高解析度裝置，再提醒使用者下載資源。

這些裝置的優化對程式沒什麼影響，因為虛擬解析度仍然是 640×960 為基準。只需要在程式啟動時，用以下程式碼通知引擎使用了超高解析度的素材：

CCDirector:sharedDirector():setContentScaleFactor(2)

處理橫屏

橫屏的處理其實相當簡單，就是把“FIXED_WIDTH”換成“FIXED_HEIGHT”。這樣虛擬解析度裡，高度就變成固定的了，而寬度根據裝置發生變化。至於美術素材的製作、內容定位，和豎屏的方法完全一樣。

總結

這一套方案，我們已經用在好幾個遊戲裡面了。不管是從成本、最終效果上看，都很不錯。

對於時間、預算都很緊張的小團隊來說，連 iPad 優化那一步都可以放到後續版本來做。首先把大量手機使用者的需求滿足後，再來優化 iPad 體驗。

最後，本文所述方案也完全可以用在原版 cocos2d-x 中。因為原版 cocos2d-x 也具有 FIXED_WIDTH 和 FIXED_HEIGHT 兩種螢幕適配策略。