多種分辨率適配的原理

因?yàn)闄M屏和豎屏的原理完全相同琉朽，所以本文先以豎屏為例，后文再說(shuō)明橫屏的處理盔然。

制作一張 640×960 像素的圖片减牺，并傳入設(shè)備查看：

1. 查看時(shí)將圖片縮放到合適大小，確保圖片左右兩邊正好填滿整個(gè)屏幕苏潜。
2. 在不同分辨率的設(shè)備上银萍，這張圖片的顯示效果差異體現(xiàn)在圖片上下是否能夠填滿屏幕。

例如在 480×800 的設(shè)備上恤左，這張 640×960 圖片會(huì)被縮小為 480×720 像素來(lái)顯示贴唇，左右填滿屏幕贰锁，上下出現(xiàn)黑邊。

在一些常見(jiàn)分辨率中滤蝠，圖片的顯示效果：

縮放比例 = 屏幕像素寬度 / 圖片像素寬度

• 屏幕尺寸 _640x960 像素，縮放比例 100%授嘀，正好填滿整個(gè)屏幕
• 屏幕尺寸 640×1136 像素物咳，縮放比例 100%，上下有黑邊
• 屏幕尺寸 _480x800 像素蹄皱，縮放比例 _75%览闰，圖片縮放后尺寸 _480x720 像素，上下有黑邊
• 屏幕尺寸 _480x854 像素巷折，縮放比例 _75%压鉴，圖片縮放后尺寸 _480x720 像素，上下有黑邊
• 屏幕尺寸 768×1024 像素锻拘，縮放比例 120%油吭，圖片縮放后尺寸 768×1152 像素，無(wú)黑邊署拟，但圖像上下有裁剪（超出屏幕無(wú)法顯示）

上下有黑邊是肯定不好看的婉宰。那要保證填滿屏幕，我們只需要將圖片做得更大一點(diǎn)就可以了推穷。圖片高度的計(jì)算：

圖片高度 = 屏幕像素高度 / (屏幕像素寬度 / 圖片像素寬度)

按照這個(gè)公式心包，上述分辨率，圖片的高度應(yīng)該是：

• 屏幕尺寸 _640x960 像素馒铃，圖像高度 960 像素
• 屏幕尺寸 640×1136 像素蟹腾，圖像高度 1136 像素
• 屏幕尺寸 _480x800 像素，圖像高度 1066.67 像素
• 屏幕尺寸 _480x854 像素区宇，圖像高度 1138.67 像素
• 屏幕尺寸 768×1024 像素娃殖，圖像高度 853.3 像素

其中最大值是 1138.67，考慮制作方便萧锉，高度取值 1140珊随。也就是說(shuō) 640×1140 的圖片可以完全填滿上述各種分辨率的屏幕。

在游戲里我們也可以借鑒這種方式柿隙。不管屏幕多大叶洞，反正我把游戲場(chǎng)景的寬度都給定死，就是 640禀崖。那么在不同設(shè)備上衩辟，要處理的問(wèn)題就是場(chǎng)景高度的變化。以此為基礎(chǔ)波附，適配多種分辨率的原理就很簡(jiǎn)單了：

1. 游戲場(chǎng)景的寬度固定艺晴。
2. 根據(jù)屏幕分辨率計(jì)算出游戲場(chǎng)景的高度昼钻。
3. 使用較大的背景圖，確保任何分辨率下都可以填滿屏幕封寞。
4. 根據(jù)場(chǎng)景高度來(lái)定位顯示內(nèi)容然评。

虛擬分辨率

為了和設(shè)備屏幕分辨率區(qū)別開(kāi)，我將游戲里使用的分辨率稱為“虛擬分辨率”狈究。

在“虛擬分辨率”中碗淌，坐標(biāo)系的尺寸是“點(diǎn)”。后文稱為“Point抖锥，縮寫(xiě)為 pt”亿眠。

根據(jù)前面計(jì)算圖片高度的公式，在不同設(shè)備上磅废，虛擬分辨率的寬度是固定的纳像，而高度則不同。在 quick-cocos2d-x 里要實(shí)現(xiàn)這個(gè)虛擬分辨率的自動(dòng)計(jì)算拯勉，只需要使用“FIXED_WIDTH”屏幕縮放策略竟趾。

打開(kāi) config.lua 文件，指定以下代碼即可：

