不可一日無煙卷

GC DevKit 快速入門 -- Hello World!

接上節(jié) http://www.rzrgm.cn/hangxin1940/archive/2013/04/09/3009251.html ## 創(chuàng)建項(xiàng)目 在devkit環(huán)境下運(yùn)行命令創(chuàng)建一個(gè)新項(xiàng)目 $ basil init hello-world devkit會(huì)在當(dāng)前目錄生成一個(gè)項(xiàng)目,現(xiàn)在打開這個(gè)項(xiàng)目文件夾,并運(yùn)行它 $ cd ./hello-world $ basil serve 默認(rèn)的,會(huì)在本機(jī)9200運(yùn)行node.js實(shí)例,當(dāng)然可以改變端口 $ basil serve -p 8080 現(xiàn)在用瀏覽器打開它(推薦chrome, 方便調(diào)試) http://localhost:8080  頁面中找到`Project`s,里面會(huì)有剛才創(chuàng)建的項(xiàng)目. 在項(xiàng)目的主文件夾,有個(gè) `manifest.json` 文件,這是項(xiàng)目的配置文件. 可以嘗試修改他,然后在1Projects1中選擇項(xiàng)目,1simulate1運(yùn)行它.  要運(yùn)行一個(gè)現(xiàn)有的devkit項(xiàng)目,比如git下來的,只要進(jìn)入它的主目錄注冊進(jìn)basil就行 $ cd ./anotherproject $ basil register 每個(gè)注冊過/已存在的項(xiàng)目,都會(huì)在devkit安裝目錄的 config.json 配置文件中聲明. ## 目錄結(jié)構(gòu) 每一個(gè)新創(chuàng)建的devkit項(xiàng)目，其目錄結(jié)構(gòu)都如下： project/ . ├── manifest.json (項(xiàng)目配置) ├── sdk/ -> /path/to/devkit/sdk (sdk的鏈接) ├── build/ (basil自動(dòng)構(gòu)建) ├── resources/ (游戲資源) │ └── fonts/ └── src/ └── Application.js (程序入口) 所有游戲有關(guān)的文件都會(huì)被放在`src`目錄下，要注意的是 `Application.js` 是整個(gè)游戲的入口 當(dāng)使用 `basil init` 創(chuàng)建一個(gè)新的游戲， `./src/Application.js` 看起來是這樣子： import ui.TextView as TextView; exports = Class(GC.Application, function() { this.initUI = function() { var textview = new TextView({ superview: this.view, layout: "box", text: "Hello, world!", color: "white" }); }; this.launchUI = function () {}; }); `initUI` 與 `launchUI` 這兩個(gè)方法定一個(gè)程序的入口，它們會(huì)被 `GC.Application` 調(diào)用。 上述代碼中 `TextView` 類被引用，它用來在屏幕上顯示 `Hello, world!`。 ## UI監(jiān)視與調(diào)試 瀏覽器中模擬器的上方有一個(gè)按鈕 `UI Inspector`， 用來監(jiān)視整個(gè)程序活動(dòng)的視圖樹。  在UI監(jiān)視試圖中，可以看到整個(gè)試圖樹種包含一個(gè)名為`'TextView2:Hello, world!'`的`TextView` 在Chrome瀏覽器中，可以很方便的調(diào)試游戲，打開瀏覽器的`開發(fā)者工具`，調(diào)試工具的 `Console` 命令行，使我們可以在實(shí)時(shí)的更改所有對象。 如上個(gè)`Hello world`示例中，從UI監(jiān)視試圖可以看出來，整個(gè)程序只有一個(gè)`TextView`對象，現(xiàn)在我們使用`Console`調(diào)試命令行嘗試更改這個(gè)`TextView`的文字內(nèi)容。 首先通過 `GC.app` 從整個(gè)View樹中得到它，輸入： var textview = GC.app.view.getSubviews()[0]; //選擇第一個(gè)子視圖 `GC.app`是我們在工程文件夾中 `src/Application.js` 類的一個(gè)實(shí)例，也就是入口類的實(shí)例，`GC.app.view`是所有需要被渲染的場景圖形的根。 `getSubviews`方法返回一個(gè)包含了它所有子試圖的數(shù)組，在這里，我們只獲取它的第一個(gè)對象(也是唯一一個(gè))。 下面，我們嘗試更改這個(gè)`textview`的一些內(nèi)容: textview.updateOpts({size: 42}); textview.setText("We did it!"); 上述代碼的改變會(huì)立即在瀏覽器中呈現(xiàn)出來，這種特性是我們很方便友好的開發(fā)/調(diào)試程序。  ## 安裝示例代碼 官方示例是很好的教材，下面命令用來安裝示例程序 $ basil install examples GC DevKit 快速入門 -- 游戲概覽(一) http://www.rzrgm.cn/hangxin1940/archive/2013/04/10/3011555.html