炸弹人游戏开发系列（2）：初步设计

前言

有了上文的初步需求分析后，就可以进入初步设计阶段了。

本文目的

得到初步的领域模型，对层和模块进行初步的划分。

本文主要内容

技术选择
开发环境
外部依赖
代码结构
开发方法
初步领域模型
高层划分
本文参考资料

技术选择

首先，要确定选择什么技术来开发游戏。

我以前开发过网站，也开发过javascript游戏，因此我决定使用web技术开发。

然后就是决定是采用传统的Html4，还是最新的Html5。

最终我决定使用Html5技术，因为使用Html5有如下的好处：

可以使用强大的Canvas API绘制游戏图像方面。
未来可以使用本地存储、离线存储技术来存储游戏所需的数据，实现游戏的保存和读取，提高游戏的性能。
未来可以使用WebSocket API实现多人联网。
未来可以使用Web Worker API来优化游戏的计算，提高游戏性能。
Html5是未来发展趋势，有必要认真学习它。

开发环境

win7操作系统
Vs2012

因为在我以前的项目中，我主要使用Asp.net技术，因此开发工具我自然而然就会选用Vs2012，虽然该IDE对于前台开发显得重型了一点。。。。。。大家也可以选用Eclispe、Dreamweaver、Sublime、Webstorm等作为开发工具。

外部依赖

在游戏开发中，我使用以下的库：

第三方库

jQuery
使用它的选择器，进行dom操作。
progressBar
这是一个jQuery的进度条插件，我用它来显示预加载图片的进度。
jasmine
这是一个测试框架，使用它可以进行Javascript单元测试。

我的库

YOOP（命名空间：YYC.Class、YYC.AClass、YYC.Interface）
这是我的Javascript的oop框架。具体可参见发布我的Javascript OOP框架YOOP v1.0
图片预加载控件PreLoadImg（命名空间：YYC.Control）
工具库YTool（命名空间：YYC.Tool）
我的工具方法。
Javascript原生对象扩展
位于object_extend.js文件中，包括了对String和Array对象的扩展。
模式库（命名空间：YYC.Pattern）
包括创建对象模式的命名空间方法namespace和观察者模式的Observer.js

代码结构

Content
炸弹人游戏的资源文件
- Image
  图片资源文件

Script
js文件
- bomber
  炸弹人js
- jasmine
  - lib
    jasmine框架库文件
  - spec
    游戏的测试文件
  - src
    测试的工具方法
- myTool
  我的javascript库、控件、工具箱等
  - control
    控件
  - extend
    javascript原生对象扩展
  - frame
    YOOP框架
  - pattern
    模式库
  - tool
    工具箱
- plugIn
  外部插件
View
html页面

开发方法

考虑到以下原因：

我没有RPG游戏的开发经验，没有适合的架构来套用，不能预见到可能会出现的问题。
开发过程中需求可能会变化。

所以不能够采用传统的瀑布模型开发，而应该采用迭代开发的方法。这里我的具体开发流程为：

流程说明

明确系统目标
明确要实现的目标（如实现哪些技术，为实现RTS游戏作准备等）。
确定高层需求
这一步需要确定范围、定义Feature、画出上下文。
领域模型
根据需求和场景，给出相关的领域模型。
高层划分
划分游戏的层、子系统、模块。
架构详细设计
对要实现的用户故事，进行详细设计，具体包括细化模块，给出类图，描述交互关系等。
TDD开发
采用先写测试，再开发的方法，构建坚实的测试套件。经常重构代码，保证代码质量。
迭代、反馈
实现用户故事后，进入反馈阶段。此时可能需要对相应的领域模型、高层划分、具体的代码等进行重构。
当有新的或修改的用户故事时，则需要在原有基础上修改或进行新的开发。修改要保证测试能够通过，有必要的话还需要增加新的测试。

初步领域模型

为什么要进行领域建模

模型和设计的核心互相影响
模型是团队所有成语所使用的交流语言的中枢
模型是浓缩的知识

为什么我要使用领域模型

因为我没有开发过RPG游戏，迫切需要了解RPG领域的知识，而模型是对领域知识最好的固化、提炼。
在详细架构设计时，可以参考和映射对应的领域模型，减少了设计的难度。
通过不断迭代修改领域模型，可以反映出深层的认识，固化迭代所获得的知识。

学习RPG领域的基本概念

我是从哪学习的？

分析开源的RPG游戏代码：

看网上的学习资料：

有哪些基本概念

精灵

游戏中具有独立外观和属性的个体。如主角、NPC、宝箱、子弹等。

分层渲染

在游戏的世界里，我们可以看到各种地图，各种游戏人物，看到人物在地图上行走，对话等，无论是地图还是人物，其实都是图片的处理与显示，把不同的图片显示到屏幕上，我们就看到不同的游戏界面，要想让这些图片同时显示到界面上，我们就需要处理好层次，让他们来分层显示，我们可以想象，如果游戏人物显示在地图的下层的话，显然会被地图遮挡住。

一个游戏中可能包含许多内容，比如主角、玩家、NPC、怪兽、道具、效果、地图和其它场景，我们没必要把它们堆到一起，这样你无法进行管理和维护，因此我将它们放到多个层级，就可以方便地对每个层级内的元素进行统一控制。如一款RPG游戏，我简单把它分为地图层，人物层，效果层(一些法术效果等)，对话层，控制层(按钮菜单等)。

我们只要依次将图片画在屏幕上，游戏人物将站在地图上，如果有对话，对话将出现在人物和地图的上面，而按钮等控件会出现在游戏的最外层。
这里的分层不仅仅是在逻辑上将不同类型的元素分离开，不同的Layer对象还可以配置到不同的Canvas画布上，这是提升性能的一种重要的方式。

帧动画

一组图片（或一个图的不同位置）在同一位置以一定的时间间隔显示，就形成了动画。一张图片就是一个帧。

碰撞检测

用于检测炸弹人与砖墙、炸弹人与怪物等之间的碰撞。碰撞检测包括矩形碰撞、多边形碰撞等，一般使用矩形碰撞即可。

方格地图

地图由一个个方格组成，一个方格不是对应到一个屏幕像素（1px），而是特定范围内的一整片像素（如一个方格大小为5px*5px）。

角色在这种砖块环境中的移动路线会呈现锯齿状。为了尽量让锯齿状现象不那么明显，同时也为了避免跳格现象，游戏角色每次都只能移动到邻近方块，即一次移动一个方格。

动态地图

多张地图图片在用一个方格显示，形成动画。

游戏主循环

每一个游戏都是由获得用户输入，更新游戏状态，处理AI，播放音乐和音效，还有画面显示这些行为组成。游戏主循环就是用来处理这个行为序列，在javascript中可以用setInterval方法来轮询。

游戏的帧数

每秒所运行的帧数。如游戏主循环每33.3（1000/30）ms轮询一次，则游戏的帧数FPS为30.

Action接口

Actor 是一个接口，他的作用是统一类的行为（读者可以阅读一下Facede模式相关文章）。我们用一个比喻来说明：演员们有了各自的剧本，导演对所有演员说：做下一个动作！演员们就会各自行动。而不用导演分别告诉每个人，你要这样做，他要那样做。具体到程序中，帧动画、动态图块两种操作会调用完全不同的函数，这样不利于在游戏循环中做出一致的处理。所以我们让他们都实现Actor接口，只要调用接口定义的函数，他们就会做出各自的动作。