CONFIG_SCREEN_WIDTH     = 640
CONFIG_SCREEN_HEIGHT    = 960
CONFIG_SCREEN_AUTOSCALE = "FIXED_WIDTH"

1. CONFIG_SCREEN_WIDTH 和 CONFIG_SCREEN_HEIGHT 定義了一個(gè)“虛擬分辨率”的參考值谜喊。
2. 游戲引擎根據(jù)參考值和 CONFIG_SCREEN_AUTOSCALE 設(shè)置潭兽，最終計(jì)算出在設(shè)備上使用的“虛擬分辨率”。

我們?cè)?quick-cocos2d-x 啟動(dòng)時(shí)可以看到如下信息：

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

此處的 CONFIG_SCREEN_HEIGHT 就由引擎做了調(diào)整斗遏，不再是 config.lua 里指定的參考值山卦。最終，CONFIG_SCREEN_WIDTH 和 CONFIG_SCREEN_HEIGHT 就是游戲場(chǎng)景的虛擬分辨率尺寸诵次。

內(nèi)容的定位

quick-cocos2d-x 在引擎初始化的時(shí)候就算好了一些特定的坐標(biāo)值账蓉，我們?cè)谟螒蚶锟梢杂眠@些坐標(biāo)值當(dāng)做“參考點(diǎn)”來(lái)定位我們的內(nèi)容。

# 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 是屏幕中心的坐標(biāo)
• display.left, display.right, display.top, display.bottom 是屏幕四個(gè)角的坐標(biāo)

有了這些“參考點(diǎn)”逾一，定位內(nèi)容就很簡(jiǎn)單了铸本。

例如要在屏幕右上角放置一個(gè)按鈕圖片，用以下代碼即可：

local x = display.right - 100 -- 圖片中心在屏幕右邊往左 100pt
local y = display.top   - 100 -- 圖片中心在屏幕頂部往下 100pt
local sprite = display.newSprite("Button.png") -- 創(chuàng)建 sprite 對(duì)象用于顯示圖片
sprite:setPosition(x, y) -- 設(shè)置這個(gè) sprite 對(duì)象的坐標(biāo)

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

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

所以只要合理使用“參考點(diǎn)”箱玷，我們游戲里的所有內(nèi)容都能做到自動(dòng)適應(yīng)任何分辨率。

可視區(qū)域

前面在用內(nèi)容填充屏幕時(shí)陌宿，有一個(gè)問(wèn)題就是不同設(shè)備上锡足，同一張圖片能夠被用戶看到的內(nèi)容是不同的。在 640×1136 這樣的設(shè)備上壳坪，用戶可以看到全部?jī)?nèi)容舶得。而在 768×1024 這樣的設(shè)備，上下被裁剪掉的內(nèi)容就比較多爽蝴。

能夠被用戶看到的內(nèi)容區(qū)域沐批，就是場(chǎng)景的可視區(qū)域纫骑。這個(gè)區(qū)域正好就是“虛擬分辨率”的尺寸。

由于不同設(shè)備的可視區(qū)域高度有變化九孩，我們?cè)谠O(shè)計(jì) UI 時(shí)先馆，就要考慮到最小可視區(qū)域問(wèn)題。按照 FIXED_WIDTH 的算法躺彬，目前市面上的所有設(shè)備里磨隘，最小可視區(qū)域應(yīng)該就是 iPad 了，其“虛擬分辨率”只有 640×853顾患。

但如果死板的把 UI 局限在最小可視區(qū)域中，不同設(shè)備上的體驗(yàn)就不好个唧，因?yàn)樯舷绿嗥聊豢臻g被浪費(fèi)了江解。所以在 UI 設(shè)計(jì)時(shí)，就要讓一些內(nèi)容是“動(dòng)態(tài)尺寸”的徙歼。

例如下面的界面中犁河，底部的工具欄是固定高度，藍(lán)色區(qū)域的高度則是根據(jù)虛擬分辨率計(jì)算的：

[圖片上傳失敗...(image-46392e-1533632013358)]

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

-- 計(jì)算出內(nèi)容區(qū)域的高度
local contentHeight = display.height - toolbarHeight - padding

由于 quick-cocos2d-x 支持“九宮格”圖片魄梯，所以這類高度不確定的區(qū)域桨螺，制作起來(lái)沒(méi)有任何難度，稍稍練習(xí)一下就能掌握酿秸。

