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

时间 2019-11-18

标签炸弹游戏开发系列初步设计栏目游戏繁體版

原文原文链接

前言javascript

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

本文目的

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

本文主要内容

技术选择java

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

我之前开发过网站，也开发过javascript游戏，所以我决定使用web技术开发。算法

而后就是决定是采用传统的Html4，仍是最新的Html5。架构

最终我决定使用Html5技术，由于使用Html5有以下的好处：框架

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

开发环境dom

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接口，只要调用接口定义的函数，他们就会作出各自的动做。