【官方教程】使用Quick-Cocos2d-x搭建一個橫版過關遊戲(一)
1. 建立工程
按照我們前面的文章描述的，用Quick的Player建立一個工程，我們這裡取名叫做Brave。開啟後看到的顯示的還是一個HelloWorld介面。把我們的資源包中的背景圖片拷貝到你自己工程的res目錄下。
用編輯器開啟scripts/下的lua檔案，目錄結構如下圖所示：
我們開啟config.lua檔案，將裡面的內容改成下面的：
-- 0 - disable debug info, 1 - less debug info, 2 - verbose debug info DEBUG = 1 -- display FPS stats on screen DEBUG_FPS = true -- dump memory info every 10 seconds DEBUG_MEM = false -- load deprecated API LOAD_DEPRECATED_API = false -- load shortcodes API LOAD_SHORTCODES_API = true -- screen orientation CONFIG_SCREEN_ORIENTATION = "landscape" -- design resolution CONFIG_SCREEN_WIDTH = 1136 CONFIG_SCREEN_HEIGHT = 640 -- auto scale mode CONFIG_SCREEN_AUTOSCALE = "FIXED_HEIGHT"
在Quick中有關螢幕等內容的適配基本上都是通過config.lua檔案來做的。我們來講下這幾個引數的意義。
- DEBUG: 這個引數是配置Quick工程的除錯資訊狀態。0表示關閉除錯資訊，1表示列印少量除錯資訊，2表示列印標準除錯資訊。
- DEBUG_FPS: 是否顯示FPS資訊
- DEBUG_MEM: 是否要每10秒鐘列印一次記憶體資訊
- LOADDEPRECATEDAPI: 是否載入已經廢棄了的API
- LOADSHORTCODESAPI: 是否載入短程式碼
- CONFIGSCREENORIENTATION: 遊戲中的螢幕方向，這個配置改變不了遊戲對系統的螢幕方向，比如你在Android的工程中配置的是橫屏，在這裡設定豎屏，遊戲執行後還會是豎屏。這裡的引數是拿來適配的時候使用的。
- CONFIGSCREENWIDTH: 螢幕寬度，橫屏時是手機螢幕的高度
- CONFIGSCREENHEIGHT: 螢幕高度，橫屏時是手機螢幕的寬度
- CONFIGSCREENAUTOSCALE: 螢幕適配的方式，比如FIXEDWIDTH和FIXEDHEIGHT
給遊戲新增角色
新增背景
這樣的話遊戲的適配就做好了，接下來開啟scenes下的MainScene.lua檔案。
在MainScene.lua檔案的ctor()中新增下面兩行程式碼
-- 背景
local background = display.newSprite("image/background.png", display.cx, display.cy)
self:addChild(background)
開啟Quick的Player，然後重新整理Player，就能看到下面的圖片了。
在上一篇文章中我們講到過Quick框架中的display檔案，裡面放的是與顯示相關的部分介面。比如我們想要新建一個精靈，我們會呼叫display.newSprite，類似的介面還有display.newLayer。基本的格式都是display.newXXX，"XXX"包括sprite、layer、node、scene等，詳細的可以檢視display檔案。另外在display中還提供了很多實用的、方便的配置屬性。比如：
display.width和display.height表示螢幕寬度display.cx和display.cy表示螢幕的x軸中間位置和y軸中間位置display.left和display.right表示螢幕的最左邊和最右邊(x軸座標為0和display.width的點)display.top和display.bottom表示螢幕的頂部和底部(y軸座標為0和display.height的點)display.CENTER、display.LEFT_TOP、display.CENTER_TOP等分別表示node的錨點位置。
另外還有scene切換的效果、遊戲的暫停和恢復等等一系列我們經常使用，程式碼重複量較多的方法，都在Quick中進行了一定程度的封裝，大大方便了我們在開發過程中的使用。
在Quick中使用圖片有個規則，如果使用的圖片是以#開頭的話表示是從SpriteFrameCache中讀取，如果沒有使用#開頭的話表示是直接從檔案讀取。
新增玩家角色
作為一個橫版過關遊戲，玩家和敵人當然都是必不可少的。在scripts/app下新增一個資料夾，取名roles,在roles下新增一個Player.lua檔案。新增後的檔案結構是這樣的：
開啟Player.lua檔案，新增以下內容：
local Player = class("Player", function()
local sprite = display.newSprite("#player1-1-1.png")
return sprite
end)
function Player:ctor()
end
return Player
上面的程式碼中添加了一個以CCSprite為基類的Player類。在Quick中新增新的類的方式就是這麼簡單。是不是有點小激動呢。好了，新增完玩家類之後，我們要把玩家新增到當前場景中了。
在Quick中建立一個類很簡單，廖大已經給我們留好了一個class方法，只需要使用這個方法就能輕鬆的建立一個類。我們來看下具體的建立方式：
首先第一句:
local Player = class("Player", function()
如果有同學對實現比較感興趣的話可以開啟Quick的functions.lua檔案，裡面有class方法的具體實現。我們這裡只做使用的講解。class方法有兩個引數，第一個引數是類名。第二引數可以通過兩種形式傳遞引數，一種是傳入一個函式，另一種方式是傳入一個Quick的類或者是Lua物件。當傳入函式時，新建立的類會以傳入的函式作為建構函式。當傳入的是一個物件時，會以傳入的物件為父類派生下來。
在類建立完成後必須要返回你所建立的類變數，這樣外部的指令碼呼叫時才能知道這個類的存在。
新增玩家角色到場景中
開啟MainScene.lua檔案，在MainScenen:ctor()中新增下面程式碼：
self.player = Player.new() -- display.newSprite("#player1-1-1.png")
self.player:setPosition(display.left + self.player:getContentSize().width/2, display.cy)
self:addChild(self.player)
在檔案開始的地方新增:
local Player = import("..roles.Player")
開啟Quick的Player，重新整理顯示，你會看到這樣的結果：
新增敵人
和新增玩家角色類似，我們新增一個敵人角色，在roles下新建個Enemy1.lua，將display.newSprite('#player1-1-1.png')改成display.newSprite('#enemy1-1-1.png'),其他同Player.lua中的程式碼一樣，完成後的程式碼如下：
local Enemy1 = class("Enemy1", function()
return display.newSprite("#enemy1-1-1.png")
end)
function Enemy1:ctor()
end
return Enemy1
在MainScene.lua的檔案頭加入
local Enemy1 = import("..roles.Enemy1")
在MainScene:ctor()中加入
self.enemy = Enemy1.new() self.enemy:setPosition(display.right - self.enemy:getContentSize().width/2, display.cy) self:addChild(self.enemy)
新增完後，重新整理Quick的Player，你將會看到下面的畫面：
總結
這篇文章裡主要講到了Quick裡工程的結構，怎樣建立新的類，和新增精靈到場景中。剛入門的同學可以參考著加入更多的元素到場景中。
下篇文章我們會介紹怎麼在場景裡新增觸控事件、給角色新增動畫等功能。