美術(shù)素材的準(zhǔn)備

在理解原理后灭翔，最后一個(gè)難點(diǎn)就是美術(shù)素材的制作了。

美術(shù)素材主要有兩類：背景圖辣苏、場(chǎng)景元素肝箱。

對(duì)于背景圖，設(shè)計(jì)師按照 1536×2280 來(lái)制作稀蟋，原因是：

1. 640×960 的參考虛擬分辨率煌张，背景圖最大尺寸是 640×1140，翻倍后是 1280×2280退客。
2. 考慮到可能會(huì)為 iPad 單獨(dú)做優(yōu)化骏融，所以圖片寬度放大到 1536。因?yàn)?Retina iPad 的屏幕分辨率是 1536×2048萌狂。

背景圖制作時(shí)档玻，也要考慮到最小可視區(qū)域問(wèn)題，確保背景的主要內(nèi)容在不同分辨率下都能夠被看到粥脚。如果是比較復(fù)雜的背景窃肠，也可以分為多層疊加。

例如一張背景是由遠(yuǎn)景和近處的人物構(gòu)成刷允。那么可以將遠(yuǎn)景和人物分為兩張圖冤留。遠(yuǎn)景屏幕居中顯示碧囊，人物則以程序進(jìn)行定位，確保任何分辨率下纤怒，人物的頭部都能完整顯示的糯而。這樣可以取得很好的顯示效果。

場(chǎng)景元素的制作要麻煩一些泊窘。首先熄驼，確保最小可視區(qū)域中，能夠容納一個(gè)場(chǎng)景的所有內(nèi)容烘豹。其次瓜贾，在更大屏幕上，一些場(chǎng)景元素（主要是 UI）要可以拉伸携悯〖缆基本原則是按照 640×960 翻倍，也就是 1280×1920 的尺寸來(lái)制作憔鬼。一些需要拉伸的元素則做成九宮格龟劲，或者多張圖的拼接。

設(shè)計(jì)師按照 1280×1920 的分辨率制作出效果圖轴或，開(kāi)發(fā)人員再根據(jù)實(shí)際情況昌跌，對(duì)部分元素進(jìn)行相對(duì)定位。

設(shè)計(jì)師的圖像按照 100% 尺寸導(dǎo)出后照雁，還需要用 Texture Packer 等工具做進(jìn)一步處理蚕愤。這里的處理除了打包，最主要的就是將圖像縮小為 50%饺蚊。這樣 1536×2280 的背景圖就變成了 768×1140审胸；1280×1920 的場(chǎng)景就變成了 640×960。

最終卸勺，我們僅用一套素材砂沛，就適應(yīng)了所有設(shè)備。并且為 Retina iPad 和其他超高分辨率設(shè)備留下了優(yōu)化的空間曙求。

針對(duì) iPad 的優(yōu)化

由于 iPad 的屏幕寬度超過(guò)了 640碍庵，所以整個(gè)場(chǎng)景都會(huì)被放大一點(diǎn)。這樣帶來(lái)了兩個(gè)問(wèn)題：

1. 有一些輕微的模糊悟狱。
2. 場(chǎng)景上下的內(nèi)容被裁剪較多静浴。

要解決這個(gè)問(wèn)題有兩種方案：

1. 以 768×1024 為參考虛擬分辨率。
2. 單獨(dú)為 iPad 設(shè)置虛擬分辨率挤渐。

第一種方法最簡(jiǎn)單苹享。只要按照前文所述，重新計(jì)算出新的圖片尺寸，并以此為基礎(chǔ)讓美術(shù)制作就可以了得问。不過(guò)缺點(diǎn)也很突出：

1. 圖片的尺寸大大增加囤攀。背景圖需要制作為 1536×2728，場(chǎng)景元素的參考分辨率是 1536×2048宫纬。這直接導(dǎo)致最終生成的圖片尺寸變大焚挠，占用的內(nèi)存增多。光是背景圖漓骚，就要增加 20%蝌衔。
2. 只有在 iPad 上才是不縮放顯示，在其他所有設(shè)備上蝌蹂，場(chǎng)景都會(huì)縮小后顯示噩斟。這對(duì)于一些文字內(nèi)容，在手機(jī)上閱讀起來(lái)就比較困難孤个。雖然可以放大字體亩冬，但因?yàn)榭s放的存在，字體也無(wú)法做到特別清晰硼身。

