Quick-Cocos2d-x初學者游戲教程（二）

?

上一章我們已經了解了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，它相當于一個參考分辨率。只有確定了我們的參考分辨率，才能得到我們的圖片資源的縮放比例。

在第一個過程中，我們需要通過以下函數來完成相應的轉換：

1	cc.Director:getInstance():setContentScaleFactor(value)

setContentScaleFactor方法決定了圖片資源顯示到屏幕的縮放因子，顧名思義就是決定了整個游戲內容放大或者縮小的比例系數。
它的參數由（背景圖片資源寬高／設計分辨率寬高）得到，而不是通過（背景圖片資源寬高／屏幕寬高）得來。這樣也就避開了游戲開發者去直接關注移動設備的實際屏幕。

setContentScaleFactor通常會用兩個方式來設置參數，不同的設置方法會有不同的縮放負作用。

• 用（資源高／設計分辨率高）的高度比作為參數，也就是內容的縮放因子，這樣保證了背景資源的垂直方向在設計分辨率范圍內的全部顯示，但在水平方向上可能會溢出屏蔽或留有黑邊。
• 用（資源寬／設計分辨率寬）的寬度比作為內容縮放因子，保證了背景資源的水平方向在設計分辨率范圍內的全部顯示，但在垂直方向上可能會超出屏蔽范圍或留有黑邊。

第二個過程中，我們需要通過以下函數接口完成轉換：

1	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，設置配置信息，如下：

1 2 3 4

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()方法，加入內容縮放因子。

1 2 3 4 5

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文件，看來下章開始不能再啰嗦了。另外，以上分辨率適配的驗證將在后面添加資源圖片的時候得到驗證。

轉載于:https://www.cnblogs.com/dudu580231/p/4796442.html

總結

以上是生活随笔為你收集整理的Quick-Cocos2d-x初学者游戏教程（二） -------------------- Quick内部的代码结构及相应的原理...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。