不可一日無煙卷

GC DevKit 快速入門 -- 游戲概覽 Whack That Mole!(打鼴鼠)游戲是一個使用Devkit引擎內置的一款游戲，通過學習該游戲的源代碼，我們會明白這些Devkit組建是如何組織在一起的。

接上節 http://www.rzrgm.cn/hangxin1940/archive/2013/04/09/3011424.html Whack That Mole!(打鼴鼠)游戲是一個使用Devkit引擎內置的一款游戲，通過學習該游戲的源代碼，我們會明白這些Devkit組建是如何組織在一起的。 ## 游戲安裝 首先啟動服務 $ basil serve 他會在`9200`端口啟動，在瀏覽器打開 `http://localhost:9200`  Devkit會提前將打鼴鼠游戲加載好，在左側導航欄選中`Projects`。  然后選擇游戲圖標，并點擊`Simulate`，會在一個新窗口中運行模擬器。  ## 瀏覽器調試 工欲善其事必先利其器，我們需要一個有力的調試工具，在上節的Hello World!中，我們知道如何使用UI監視工具與在Console中調試代碼。 那么現在就用UI監視工具看看這個打鼴鼠的場景結構。   現在打開Console，輸入： GC.app.view 它會返回場景的根節點對象，在Console中也可以方便的查看跟節點的子項 ## 工程結構 一個基本的Devkit工程結構如下: . ├── manifest.json ├── sdk -> /path/to/devkit/sdk ├── resources/ └── src └── Application.js 在上節已經講過各個目錄/文件存在的意義。 這里說下游戲的清單文件 `manifest.json`， 它可以包含任意數量的json格式的配置信息，一個典型的清單文件包含了程序的ID哈希碼、名稱以及設備屏幕方向的配置信息。 這個文件由`basil`自動生成，也可以手動編輯。 { "appID": "abcdefghijklmnopqrstuvwxyz012345", "shortName": "whackthatmole", "title": "Whack-that-Mole!", "supportedOrientations": [ "portrait" ] } ## 游戲流程 在深入研究打鼴鼠前，我們先看看整個程序的調用流程  首先，devkit引擎會初始化環境，并且調用工程目錄下的程序入口`./src/Application.js`文件，它負責初始化屏幕。 程序使用視圖棧來壓入和彈出游戲屏幕，當進入游戲后，標題視圖會被壓入試圖棧，此時將在屏幕上顯示圖形并且等待用戶輸入以開始游戲，這個標題視圖定義在 `./src/TitleScreen.js` 文件。 當用戶觸摸`Play`按鈕后，游戲視圖會被壓入我們的視圖棧，游戲視圖負責設置游戲的資源以及游戲的界面，然后進行與結束游戲。它被定義在 `./src/GameScreen.js` 文件。 當游戲結束時，用戶的得分將被顯示在屏幕上，此時游戲會一直等待直到用戶輸入。接收到觸摸事件后，游戲試圖會被彈出試圖棧，返回到標題視圖，之后會繼續等待用戶輸入以便繼續開始游戲。 ## 游戲結構 項目的完整結構如下： . ├── manifest.json ├── sdk -> /path/to/basil/sdk ├── resources │ ├── images │ │ ├── hole_back.png │ │ ├── hole_front.png │ │ ├── icon.png │ │ ├── mole_hit.png │ │ ├── mole_normal.png │ │ └── title_screen.png │ └── sounds │ ├── effect │ │ └── whack.mp3 │ └── music │ └── levelmusic.mp3 └── src ├── Application.js ├── GameScreen.js ├── MoleHill.js ├── TitleScreen.js └── soundcontroller.js 游戲邏輯位于 `./src` 目錄，現在我們就來看看它。 一旦DevKit初始化后，游戲會從 `./src/Application.js` 開始。在打鼴鼠中，這個文件很短小，它的作用是是初始化標題視圖與游戲視圖，并且處理事件與引導游戲的流程。 /* * 游戲主程序，所有代碼將從這里開始. */ // 導入devkit的模塊 import device; import ui.StackView as StackView; // 導入用戶模塊 import src.TitleScreen as TitleScreen; import src.GameScreen as GameScreen; import src.soundcontroller as soundcontroller; /* 程序繼承于 GC.Application * 當游戲運行時，用于導出與實例化 */ exports = Class(GC.Application, function () { /* 在引擎被創建之后資源加載之前運行 */ this.initUI = function () { var titlescreen = new TitleScreen(), gamescreen = new GameScreen(); this.view.style.backgroundColor = '#30B040'; //在場景試圖的根加入一個新的 StackView 類 var rootView = new StackView({ superview: this, x: device.width / 2 - 160, y: device.height / 2 - 240, width: 320, height: 480, clip: true, backgroundColor: '#37B34A' }); rootView.push(titlescreen); var sound = soundcontroller.getSound(); /* 監聽標題視圖出發的開始按鈕事件。 * 隱藏標題視圖，顯示游戲視圖，然后在游戲視圖中觸發一個自定義事件 */ titlescreen.on('titlescreen:start', function () { sound.play('levelmusic'); rootView.push(gamescreen); gamescreen.emit('app:start'); }); /* 當游戲視圖發出游戲結束事件，顯示標題試圖，以便讓用戶重新玩一遍 */ gamescreen.on('gamescreen:end', function () { sound.stop('levelmusic'); rootView.pop(); }); }; /* 資源文件加載后運行。 */ this.launchUI = function () {}; }); 在代碼開始處，我們使用 `import` 導入devkit引擎的兩個模塊，以及我們自定義的三個模塊 // 導入devkit的模塊 import device; import ui.StackView as StackView; // 導入用戶模塊 import src.TitleScreen as TitleScreen; import src.GameScreen as GameScreen; import src.soundcontroller as soundcontroller; 要注意的是，`Application.js` 文件本身也是一個模塊，它使用`Class`關鍵字繼承于`GC.Application`類，這個新類被定義為`exports`對象，當我們的程序被實例化后，它會被賦給全局屬性 `GC.app`，然后可以在項目代碼任何位置訪問它。既然我們在游戲中只需要一個程序，那么可以把它看作是單例的。 在程序的類定義函數中，我們可以使用`this`關鍵字引用這個類對象。一個簡陋的但可以運行的`Application.js`看起來是這樣的： `device`模塊包含了運行游戲的物理設備的信息，我們可以用它來獲取瀏覽器的信息，甚至是原型應用信息，這取決與如何運行這個游戲。 exports = Class(GC.Application, function () { // 在這里定義類.. // this === GC.app //=> true }); `GC.Application`類比較特殊，他有兩個回調函數 `initUI`與`launchUI`,它們會在就緒時檢查UI并運行。 `initUI`函數會在devkit引擎創建后并且場景圖形準備好后運行。如果定義了閃屏(Splash)或載入屏(Loading)，那么`launchUI`函數在執行后它們會被移除。 GC DevKit 快速入門 -- 游戲概覽(二) http://www.rzrgm.cn/hangxin1940/archive/2013/04/11/3015553.html