考慮到手機(jī)用戶遠(yuǎn)遠(yuǎn)多過(guò) iPad 用戶，我們的游戲還是以手機(jī)用戶的體驗(yàn)為優(yōu)先考慮覆享。所以我們采用第二種方式來(lái)優(yōu)化 iPad 體驗(yàn)佳遂。

在游戲啟動(dòng)時(shí)，檢測(cè)到如果是 iPad撒顿，則使用 768×1024 的虛擬分辨率丑罪。這樣做比較麻煩的地方就是程序要做不少調(diào)整，確保場(chǎng)景元素在 640x???? 和 768×1024 兩種虛擬分辨率下都可以正常顯示凤壁。

從實(shí)踐看吩屹，熟練的開(kāi)發(fā)人員一周左右就可以做好一款休閑游戲（大概就是天天愛(ài)消除那種復(fù)雜度）的 iPad 優(yōu)化。美術(shù)素材方面拧抖，除了極少數(shù) UI 元素要做一些調(diào)整或?yàn)?iPad 單獨(dú)制作一份外煤搜，其他素材都可以繼續(xù)沿用。對(duì)開(kāi)發(fā)成本的影響極小唧席。

要讓游戲在 iPad 上啟動(dòng)時(shí)使用 iPad 的分辨率設(shè)置擦盾，應(yīng)該在 config.lua 中加入以下代碼：

CONFIG_AUTOSCALE_CALLBACK = function(w, h, deviceModel)
    if (w == 768 and h == 1024)
        or (w == 1536 and h == 2048) then
            -- iPad
            CONFIG_SCREEN_WIDTH = 768
            CONFIG_SCREEN_HEIGHT = 1024
            return 1.0, 1.0
    end
end

上述判斷如果是在 iPad 上啟動(dòng)游戲，則使用 768/1024 作為參考分辨率淌哟，并且內(nèi)容縮放為 100%迹卢，確保圖像完全沒(méi)有模糊。

針對(duì)超高分辨率設(shè)備的優(yōu)化

Retina 顯示屏幕的 iPad 和一些高端 Android 手機(jī)或平板徒仓，都提供了極高的分辨率腐碱。在這些設(shè)備上要獲得最好的顯示效果，就必須使用超高分辨率的素材掉弛。這也是本文前面提到美術(shù)素材制作時(shí)症见，為什么要求極高的分辨率喂走。

不過(guò)因?yàn)槌叻直媛实乃夭模螒蝮w積幾乎是翻倍增加筒饰，這非常不利于游戲的傳播缴啡。所以比較實(shí)際的做法還是單獨(dú)出一個(gè)版本供用戶下載，或者游戲啟動(dòng)后檢測(cè)到超高分辨率設(shè)備瓷们，再提醒用戶下載資源业栅。

這些設(shè)備的優(yōu)化對(duì)程序沒(méi)什么影響，因?yàn)樘摂M分辨率仍然是 640×960 為基準(zhǔn)谬晕。只需要在程序啟動(dòng)時(shí)碘裕，用以下代碼通知引擎使用了超高分辨率的素材：

CCDirector:sharedDirector():setContentScaleFactor(2)

處理橫屏

橫屏的處理其實(shí)相當(dāng)簡(jiǎn)單，就是把“FIXED_WIDTH”換成“FIXED_HEIGHT”攒钳。這樣虛擬分辨率里帮孔，高度就變成固定的了，而寬度根據(jù)設(shè)備發(fā)生變化不撑。至于美術(shù)素材的制作文兢、內(nèi)容定位，和豎屏的方法完全一樣焕檬。

總結(jié)

這一套方案姆坚，我們已經(jīng)用在好幾個(gè)游戲里面了。不管是從成本实愚、最終效果上看兼呵，都很不錯(cuò)。

對(duì)于時(shí)間腊敲、預(yù)算都很緊張的小團(tuán)隊(duì)來(lái)說(shuō)击喂，連 iPad 優(yōu)化那一步都可以放到后續(xù)版本來(lái)做。首先把大量手機(jī)用戶的需求滿足后碰辅，再來(lái)優(yōu)化 iPad 體驗(yàn)懂昂。

最后，本文所述方案也完全可以用在原版 cocos2d-x 中没宾。因?yàn)樵?cocos2d-x 也具有 FIXED_WIDTH 和 FIXED_HEIGHT 兩種屏幕適配策略忍法。