炸彈人游戲開發系列（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游戲代碼：

完全分享，共同進步——我開發的第一款HTML5游戲《驢子跳》
html5游戲開發-零基礎開發RPG游戲
Cson的博客

看網上的學習資料：

HTML5研究小組第二期技術講座《手把手制作HTML5游戲》
Andriod游戲開發

有哪些基本概念

精靈

游戲中具有獨立外觀和屬性的個體。如主角、NPC、寶箱、子彈等。

分層渲染

在游戲的世界里，我們可以看到各種地圖，各種游戲人物，看到人物在地圖上行走，對話等，無論是地圖還是人物，其實都是圖片的處理與顯示，把不同的圖片顯示到屏幕上，我們就看到不同的游戲界面，要想讓這些圖片同時顯示到界面上，我們就需要處理好層次，讓他們來分層顯示，我們可以想象，如果游戲人物顯示在地圖的下層的話，顯然會被地圖遮擋住。

一個游戲中可能包含許多內容，比如主角、玩家、NPC、怪獸、道具、效果、地圖和其它場景，我們沒必要把它們堆到一起，這樣你無法進行管理和維護，因此我將它們放到多個層級，就可以方便地對每個層級內的元素進行統一控制。如一款RPG游戲，我簡單把它分為地圖層，人物層，效果層(一些法術效果等)，對話層，控制層(按鈕菜單等)。

我們只要依次將圖片畫在屏幕上，游戲人物將站在地圖上，如果有對話，對話將出現在人物和地圖的上面，而按鈕等控件會出現在游戲的最外層。
這里的分層不僅僅是在邏輯上將不同類型的元素分離開，不同的Layer對象還可以配置到不同的Canvas畫布上，這是提升性能的一種重要的方式。

幀動畫

一組圖片（或一個圖的不同位置）在同一位置以一定的時間間隔顯示，就形成了動畫。一張圖片就是一個幀。

碰撞檢測

用于檢測炸彈人與磚墻、炸彈人與怪物等之間的碰撞。碰撞檢測包括矩形碰撞、多邊形碰撞等，一般使用矩形碰撞即可。

方格地圖

地圖由一個個方格組成，一個方格不是對應到一個屏幕像素（1px），而是特定范圍內的一整片像素（如一個方格大小為5px*5px）。

角色在這種磚塊環境中的移動路線會呈現鋸齒狀。為了盡量讓鋸齒狀現象不那么明顯，同時也為了避免跳格現象，游戲角色每次都只能移動到鄰近方塊，即一次移動一個方格。

動態地圖

多張地圖圖片在用一個方格顯示，形成動畫。

游戲主循環

每一個游戲都是由獲得用戶輸入，更新游戲狀態，處理AI，播放音樂和音效，還有畫面顯示這些行為組成。游戲主循環就是用來處理這個行為序列，在javascript中可以用setInterval方法來輪詢。

游戲的幀數

每秒所運行的幀數。如游戲主循環每33.3（1000/30）ms輪詢一次，則游戲的幀數FPS為30.

Action接口

Actor 是一個接口，他的作用是統一類的行為（讀者可以閱讀一下Facede模式相關文章）。我們用一個比喻來說明：演員們有了各自的劇本，導演對所有演員說：做下一個動作！演員們就會各自行動。而不用導演分別告訴每個人，你要這樣做，他要那樣做。具體到程序中，幀動畫、動態圖塊兩種操作會調用完全不同的函數，這樣不利于在游戲循環中做出一致的處理。所以我們讓他們都實現Actor接口，只要調用接口定義的函數，他們就會做出各自的動作。