[zz]Quick多分辨率適配

多種分辨率的適配一直都是一個蛋疼的問題,各家公司可能都有本身的一套方案。今天我爲你們介紹的是咱們在多款遊戲裏實踐後的解決方案,相對來講成本和實現難度都較低,效果也很不錯。算法

多種分辨率適配的原理

由於橫屏和豎屏的原理徹底相同,因此本文先以豎屏爲例,後文再說明橫屏的處理。工具

製做一張 640×960 像素的圖片,並傳入設備查看:字體

  1. 查看時將圖片縮放到合適大小,確保圖片左右兩邊正好填滿整個屏幕
  2. 在不一樣分辨率的設備上,這張圖片的顯示效果差別體如今圖片上下是否可以填滿屏幕。

例如在 480×800 的設備上,這張 640×960 圖片會被縮小爲 480×720 像素來顯示,左右填滿屏幕,上下出現黑邊。優化

在一些常見分辨率中,圖片的顯示效果:ui

縮放比例 = 屏幕像素寬度 / 圖片像素寬度
  • 屏幕尺寸 _640x960 像素,縮放比例 100%,正好填滿整個屏幕
  • 屏幕尺寸 640×1136 像素,縮放比例 100%,上下有黑邊
  • 屏幕尺寸 _480x800 像素,縮放比例 _75%,圖片縮放後尺寸 _480x720 像素,上下有黑邊
  • 屏幕尺寸 _480x854 像素,縮放比例 _75%,圖片縮放後尺寸 _480x720 像素,上下有黑邊
  • 屏幕尺寸 768×1024 像素,縮放比例 120%,圖片縮放後尺寸 768×1152 像素,無黑邊,但圖像上下有裁剪(超出屏幕沒法顯示)

上下有黑邊是確定很差看的。那要保證填滿屏幕,咱們只須要將圖片作得更大一點就能夠了。圖片高度的計算:lua

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

按照這個公式,上述分辨率,圖片的高度應該是:spa

  • 屏幕尺寸 _640x960 像素,圖像高度 960 像素
  • 屏幕尺寸 640×1136 像素,圖像高度 1136 像素
  • 屏幕尺寸 _480x800 像素,圖像高度 1066.67 像素
  • 屏幕尺寸 _480x854 像素,圖像高度 1138.67 像素
  • 屏幕尺寸 768×1024 像素,圖像高度 853.3 像素

其中最大值是 1138.67,考慮製做方便,高度取值 1140。也就是說 640×1140 的圖片能夠徹底填滿上述各類分辨率的屏幕。.net

在遊戲裏咱們也能夠借鑑這種方式。無論屏幕多大,反正我把遊戲場景的寬度都給定死,就是 640。那麼在不一樣設備上,要處理的問題就是場景高度的變化。以此爲基礎,適配多種分辨率的原理就很簡單了:設計

  1. 遊戲場景的寬度固定。
  2. 根據屏幕分辨率計算出遊戲場景的高度。
  3. 使用較大的背景圖,確保任何分辨率下均可以填滿屏幕。
  4. 根據場景高度來定位顯示內容。


虛擬分辨率

爲了和設備屏幕分辨率區別開,我將遊戲裏使用的分辨率稱爲「虛擬分辨率」code

在「虛擬分辨率」中,座標系的尺寸是「點」。後文稱爲「Point,縮寫爲 pt」。

根據前面計算圖片高度的公式,在不一樣設備上,虛擬分辨率的寬度是固定的,而高度則不一樣。在 quick-cocos2d-x 裏要實現這個虛擬分辨率的自動計算,只須要使用「FIXED_WIDTH」屏幕縮放策略。

打開 config.lua 文件,指定如下代碼便可:

 

[plain] view plain copy 在CODE上查看代碼片 派生到個人代碼片
  1. CONFIG_SCREEN_WIDTH     = 640  
  2. CONFIG_SCREEN_HEIGHT    = 960  
  3. CONFIG_SCREEN_AUTOSCALE = "FIXED_WIDTH"  
  1. CONFIG_SCREEN_WIDTH 和 CONFIG_SCREEN_HEIGHT 定義了一個「虛擬分辨率」的參考值。
  2. 遊戲引擎根據參考值和 CONFIG_SCREEN_AUTOSCALE 設置,最終計算出在設備上使用的「虛擬分辨率」。

咱們在 quick-cocos2d-x 啓動時能夠看到以下信息:

[plain] view plain copy 在CODE上查看代碼片 派生到個人代碼片
  1. # CONFIG_SCREEN_AUTOSCALE      = FIXED_WIDTH  
  2. # CONFIG_SCREEN_WIDTH          = 640.00  
  3. # CONFIG_SCREEN_HEIGHT         = 1066.67  

