Istrolid是一款采用諸多web新技術的HTML5游戲。游戲的作者treeform分別使用webGL、WebSocket、AudioContext和作者自制的響應式HTML框架來渲染圖形、創建網絡連接、播放音頻和設計UI。另外，他還使用了Electron來將游戲打包成Windows和Mac的桌面應用程序。筆者這次給大家分享一下 Istrolid作者的游戲開發心得。

　　2D WebGL

　　在使用openGL和WebGL引擎時，開發者通常會創建多個網格和紋理對象。但是Istrolid的 作者卻有著自己獨特的建構方法。他 通過一個網格和紋理對象 來繪畫所有的游戲內容。游戲中的飛船有非常簡單的多邊形構成，有的甚至是由若干個三角形構成的。因此作者認為沒有必為每一個要繪制的物體都新建一個網格對象。取而代之的是創建一個動態的網格并在每一幀畫面中通過代碼來調整這個網格。這樣會大大加快繪制的速度。這種方法和通常被開發者們棄用的openGL的immediate模式比較類似。同時，作者不推薦使用 3D ModelView的矩陣。在編寫 Istrolid時， 他僅僅將一個視點的矩形傳遞給了著色器。因此這款游戲是完全基于2D引擎的。

　　圖1 游戲中的飛船均由簡單的多邊形構成

　　紋理對象也很簡單，而且和網格對象一樣是動態的。在一個區域或者地形上繪制圖片時，游戲程序會加載這個紋理對象并將它放到一個實時打包的紋理地圖集中。之后程序會根據新的UI坐標系來創建網格對象。

　　圖2 2048px*2048px的地圖集

　　作者對著色器的操作也很簡單。他將所有的顏色都轉換到了HSV顏色空間中以便于進行顏色的調整。

　　圖3 HSV顏色空間

　　Coffee Script

　　JavaScript快得難以置信。作者原本利用Panda3d和Python來編寫卻發現Python并不能滿足他對速度的需求。他認為不斷發展壯大的JavaScript在滿足他對速度的追求的同時還能實現更多的功能。他使用CoffeeScript來編寫整個游戲并非常喜愛它的縮進排版和箭頭標識符。特別令他印象深刻的一點是箭頭標識符可以非常快速的創建內聯函數。

　　他利用自己三年前編寫的基于HTML的編輯器在服務器上編寫代碼。這樣的好處是他可以通過訪問編輯器的URL來在任意一臺電腦上開始他的開發工作。他用過Windows、Mac和ChromeOS并非常支持ChromeOS的云理念。

　　圖4 作者自制的基于網絡的編輯器

　　WebSocket和服務器

　　作者利用CoffeeScript來編寫服務器端程序并用Node.js來運行。他希望這款游戲能夠同時支持單人模式和多人模式。當玩家進行單人模式游戲時會開啟一個本地服務器。程序通過一個偽WebSocket來連接到本地服務器。這樣的好處是可以在一個真實的網絡環境中來測試代碼，從而簡化調試的過程。所有的調試和單步調試都在一個進程中完成。另外，他還可以在這個偽WebSocket中設置網絡延時和抖動來模擬復雜的網絡環境。

　　在開發即時戰略類游戲時，開發者通常會選擇鎖步(Lock Step)方法。但是 Istrolid得作者并沒有這么做。他認為鎖步已經過時，不易于編寫(尤其是用JavaScript編寫時)。而且在這個個人電腦普遍擁有高帶寬的時代，鎖步的優勢已不再明顯。他采用delta編碼方式，并僅將變動的數據從服務器傳給每個玩家的服務器上。

　　圖5 Istrolid的網絡結構

　　AudioContext

　　瀏覽器的音頻播放能力已經改善許多。作者通過過程生成技術來創建背景音樂，并創建一個隨著游戲的進行動態響應的鼓。當一個單位被集中或者爆炸時他會提高這個鼓的音量。他將每一個武器開火時的聲音的音量設定成一個隨機數以保證每一個武器的聲音都有差別，盡管這個差別很細微。除非要開發一個音樂游戲否則作者不推薦在這方面花太多時間。

　　HTML UI

　　如果游戲中的UI非常多的話，那么完全靠自己用代碼來實現就會非常困難。這時就需要一些些復雜的UI框架來進行輔助。對于HTML5游戲來說，無需使用復雜的工具包即可實現復雜的UI效果。作者還利用HTML5的特性自己設計了一個響應式框架從而簡化UI的編寫過程。

　　Electorn “Shell”

　　如今將HTML5游戲編譯成適合于Windows、Mac或Linux的桌面應用程序非常容易。Istrolid的作者非常推薦那些因為插件拓展、瀏覽器過時或者驅動故障等問題頭疼的開發者嘗試一下Electron。同時這也為把你的游戲發布到類似Steam這樣需要提供可下載文件的游戲平臺創造了可能。

　　圖6 Electron

來源：http://www.gbtags.com/gb/share/10213.htm