炸彈人遊戲開發系列（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接口，只要調用接口定義的函數，他們就會作出各自的動做。