此處的 CONFIG_SCREEN_HEIGHT 就由引擎作了調整,再也不是 config.lua 裏指定的參考值。最終,CONFIG_SCREEN_WIDTH 和 CONFIG_SCREEN_HEIGHT 就是遊戲場景的虛擬分辨率尺寸。


內容的定位

quick-cocos2d-x 在引擎初始化的時候就算好了一些特定的座標值,咱們在遊戲裏能夠用這些座標值當作「參考點」來定位咱們的內容。

[plain] view plain copy 在CODE上查看代碼片 派生到個人代碼片
  1. # display.width                = 640.00  
  2. # display.height               = 1066.67  
  3. # display.cx                   = 320.00  
  4. # display.cy                   = 533.33  
  5. # display.left                 = 0.00  
  6. # display.right                = 640.00  
  7. # display.top                  = 1066.67  
  8. # display.bottom               = 0.00  
  • display.widthdisplay.height 是虛擬分辨率的尺寸
  • display.cxdisplay.cy 是屏幕中心的座標
  • display.leftdisplay.rightdisplay.topdisplay.bottom 是屏幕四個角的座標

有了這些「參考點」,定位內容就很簡單了。

例如要在屏幕右上角放置一個按鈕圖片,用如下代碼便可:

[plain] view plain copy 在CODE上查看代碼片 派生到個人代碼片
  1. local x = display.right - 100 -- 圖片中心在屏幕右邊往左 100pt  
  2. local y = display.top   - 100 -- 圖片中心在屏幕頂部往下 100pt  
  3. local sprite = display.newSprite("Button.png") -- 建立 sprite 對象用於顯示圖片  
  4. sprite:setPosition(x, y) -- 設置這個 sprite 對象的座標  

要在屏幕上顯示一張背景圖,確保圖片中心和屏幕中心重疊:

[plain] view plain copy 在CODE上查看代碼片 派生到個人代碼片
  1. local bg = display.newSprite("Background.png")  
  2. bg:setPosition(display.cx, display.cy)  

因此只要合理使用「參考點」,咱們遊戲裏的全部內容都能作到自動適應任何分辨率。


可視區域

前面在用內容填充屏幕時,有一個問題就是不一樣設備上,同一張圖片可以被用戶看到的內容是不一樣的。在 640×1136 這樣的設備上,用戶能夠看到所有內容。而在 768×1024 這樣的設備,上下被裁剪掉的內容就比較多。

可以被用戶看到的內容區域,就是場景的可視區域。這個區域正好就是「虛擬分辨率」的尺寸。

因爲不一樣設備的可視區域高度有變化,咱們在設計 UI 時,就要考慮到最小可視區域問題。按照 FIXED_WIDTH 的算法,目前市面上的全部設備裏,最小可視區域應該就是 iPad 了,其「虛擬分辨率」只有 640×853。

但若是死板的把 UI 侷限在最小可視區域中,不一樣設備上的體驗就很差,由於上下太多屏幕空間被浪費了。因此在 UI 設計時,就要讓一些內容是「動態尺寸」的。

例以下面的界面中,底部的工具欄是固定高度,藍色區域的高度則是根據虛擬分辨率計算的:

[plain] view plain copy 在CODE上查看代碼片 派生到個人代碼片
  1. local toolbarHeight = 130 -- 工具欄高度 130  
  2. local padding       = 50  -- 全部的留白 50  
  3.   
  4. -- 計算出內容區域的高度  
  5. 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 爲基準。只須要在程序啓動時,用如下代碼通知引擎使用了超高分辨率的素材:

[plain] view plain copy 在CODE上查看代碼片 派生到個人代碼片
  1. CCDirector:sharedDirector():setContentScaleFactor(2)  


處理橫屏

橫屏的處理其實至關簡單,就是把「FIXED_WIDTH」換成「FIXED_HEIGHT」。這樣虛擬分辨率裏,高度就變成固定的了,而寬度根據設備發生變化。至於美術素材的製做、內容定位,和豎屏的方法徹底同樣。


總結

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

對於時間、預算都很緊張的小團隊來講,連 iPad 優化那一步均可以放到後續版原本作。首先把大量手機用戶的需求知足後,再來優化 iPad 體驗。

最後,本文所述方案也徹底能夠用在原版 cocos2d-x 中。由於原版 cocos2d-x 也具備 FIXED_WIDTH 和 FIXED_HEIGHT 兩種屏幕適配策略。

相關文章
相關標籤/搜索