HTML 5游戲開(kāi)發(fā)的5條最佳實(shí)踐
正是由于HTML5具有豐富的功能并且無(wú)處不在，所以它給開(kāi)發(fā)者帶來(lái)了很多的靈感。俗話說(shuō)得好，“一旦開(kāi)發(fā)者有了靈感，他們就開(kāi)始編寫(xiě)游戲了。”(這句話應(yīng)該是作者編的O(∩_∩)O~)
幸運(yùn)的是，有關(guān)HTML5游戲開(kāi)發(fā)的指南現(xiàn)在已經(jīng)有很多了。而這篇文章則是要告訴開(kāi)發(fā)者在開(kāi)發(fā)HTML5游戲以前應(yīng)該具備的一些全局概念。你能從這篇文章中學(xué)到什么?這里會(huì)介紹HTML5游戲開(kāi)發(fā)的一些框架，你將知道如何使你設(shè)計(jì)的游戲能夠在更多的平臺(tái)上運(yùn)行，了解如何管理在線游戲的狀態(tài)，如何處理性能問(wèn)題。
51CTO推薦專(zhuān)題：HTML 5 下一代Web開(kāi)發(fā)標(biāo)準(zhǔn)詳解
話不多說(shuō)，現(xiàn)在就開(kāi)始介紹HTML5游戲開(kāi)發(fā)的5條實(shí)用建議。
建議#1：使用框架
如果只是用HTML5編寫(xiě)一些小程序其實(shí)非常簡(jiǎn)單，但如果想往你的游戲中加入更豐富的功能，那么就有許多其他的事情需要處理了。
比如，如果你的游戲中有大量的圖片、音效或是其他的資源，那么瀏覽器需要從你的游戲服務(wù)器上下載這些資源，這往往需要花費(fèi)很多的時(shí)間。如果你在編寫(xiě)程序的時(shí)候沒(méi)有考慮這些問(wèn)題，那么你也許會(huì)對(duì)***的結(jié)果感到意外。由于圖形和聲音文件都是異步下載的，也許在你的資源下載好以前你的JavaScript腳步已經(jīng)開(kāi)始運(yùn)行了。這就是所謂的“爆音”現(xiàn)象(圖像顯示異常)，而聲音也可能在錯(cuò)誤的時(shí)間播放。一個(gè)好的解決方法就是創(chuàng)建一個(gè)預(yù)先下載機(jī)制，保證所有的資源下載完以后才允許腳本執(zhí)行。
另一個(gè)你可能碰到的問(wèn)題就是你的游戲在不同的機(jī)器甚至是瀏覽器中運(yùn)行的速度有所不同。雖然這也許在你的控制范圍以外，但你還是可以盡量使得你的動(dòng)畫(huà)或是動(dòng)作的速度不依賴(lài)于游戲運(yùn)行框架的速度。
其實(shí)，現(xiàn)在有許多的游戲模板代碼，里面實(shí)現(xiàn)了大多數(shù)游戲需要的功能。這樣，開(kāi)發(fā)者不需要從頭到尾編寫(xiě)一個(gè)完整的游戲程序?，F(xiàn)在有許多框架可以幫助開(kāi)發(fā)者設(shè)計(jì)游戲，開(kāi)發(fā)者只用關(guān)注具體的游戲邏輯，而不用擔(dān)心如何使游戲順暢運(yùn)行這些細(xì)節(jié)問(wèn)題。
使用框架時(shí)唯一需要注意的一點(diǎn)就是如何從眾多的框架中挑選一個(gè)合適的框架。像 ImpactJS這樣的框架功能非常強(qiáng)大，幾乎可以在各個(gè)方面為開(kāi)發(fā)者提供幫助;而像 EaselJS的框架則主要是處理圖形方面的工作。***，還是需要由開(kāi)發(fā)者決定使用哪種框架更加合適。這看起來(lái)似乎很簡(jiǎn)單，但在JavaScript的世界里面，選擇一個(gè)框架時(shí)也意味著你選擇了一種特定的編程風(fēng)格。
ImpactJS就是一個(gè)很好的例子，它不僅提供了圖像顯示和音效處理的方法，還在實(shí)現(xiàn)中插入了自己的對(duì)象和模型。
Ascended Arcade三個(gè)月內(nèi)發(fā)開(kāi)了三款游戲，全部使用的是ImpactJS的框架
雖然現(xiàn)在已經(jīng)有很多HTML5游戲使用了一些框架，但是還是有很多開(kāi)發(fā)者不嫌麻煩地選擇不依賴(lài)任何框架完全自己開(kāi)發(fā)。如果你想在合理的時(shí)間內(nèi)完成任務(wù)，使用框架當(dāng)然是最有效的方法。Ascended Arcade就是一個(gè)很好的例子，在短短三個(gè)月的時(shí)間里，他們就開(kāi)發(fā)出了三個(gè)游戲，全部使用了ImpactJS框架。
建議#2：將小屏幕和觸屏設(shè)備考慮在內(nèi)
HTML5***的賣(mài)點(diǎn)之一就是它既能在桌面PC上使用，也能在筆記本電腦、平板設(shè)備甚至是智能手機(jī)上運(yùn)行。(這里有IE9在Windows Phone 7 Mango上的運(yùn)行效果演示)。
HTML5與生俱來(lái)就具備了跨平臺(tái)的特性，通常為開(kāi)發(fā)者節(jié)省了很多工作。然而，有些事情是需要開(kāi)發(fā)者考慮的…
SpyChase在Windows Phone 7 Mango上的運(yùn)行效果
首先也是最重要的一點(diǎn)，不同的設(shè)備屏幕的尺寸也有所不同，屏幕的寬高比以及分辨率可能有很大的差別。如果想讓你的HTML5在移動(dòng)設(shè)備上擁有良好的效果，確保它支持多種分辨率并且不超過(guò)WVGA的800×480框架大小。此外，由于大多數(shù)的移動(dòng)設(shè)備無(wú)法在一個(gè)屏幕上顯示所有的頁(yè)面內(nèi)容，他們常常采用精確的縮放和平移技術(shù)，而這些技術(shù)通常并不適用于游戲的編寫(xiě)?？梢栽诰幊痰臅r(shí)候使用viewport meta標(biāo)志禁用這些功能。下面的代碼片段可以用來(lái)使你的游戲視圖根據(jù)屏幕的實(shí)際水平寬度自動(dòng)調(diào)節(jié)。移動(dòng)瀏覽器上的縮放功能常常與觸控游戲控制功能產(chǎn)生沖突，可以將“user-scaleable”參數(shù)設(shè)置為“no”，從而禁用瀏覽器的縮放功能。
現(xiàn)在你已經(jīng)能夠?qū)⒛愕挠螒蛞晥D很好地呈現(xiàn)在小屏幕設(shè)備上了，接下來(lái)就該考慮如何處理用戶輸入的問(wèn)題了。大多數(shù)觸屏設(shè)備都有一個(gè)虛擬鍵盤(pán)，但是在玩游戲的時(shí)候顯示一個(gè)虛擬鍵盤(pán)實(shí)在太浪費(fèi)空間了。你應(yīng)該開(kāi)發(fā)一個(gè)有限的虛擬鍵盤(pán)，只提供游戲中使用到的按鍵(比如箭頭)。當(dāng)然，***是盡可能在游戲中不需要使用額外的元素。Spy Chase在這方面做得很好，用戶只用一個(gè)手指就能控制游戲中的汽車(chē)了。
#p#
建議#3：自動(dòng)保存用戶的記錄
使用 site pinning,web瀏覽器試圖讓web apps可以像桌面apps一樣工作。但是，讓網(wǎng)站像apps一樣運(yùn)行的想法還比較新鮮，同樣的，讓web頁(yè)面保存客戶端的狀態(tài)也尚未成熟。用戶在關(guān)閉Microsoft Word的文檔時(shí)可能會(huì)思考一下內(nèi)容是否已經(jīng)保存，而在關(guān)閉web頁(yè)面時(shí)往往不會(huì)這么仔細(xì)了。通常這并不會(huì)帶來(lái)什么問(wèn)題——大多數(shù)的web頁(yè)面是沒(méi)有狀態(tài)的，或者是將用戶的記錄保存在了服務(wù)器上。
但如果是處理瀏覽器游戲，情況就完全不同了。通常在客戶端執(zhí)行的是JavaScript代碼，HTML5游戲通常將游戲的狀態(tài)緩存在內(nèi)存中(RAM)。一旦關(guān)閉瀏覽器窗口，用戶辛辛苦苦贏得的高分就永遠(yuǎn)地丟失了。
你可以要求用戶小心一點(diǎn)，不要將正在進(jìn)行的游戲窗口關(guān)閉，但是意外總是會(huì)發(fā)生的，尤其是當(dāng)用戶開(kāi)了多個(gè)窗口或是電池沒(méi)電的時(shí)候。
長(zhǎng)話短說(shuō)：在編寫(xiě)HTML5游戲時(shí)，***是經(jīng)常將游戲玩家的進(jìn)度狀態(tài)保存一下，當(dāng)用戶重新打開(kāi)關(guān)閉的web頁(yè)面時(shí)，應(yīng)該讓用戶可以繼續(xù)之前沒(méi)有結(jié)束的游戲而不是重頭來(lái)過(guò)。
你應(yīng)該將用戶的記錄保存在哪里呢?過(guò)去，答案往往是服務(wù)器端的數(shù)據(jù)庫(kù)或是客戶端的cookie。但是這兩個(gè)都不是***的選擇。如果是在服務(wù)器端，則會(huì)產(chǎn)生額外的HTTP請(qǐng)求開(kāi)銷(xiāo)。如果是cookie的話，則可以保存記錄的空間非常有限，并且cookie的壽命取決于瀏覽器的配置。
一個(gè)更有效的方法是使用HTML5 DOM storage。DOM Storage提供了一個(gè)key-value存儲(chǔ)(或是JavaScript定義的對(duì)象)的接口，可以為每個(gè)網(wǎng)站保存幾兆的數(shù)據(jù)。使用起來(lái)非常方便，但是在HTML5游戲中，你可能想要記錄一些更加復(fù)雜的數(shù)據(jù)結(jié)構(gòu)——這些DOM storage本身可能并不支持。幸運(yùn)的是，現(xiàn)在的JavaScript提供了一套機(jī)制幫助開(kāi)發(fā)者將一組對(duì)象壓縮成一些緊湊的符號(hào)，這就是JSON機(jī)制。使用這套機(jī)制，DOM storage可以保存任何格式的信息。下面的兩個(gè)函數(shù)展示了如何使用HTML5 DOM storage保存游戲狀態(tài)以及ECMAScript5中的JSON功能：
建議#4：使用profiler
游戲開(kāi)發(fā)中***的挑戰(zhàn)是在加入許多功能以后，如何保證游戲仍然具有高的幀顯示頻率。
好的消息是近幾年來(lái)，瀏覽器的速度越來(lái)越快了，基于HTML5的游戲已經(jīng)可以達(dá)到每秒60幀了。
這是非常了不起的。對(duì)IE9來(lái)說(shuō)，這意味著開(kāi)發(fā)了一個(gè)全新的JavaScript引擎，能夠利用多CPU內(nèi)核以及基于Direct2D的硬件渲染管道。換言之，如果你配備了高配置的游戲平臺(tái)，IE9就能充分地利用這些硬件平臺(tái)。
IE9整合了JavaScript分析器，能夠發(fā)現(xiàn)性能瓶頸
對(duì)于簡(jiǎn)單的游戲，這意味著你不必?fù)?dān)心它的性能問(wèn)題。但由于HTML5可以運(yùn)行在任何平臺(tái)上，這意味著你發(fā)開(kāi)的HTML5游戲應(yīng)該能夠運(yùn)行在任何一個(gè)設(shè)備或是瀏覽器上，其中有些設(shè)備或?yàn)g覽器的處理能力可能并沒(méi)有你希望的那么快。即使你的應(yīng)用只針對(duì)高性能的PC，游戲的性能也是一個(gè)不得不考慮的問(wèn)題。
如果你要求你的游戲達(dá)到每秒60幀，這意味著每一幀的渲染時(shí)間不能超過(guò)16毫秒。也就是說(shuō)，在你一眨眼的時(shí)間里面，你需要完成至少6幀的渲染工作?，F(xiàn)在聽(tīng)起來(lái)可能有點(diǎn)難以想象…但是有些非凡的游戲確實(shí)能夠做到。
幸運(yùn)的是，這里有些工具可能能夠幫助你。在IE9(或是IE10)上，通過(guò)按下F12按鍵可以打開(kāi)開(kāi)發(fā)工具面板。選擇“Profile”選項(xiàng)然后選中“Start profiling”。
現(xiàn)在在你覺(jué)得性能需要提升的地方停留30秒，profiler將收集相關(guān)數(shù)據(jù)，然后選擇“stop profiling”。你將看到你的游戲中的每個(gè)功能的累積執(zhí)行時(shí)間。通常，你會(huì)發(fā)現(xiàn)某些功能占用了大部分的時(shí)間。這樣你就能有針對(duì)性地優(yōu)化那些特別耗時(shí)的功能了。
不要過(guò)分相信自己的直覺(jué)——有些代碼可能看起來(lái)效率很低，但在某些JavaScript引擎上執(zhí)行起來(lái)速度卻很快。***的辦法就是時(shí)常地反復(fù)分析程序，對(duì)于修改過(guò)的代碼，需要反復(fù)進(jìn)行測(cè)試確保你的修改確實(shí)能夠提升程序的性能。
游戲變得越來(lái)越社會(huì)化：Warimals是基于HTML5的游戲，用戶可以與Facebook上的好友一起參與游戲
建議#5：要有創(chuàng)造性!
能夠開(kāi)發(fā)出在瀏覽器中運(yùn)行的游戲是一件很棒的事情，而更酷的是可以使用HTML5在瀏覽器上開(kāi)發(fā)游戲應(yīng)用!從技術(shù)的角度看，HTML5是非常棒的，而瀏覽器也是非常理想的游戲平臺(tái)。
想想看…各種不同的設(shè)備上都有瀏覽器，它們通常是時(shí)時(shí)在線的，它是人們接收郵件、聊天和社交網(wǎng)絡(luò)的工具。瀏覽器游戲的開(kāi)發(fā)者，可以利用自己開(kāi)發(fā)的游戲?qū)?lái)自世界各地的人們聯(lián)系在一起。
如果你還不熟悉HTML5的游戲開(kāi)發(fā)，你可能將你在線下玩過(guò)的游戲照搬過(guò)來(lái)。這當(dāng)然沒(méi)有什么問(wèn)題。但如果你想讓你的游戲變?yōu)橐粋€(gè)“交流工具”，你***能夠擁有更加新穎和創(chuàng)造力的想法。Warimals就是一個(gè)例子，它是***個(gè)基于HTML5的facebook游戲。在游戲中，用戶可以扮演成一只小狗或是小貓，并可以邀請(qǐng)自己的facebook好友一同參加。用戶有什么理由不喜歡這個(gè)游戲呢?
總結(jié)…
感謝框架的開(kāi)發(fā)者和JavaScript的相關(guān)工作者，HTML5已經(jīng)成為了一個(gè)相當(dāng)成熟的游戲開(kāi)發(fā)平臺(tái)。這是一個(gè)好消息，因?yàn)閃eb是唯一一個(gè)適合各種應(yīng)用廣泛使用的運(yùn)行環(huán)境。選擇合理的工具(很多工具都可以在IE9和IE10中使用，并且能夠免費(fèi)下載到)和框架，HTML5游戲開(kāi)發(fā)將是一件簡(jiǎn)單并且有價(jià)值的事情，尤其適合開(kāi)發(fā)新穎和社交性很強(qiáng)的游戲。
原文：http://www.webapptrend.com/2011/12/987.html
【編輯推薦】
