接上节 http://www.cnblogs.com/hangxin1940/archive/2013/04/09/3009251.html ## 创建项目 在devkit环境下运行命令创建一个新项目 $ basil init hello-world devkit会在当前目录生成一个项目,现在打开这个项目文件夹,并运行它 $ cd ./hello-world $ basil serve 默认的,会在本机9200运行node.js实例,当然可以改变端口 $ basil serve -p 8080 现在用浏览器打开它(推荐chrome, 方便调试) http://localhost:8080 ![devkit](http://docs.gameclosure.com/guide/assets/getting-started/hello-project.png "devkit") 页面中找到`Project`s,里面会有刚才创建的项目. 在项目的主文件夹,有个 `manifest.json` 文件,这是项目的配置文件. 可以尝试修改他,然后在1Projects1中选择项目,1simulate1运行它. ![devkit](http://docs.gameclosure.com/guide/assets/getting-started/hello-world.png "devkit") 要运行一个现有的devkit项目,比如git下来的,只要进入它的主目录注册进basil就行 $ cd ./anotherproject $ basil register 每个注册过/已存在的项目,都会在devkit安装目录的 config.json 配置文件中声明. ## 目录结构 每一个新创建的devkit项目,其目录结构都如下: project/ . ├── manifest.json (项目配置) ├── sdk/ -> /path/to/devkit/sdk (sdk的链接) ├── build/ (basil自动构建) ├── resources/ (游戏资源) │ └── fonts/ └── src/ └── Application.js (程序入口) 所有游戏有关的文件都会被放在`src`目录下,要注意的是 `Application.js` 是整个游戏的入口 当使用 `basil init` 创建一个新的游戏, `./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` 这两个方法定一个程序的入口,它们会被 `GC.Application` 调用。 上述代码中 `TextView` 类被引用,它用来在屏幕上显示 `Hello, world!`。 ## UI监视与调试 浏览器中模拟器的上方有一个按钮 `UI Inspector`, 用来监视整个程序活动的视图树。 ![devkit](http://docs.gameclosure.com/guide/assets/getting-started/hello-inspector.png "devkit") 在UI监视试图中,可以看到整个试图树种包含一个名为`'TextView2:Hello, world!'`的`TextView` 在Chrome浏览器中,可以很方便的调试游戏,打开浏览器的`开发者工具`,调试工具的 `Console` 命令行,使我们可以在实时的更改所有对象。 如上个`Hello world`示例中,从UI监视试图可以看出来,整个程序只有一个`TextView`对象,现在我们使用`Console`调试命令行尝试更改这个`TextView`的文字内容。 首先通过 `GC.app` 从整个View树中得到它,输入: var textview = GC.app.view.getSubviews()[0]; //选择第一个子视图 `GC.app`是我们在工程文件夹中 `src/Application.js` 类的一个实例,也就是入口类的实例,`GC.app.view`是所有需要被渲染的场景图形的根。 `getSubviews`方法返回一个包含了它所有子试图的数组,在这里,我们只获取它的第一个对象(也是唯一一个)。 下面,我们尝试更改这个`textview`的一些内容: textview.updateOpts({size: 42}); textview.setText("We did it!"); 上述代码的改变会立即在浏览器中呈现出来,这种特性是我们很方便友好的开发/调试程序。 ![devkit](http://docs.gameclosure.com/guide/assets/getting-started/hello-debugger.png "devkit") ## 安装示例代码 官方示例是很好的教材,下面命令用来安装示例程序 $ basil install examples GC DevKit 快速入门 -- 游戏概览(一) http://www.cnblogs.com/hangxin1940/archive/2013/04/10/3011555.html
转载于:https://www.cnblogs.com/hangxin1940/archive/2013/04/09/3011424.html