GC DevKit 快速入门 -- Hello World!
接上节 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