上一章我們已經瞭解了Quick的一些基礎知識,所以本章我們將開始深入到Quick內部,瞭解它內部的代碼結構,同時在解析的過程中學到相應的原理,並學會如何修改、添加相應的代碼文件,比如實現屏幕的分辨率適配。
前面我們創建了一個叫做parkour的遊戲項目,其意思就是本人本來打算要做一個跑酷遊戲的,但是因爲這幾天玩了一款叫做《el》的飛行遊戲,非常有意境,並且幾乎零差評,所以請允許我任性一下,善變的我不想做跑酷遊戲了,而是想要挑戰下這種類型的遊戲。
《el》其實蠻類似跑酷遊戲的,同時,它也很像前段時間超火的《Flappy bird》,喜歡這類遊戲風格的童鞋不妨可以下載下來玩玩(我木有打廣告,不是軟文,不是)。
解析代碼文件
正如上面所說的一樣,本教程改做飛行遊戲了。於是乎,我重新創建了一個叫做el的遊戲項目。然後打開Sublime編輯器,把整個遊戲項目都拖到該編輯器中,這樣既方便代碼編輯,又方便相關屬性的查找。
下面我們就來打開新項目的src文件夾,一個一個的解析裏面的lua文件吧。
1、config.lua
首先,打開config.lua文件,config文件中保存了遊戲項目一些重要的屬性配置,包括調試信息狀態、屏幕大小、屏幕適配的方式等等。
下面是它現有屬性的具體含義:
- DEBUG: 配置Quick工程的調試信息狀態,0表示關閉,1表示打印少量調試信息,2表示打印標準調試信息。
- DEBUG_FPS: 是否顯示模擬器左下角的FPS信息
- DEBUG_MEM: 是否要每10秒打印一次內存信息
- LOAD_DEPRECATED_API: 是否加載已經廢棄了的API
- LOAD_SHORTCODES_API: 是否加載短代碼
- CONFIG_SCREEN_ORIENTATION: 遊戲中的屏幕方向,landscape橫屏,portrait豎屏。
- CONFIG_SCREEN_WIDTH: 屏幕寬度,但屏幕方向爲“landscape”橫屏時,該屬性表示屏幕的高度
- CONFIG_SCREEN_HEIGHT: 屏幕高度,但屏幕方向爲“landscape”橫屏時,該屬性表示屏幕的寬度
- CONFIG_SCREEN_AUTOSCALE: 屏幕適配策略,如FIXED_WIDTH、FIXED_HEIGHT和FILL_ALL
這些屬性都是創建項目時默認配置好的,當然我們可以根據項目需要對這些值進行修改,比如進行分辨率適配時。此外,在config文件中我們也可以加入自定義的一些屬性,比如聲音、字體、圖片、網絡配置等等常量和宏的定義。
既然都提起了分辨率適配,那麼接下來我們就來看看如何進行分辨率適配吧。
分辨率適配原理
衆所周知,現今市場中各種屏幕尺寸和分辨率的移動設備(特別是Android機)層出不窮,所以爲了讓我們開發的程序項目能夠更好地適應這些設備的不同需求,它的分辨率適配就顯的尤其的重要。
如果讀者之前對Cocos2d-x的分辨率適配原理有一點的瞭解,那麼我想這部分內容理解起來應該是很容易的,但考慮了下初學者,所以下面我們還是簡單的說說原理吧。
Cocos2d-x以及Quick中圖片顯示到屏幕有下面兩個邏輯過程,兩個過程結合在一起,影響了最終的顯示效果。
- 資源佈局到設計分辨率;
- 設計分辨率佈局到屏幕。
其中設計分辨率是指我們在config文件中設置的CONFIG_SCREEN_WIDTH 和 CONFIG_SCREEN_HEIGHT,它相當於一個參考分辨率。只有確定了我們的參考分辨率,才能得到我們的圖片資源的縮放比例。
在第一個過程中,我們需要通過以下函數來完成相應的轉換:
cc.Director:getInstance():setContentScaleFactor(value)
setContentScaleFactor方法決定了圖片資源顯示到屏幕的縮放因子,顧名思義就是決定了整個遊戲內容放大或者縮小的比例係數。
它的參數由(背景圖片資源寬高/設計分辨率寬高)得到,而不是通過(背景圖片資源寬高/屏幕寬高)得來。這樣也就避開了遊戲開發者去直接關注移動設備的實際屏幕。
setContentScaleFactor通常會用兩個方式來設置參數,不同的設置方法會有不同的縮放負作用。
- 用(資源高/設計分辨率高)的高度比作爲參數,也就是內容的縮放因子,這樣保證了背景資源的垂直方向在設計分辨率範圍內的全部顯示,但在水平方向上可能會溢出屏蔽或留有黑邊。
- 用(資源寬/設計分辨率寬)的寬度比作爲內容縮放因子,保證了背景資源的水平方向在設計分辨率範圍內的全部顯示,但在垂直方向上可能會超出屏蔽範圍或留有黑邊。
第二個過程中,我們需要通過以下函數接口完成轉換:
setDesignResolutionSize(width, height, cc.ResolutionPolicy)
setDesignResolutionSize方法會在display.lua中被調用,所以這裏我們不用管它,只需要注意它的參數設置就好。
其中參數 width 和 height 指的是設計分辨率的寬、高,cc.ResolutionPolicy 是分辨率適配策略,它們分別由config.lua文件中的 CONFIG_SCREEN_WIDTH、CONFIG_SCREEN_HEIGHT 和 CONFIG_SCREEN_AUTOSCALE來設置。
Quick中CONFIG_SCREEN_AUTOSCALE的值有三種情況:
- FIXED_WIDTH:保持傳入的設計分辨率寬度不變,根據屏幕分辨率修正設計分辨率的高度。
- FIXED_HEIGHT:保持傳入的設計分辨率高度不變,根據屏幕分辨率修正設計分辨率的寬度。
- FILL_ALL:保證了設計區域總有一個方向鋪滿屏幕,另一個方向可能超出屏幕或留有黑邊。
以上兩個過程相輔相成,它們相互影響,所以做好分辨率適配必須確保兩步堅固。
說到這裏我不得不提的是,在做分辨率適配的時候,常有人忽略以上的第一個過程,因此作爲小白的我還是會經常遇到那麼一些人問:爲什麼我的分辨率適配護好了還是有黑邊,還是有問題?
對此我要說:請設置內容縮放因子。
下面我們以本教程遊戲作爲例子,看看具體的實現方法。
分辨率適配的實現
本教程將做一個橫屏的飛行遊戲,我們需要做到讓背景圖在高度方向上全部顯示,所以顯然地,如果高度方向上全部顯示,那麼在寬度方向上必然會做出一些犧牲(要麼被裁減,要麼留黑邊(留黑邊的問題可以通過將圖片寬度做得更寬一點來解決))。
要實現這上述目標,需要保證各過程都是在寬度方向上裁減。所以我們給出了以下的實現過程:
1、首先我們選擇 1136 x 640 的圖片資源,這樣寬高比夠大,能確保在某些極端的分辨率下也能完整不留黑邊的顯示整個遊戲畫面。
2、接着打開src/config.lua
,設置配置信息,如下:
CONFIG_SCREEN_ORIENTATION = "landscape"
CONFIG_SCREEN_WIDTH = 480
CONFIG_SCREEN_HEIGHT = 320
CONFIG_SCREEN_AUTOSCALE = "FIXED_HEIGHT"
CONFIG_SCREEN_ORIENTATION這個配置告訴 Quick 引擎,遊戲是橫屏的。該參數是拿來適配的時候使用的。
注意:如果使用 Cocos Code IDE 調試程序,那麼請確保
config.json
配置文件的isLandscape 字段值爲true,兩者保持一致。反正,若遊戲是豎屏,那麼請確保isLandscape值爲false。
對於 CONFIG_SCREEN_WIDTH 和 CONFIG_SCREEN_HEIGHT 的配置,其實我覺得只要配置好 CONFIG_SCREEN_AUTOSCALE 和內容縮放因子,那就不會有什麼問題。
因爲是橫屏遊戲,所以我們選擇了 FIXED_HEIGHT 作爲適配模式——讓 Y 軸方向能完全顯示在屏幕上。
3、最後,打開src/app/MyApp.lua
,修改run()方法,加入內容縮放因子。
function MyApp:run()
cc.FileUtils:getInstance():addSearchPath("res/")
cc.Director:getInstance():setContentScaleFactor(640 / CONFIG_SCREEN_HEIGHT)
self:enterScene("MainScene")
end
因爲我們選擇了FIXED_HEIGHT。故此,計算內容縮放因子時,其參數爲:資源高度 / 屏幕分辨率高度。關於MyApp:run()
方法,我們後面將做詳細的講解。
好了,本章我們就到這裏吧!也不知道是不是我太囉嗦,寫了這麼多居然纔講了一個.lua文件,看來下章開始不能再囉嗦了。另外,以上分辨率適配的驗證將在後面添加資源圖片的時候得到驗證。