前言

每個遊戲猶如一部電影，它能帶給我們快樂，讓我們在遊戲世界中釋放最真的自我，玩遊戲過程中學習到智慧。遊戲也是遊戲開發者發現生活中的智慧的展示載體，傳播了開發者對生活智慧的樂趣。我們將從0到1，幫助遊戲開發者講述遊戲是怎麼製作出來的。

什麼是H5遊戲？

H5遊戲具有即開即玩、碎片化、上手簡單、易玩等特點，市面上的遊戲平臺包括了：微信公衆號、微信小遊戲、QQ玩一玩、Facebook InstantGames、新浪微博小遊戲等，主流的遊戲開發商包括愛微遊、瘋狂遊樂場等，下面是H5遊戲平臺和H5遊戲的截圖：

H5遊戲市場崛起

隨着更多的遊戲平臺崛起，包括：微信小遊戲、QQ玩一玩、facebook instant games、新浪微博等，給H5遊戲市場帶來了更多的生機活力，下圖是H5遊戲的市場趨勢圖：

遊戲類型

• 動作遊戲【ACT】、冒險遊戲【AVG】、格鬥遊戲【FTG】、角色扮演遊戲【RPG】

• 戀愛遊戲【LVG】、音樂遊戲【MUG】、即時戰略遊戲【RTS】、射擊遊戲【STG】、益智或解謎遊戲【PUZ】

• 卡片遊戲【CAG】、競速遊戲【RAC】、體育遊戲【SPG】、模擬經營遊戲【SIM/SLG】、第一人稱視點射擊遊戲【FPS】、桌面遊戲【TAB】、...

其中的H5遊戲的市場的類型分佈佔比如下圖所示：

精巧團隊

基礎團隊

• 遊戲策劃一汪：遊戲功能需求、數據、關卡等設計

• 視覺設計二獅：界面、動畫特效、交互等

• H5遊戲二猿&遊戲後端一猿：遊戲開發、部署、管理等

更有甚小團隊

• 視覺兼策劃一枚

• H5遊戲開發二生

細化崗位

• 遊戲主策、數據策劃、關卡策劃

• 視覺設計、動畫設計、特效設計、原畫設計、地圖設計

• 主程、引擎開發、遊戲工具開發、遊戲動畫開發、遊戲後端開發、運維、遊戲測試、性能測試、...

遊戲三跨步

H5遊戲的特點是開發週期短、輕量級、即開即玩，那繞不開下面幾個方面：

• 遊戲系統

• 遊戲引擎

• 開發工具

遊戲系統

遊戲系統定義了我們要開發的遊戲功能，不同遊戲針對不同的玩家，會設計不同的系統，豐富遊戲的可玩性，提高遊戲的樂趣。舉例來說，放置類遊戲一般的系統設計如下所示：

遊戲引擎

什麼是遊戲引擎？

遊戲引擎是一套圖形庫，封裝了一套底層的能力，並且提供了多套遊戲動畫庫，提供了網絡特性、物理系統、動畫、粒子特效、龍骨動畫等功能，市面上比較知名的H5遊戲引擎包括了：白鷺引擎、cocos、layabox、threesjs（3D）、phaser、hilo等

爲什麼用遊戲引擎？

遊戲引擎能夠幫助遊戲開發者提高開發效率，縮短開發週期，提升了遊戲的性能；運用遊戲引擎，開發者能夠按照規則開發出相對易於維護的代碼，減少了界面開發的複雜性

遊戲引擎學習

遊戲引擎廠商提供了豐富的文檔，我們需要學習遊戲的基礎庫文檔，通過例子不斷的實踐，循序漸進、從淺到深的方式的學習，以白鷺引擎爲例：

1. 下載開發工具，並且學習Egret Engine2D基礎庫文檔

2. 學習上層封裝組件EUI庫

3. 學習動畫相關的，包括了緩動、龍骨動畫、MovieClip等

4. 學習粒子效果庫、物理世界庫（p2）等

5. 學習外部庫，包括了音頻howlerjs、網絡（websocket、http）、項目工程化（redux、react等）

6. 遇到問題，反覆查詢文檔回顧學習，論壇查找問題解決方案，微信羣提問等方式積累

