GC DevKit 快速入门 -- 游戏概览(一)

接上节 http://www.cnblogs.com/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.cnblogs.com/hangxin1940/archive/2013/04/11/3015553.html