接上节 http://www.cnblogs.com/hangxin1940/archive/2013/04/09/3011424.html Whack That Mole!(打鼹鼠)游戏是一个使用Devkit引擎内置的一款游戏,通过学习该游戏的源代码,我们会明白这些Devkit组建是如何组织在一起的。 ## 游戏安装 首先启动服务 $ basil serve 他会在`9200`端口启动,在浏览器打开 `http://localhost:9200` ![devkit](http://docs.gameclosure.com/guide/assets/game-walkthrough/basil-start.png "devkit") Devkit会提前将打鼹鼠游戏加载好,在左侧导航栏选中`Projects`。 ![devkit](http://docs.gameclosure.com/guide/assets/game-walkthrough/basil-projects.png "devkit") 然后选择游戏图标,并点击`Simulate`,会在一个新窗口中运行模拟器。 ![devkit](http://docs.gameclosure.com/guide/assets/game-walkthrough/game-title.png "devkit") ## 浏览器调试 工欲善其事必先利其器,我们需要一个有力的调试工具,在上节的Hello World!中,我们知道如何使用UI监视工具与在Console中调试代码。 那么现在就用UI监视工具看看这个打鼹鼠的场景结构。 ![devkit](http://docs.gameclosure.com/guide/assets/game-walkthrough/ui-inspector.png "devkit") ![devkit](http://docs.gameclosure.com/guide/assets/game-walkthrough/game-console.png "devkit") 现在打开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](http://docs.gameclosure.com/guide/assets/game-walkthrough/game-flow.png "devkit") 首先,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.cnblogs.com/hangxin1940/archive/2013/04/11/3015553.html