開發工具

開發工具對於開發者來說，可以進行可視化的編輯頁面，與此同時，提供了各種動畫和粒子的可視化製作及導出，幫助開發者提高開發效率，其中開發工具還可以進行實時的編輯調試，及時的幫助開發者定位問題，拿白鷺工具舉個栗子：

• 編輯器【Egret Wing】:可視化編輯界面，並且實現一些簡單的緩動效果可視化

• 雪碧圖【Texture Merger】:提供雪碧圖合併導出，並且可以將gif,swf等動畫轉成MovieClip可運行的文件

• 龍骨動畫編輯器【DragonBones】:提供了龍骨動畫的可視化編輯，支持多種格式文件導出

• 粒子編輯器【Egret Feather】:提供了粒子的可視化製作

• 調試工具【Egret Inspector】:chrome插件，可以及時定位錯誤

當然，除了上面的工具，還有其他工具，如：地圖製作工具、關卡製作工具、性能分析工具...

知識體系

由於H5遊戲的特殊性，他對遊戲開發者提出了更高的要求，以下是你想入門遊戲必須掌握的知識體系：

• 前端知識

• 遊戲知識

• 平臺知識

前端知識

由於H5遊戲屬於Web範疇，所以需要具備很多的前端的基礎知識，包括了以下幾個方面：

• 基礎語言：JavaScript、HTML、CSS、TypeScript、PHP等

• 瀏覽器：瀏覽器緩存、本地存儲、瀏覽器頁面渲染流程、多屏適配、兼容性

• 網絡協議：HTTP、HTTPS、WebSocket

• 緩存：redis、memcache

• 音頻視頻：howlerjs

• 基礎技能：PS切圖、動畫製作、音頻剪切壓縮

遊戲知識

由於H5遊戲又有遊戲的範疇，也是一個複雜的前端工程化項目，對基礎遊戲知識和前端工程化知識也有一定的要求：

• 資源管理：按需加載，延遲加載

• 圖片壓縮：tinypng、雪碧圖、減少動畫幀

• 數據狀態管理：redux、react...

• 實時性管理：socketio

• 解耦業務系統：新手引導、紅點系統

平臺知識

H5遊戲的發佈需要平臺作爲載體，需要掌握相關平臺的能力體系，進行適應性開發，充分發揮平臺的能力：

• 微信公衆號：授權、支付、分享、關注、客服、紅包

• 其他平臺：賬戶、支付、數據統計、兌換碼、添加圖標到桌面、分服

相關規範

H5遊戲開發 && 設計師：

• 通用按鈕一致性

• 背景圖片可複用

• 特效動畫儘量精簡幀數

• 粒子特效儘量減少資源

• ...

H5遊戲開發 && 遊戲後端：

• 接口規範：規定單個頁面中的查詢數據一個接口返回，獎品規範格式返回，錯誤格式規範

• 前後端通信協議，小團隊建議使用HTTP，實時性使用websocket

• 公共組件提取：賬戶、支付、紅包、平臺、...

• ...

性能優化

資源

• 小圖資源進行雪碧圖合併

• 動畫進行重複幀數減少跟複用

• 圖片進行tinypng壓縮

• 資源按需、按頁面異步加載

• 圖片進行瀏覽器緩存：cdn、靜態資源站點

• 首屏遊戲資源大小控制在2M以內，提供加載頁優化用戶體驗

內存

• 使用chrome性能分析，對函數內存優化

• 減少JavaScript大數據或複雜運算

• 對動畫、緩動的計算進行優化

• 保證遊戲的FPS在30幀以上

網絡

• 實時性要求高的使用websocket，減少使用不斷輪詢方式

• 合併沒必要的請求，減少請求數

• 對請求響應時間做數據統計分析，定位接口問題

• 對大流量接口進行數據優化

寫在最後

遊戲更像一場奇幻的魔術秀，好的遊戲能夠帶給遊戲玩家無限的驚喜感和快樂。而遊戲開發者正如偉大的魔術師一樣，發現生活中的智慧，精心安排遊戲中的每一個環節，把最優秀的遊戲作品製作出來，奉獻給玩家。正因爲熱愛改變，所以我們才一起聚集在遊戲行業中。