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

2D WebGL

在使用openGL和WebGL引擎時(shí)，開發(fā)者通常會(huì)創(chuàng)建多個(gè)網(wǎng)格和紋理對象。但是Istrolid的作者卻有著自己獨(dú)特的建構(gòu)方法。他通過一個(gè)網(wǎng)格和紋理對象來繪畫所有的游戲內(nèi)容。游戲中的飛船有非常簡單的多邊形構(gòu)成，有的甚至是由若干個(gè)三角形構(gòu)成的。因此作者認(rèn)為沒有必為每一個(gè)要繪制的物體都新建一個(gè)網(wǎng)格對象。

取而代之的是創(chuàng)建一個(gè)動(dòng)態(tài)的網(wǎng)格并在每一幀畫面中通過代碼來調(diào)整這個(gè)網(wǎng)格。這樣會(huì)大大加快繪制的速度。這種方法和通常被開發(fā)者們棄用的openGL的immediate模式比較類似。同時(shí)，作者不推薦使用 3D ModelView的矩陣。在編寫Istrolid時(shí)，他僅僅將一個(gè)視點(diǎn)的矩形傳遞給了著色器。因此這款游戲是完全基于2D引擎的。

圖1 游戲中的飛船均由簡單的多邊形構(gòu)成

紋理對象也很簡單，而且和網(wǎng)格對象一樣是動(dòng)態(tài)的。在一個(gè)區(qū)域或者地形上繪制圖片時(shí)，游戲程序會(huì)加載這個(gè)紋理對象并將它放到一個(gè)實(shí)時(shí)打包的紋理地圖集中。之后程序會(huì)根據(jù)新的UI坐標(biāo)系來創(chuàng)建網(wǎng)格對象。

圖2 2048px*2048px的地圖集

作者對著色器的操作也很簡單。他將所有的顏色都轉(zhuǎn)換到了HSV顏色空間中以便于進(jìn)行顏色的調(diào)整。

圖3 HSV顏色空間

Coffee Script

JavaScript快得難以置信。作者原本利用Panda3d和Python來編寫卻發(fā)現(xiàn)Python并不能滿足他對速度的需求。他認(rèn)為不斷發(fā)展壯大的JavaScript在滿足他對速度的追求的同時(shí)還能實(shí)現(xiàn)更多的功能。他使用CoffeeScript來編寫整個(gè)游戲并非常喜愛它的縮進(jìn)排版和箭頭標(biāo)識(shí)符。特別令他印象深刻的一點(diǎn)是箭頭標(biāo)識(shí)符可以非常快速的創(chuàng)建內(nèi)聯(lián)函數(shù)。

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

圖4 作者自制的基于網(wǎng)絡(luò)的編輯器

WebSocket和服務(wù)器

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

在開發(fā)即時(shí)戰(zhàn)略類游戲時(shí)，開發(fā)者通常會(huì)選擇鎖步（Lock Step）方法。但是Istrolid得作者并沒有這么做。他認(rèn)為鎖步已經(jīng)過時(shí)，不易于編寫（尤其是用JavaScript編寫時(shí)）。而且在這個(gè)個(gè)人電腦普遍擁有高帶寬的時(shí)代，鎖步的優(yōu)勢已不再明顯。他采用delta編碼方式，并僅將變動(dòng)的數(shù)據(jù)從服務(wù)器傳給每個(gè)玩家的服務(wù)器上。

圖5 Istrolid的網(wǎng)絡(luò)結(jié)構(gòu)

AudioContext

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

HTML UI

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

Electorn “Shell”

如今將HTML5游戲編譯成適合于Windows、Mac或Linux的桌面應(yīng)用程序非常容易。Istrolid的作者非常推薦那些因?yàn)椴寮卣埂g覽器過時(shí)或者驅(qū)動(dòng)故障等問題頭疼的開發(fā)者嘗試一下Electron。同時(shí)這也為把你的游戲發(fā)布到類似Steam這樣需要提供可下載文件的游戲平臺(tái)創(chuàng)造了可能。

圖6 Electron

點(diǎn)擊閱讀原文，查看原文章～