在介紹Demo遊戲製作之前，先簡單介紹一下游戲製作使用的工具Orion2，這是一個圖形化的HTML5編輯工具，目標是用來開發小遊戲、互動電子書/雜誌等方面的H5應用。

Orion2工具主要模組包括：
場景編輯模組，可編輯單元均為外掛模組，可方便通過外掛SDK進行擴充套件；目前包括精靈、文字、九宮格、Tile地圖、光照、鍵盤、滑鼠、觸控式螢幕等輸入裝置外掛、陣列、字典、XML、WebStorage等資料儲存外掛

動畫幀編輯模組

圖形化指令碼編輯模組，採用事件-動作機制，適合頂層邏輯實現；指令碼API可通過外掛進行擴充套件；也可以將已有的js程式碼封裝為外掛模組匯入；

工程釋出模組

外掛管理模組：

素材庫管理模組：

另外，規劃中尚未實現的模組還包括：粒子特效編輯模組、UI介面編輯模組和外掛工程生成模組。

(目前工具還正在不斷完善中，外掛庫也在不斷擴充）
下面就介紹一下，使用Orion工具開發一個簡單的H5飛行射擊遊戲Demo的主要過程（遊戲素材是東拼西湊）
遊戲包含2個介面場景：開始介面和遊戲場景


（1）開始介面開發
遊戲場景設計功能與大多遊戲編輯類似，這裡不做太多介紹，主要介紹指令碼設計部分。首先新建一個場景Start，排放好背景圖片和“開始遊戲”文字

開始介面的功能比較簡單，在介面中使用者點選螢幕（或點選滑鼠）就進入遊戲介面。下面開始指令碼設計：
a) 居中顯示：在進入場景時，將螢幕中心移動到場景的中心位置。

b) 文字閃爍：在每1秒中，前0.3秒隱藏StartGame文字，後0.7秒顯示文字。

c) 輸入處理：當按下空格鍵、滑鼠點選（在PC裝置上使用滑鼠輸入模擬觸控輸入）或觸控式螢幕幕任意位置時進入遊戲場景TMallCity。

這樣開始介面就製作完成了。通過預覽可以看到

（2）遊戲場景開發
與前面型別，首先排放好背景圖片，然後向場景中新增玩家飛機、敵機、子彈和爆炸動畫等物件。

每個遊戲精靈的設計包含以下幾個方面：
（1）動畫序列，例如玩家飛機包含正常飛行、向左傾斜和向右傾斜3個動畫序列。

玩家飛機需要與子彈進行碰撞檢測，因此需要定義動畫幀的碰撞網格

（2）行為，例如玩家飛機必須始終在場景邊界內，進行需要給玩家飛機新增“Bound”行為，確保飛機不會跑到場景之外；

當場景設計開之後，開始指令碼設計（跟前面比，就有些複雜），這裡挑一部分介紹：
a）場景初始化：將視口移動到場景底部，初始化得分變數和StartTime（進入場景的邏輯時間）。

b）玩家飛機控制：用滑鼠控制飛機在場景中移動；當飛機向左移動，播放向左傾斜動畫；反之，向右運動播放向右傾斜動畫。鬆開滑鼠後，飛機恢復到預設動畫。

c）玩家自動開火：當敵機出現在視口中並且位於玩家上方時，則每0.1秒發射1個子彈，子彈直線向上運動；否則，停止發射子彈。

d）子彈碰撞處理：玩家子彈碰上敵機，敵機血量減1，得1分；敵機血量為0，則播放爆炸動畫，得50分；玩家碰上敵機子彈，血量減10；所有子彈發射碰撞，播放子彈爆炸動畫。

…
下面是整個指令碼的畫面

整個遊戲設計好之後，通過釋出模組，配置匯出引數，例如預設遊戲視口大小，畫面質量、是否啟動WebGL等等, 匯出到指定目錄中

匯出目錄中內容如下

最終遊戲畫面為