當(dāng)你開發(fā)基于HTML5的游戲時，你有很多選擇。使用什么樣的編輯器?是否用到Canvas 2d、WebGL?采用什么樣的呈現(xiàn)框架和游戲引擎?這些選擇大部分由開發(fā)者的個人經(jīng)驗和游戲?qū)⒁l(fā)布的平臺決定。

幸運的是，有關(guān)HTML5游戲開發(fā)的指南現(xiàn)在已經(jīng)有很多了。而這篇文章則是要告訴開發(fā)者在開發(fā)HTML5游戲以前應(yīng)該具備的一些全局概念。你能從這篇文章中學(xué)到什么?這里會介紹HTML5游戲開發(fā)的一些框架，你將知道如何使你設(shè)計的游戲能夠在更多的平臺上運行，了解如何管理在線游戲的狀態(tài)，如何處理性能問題。

話不多說，現(xiàn)在就開始介紹HTML5游戲開發(fā)的幾條實用建議

建議1：使用框架

如果只是用HTML5編寫一些小程序其實非常簡單，但如果想往你的游戲中加入更豐富的功能，那么就有許多其他的事情需要處理了。

比如，如果你的游戲中有大量的圖片、音效或是其他的資源，那么瀏覽器需要從你的游戲服務(wù)器上下載這些資源，這往往需要花費很多的時間。如果你在 編寫程序的時候沒有考慮這些問題，那么你也許會對***的結(jié)果感到意外。由于圖形和聲音文件都是異步下載的，也許在你的資源下載好以前你的 JavaScript腳步已經(jīng)開始運行了。這就是所謂的“爆音”現(xiàn)象(圖像顯示異常)，而聲音也可能在錯誤的時間播放。一個好的解決方法就是創(chuàng)建一個預(yù)先 下載機制，保證所有的資源下載完以后才允許腳本執(zhí)行。

另一個你可能碰到的問題就是你的游戲在不同的機器甚至是瀏覽器中運行的速度有所不同。雖然這也許在你的控制范圍以外，但你還是可以盡量使得你的動畫或是動作的速度不依賴于游戲運行框架的速度。

其實，現(xiàn)在有許多的游戲模板代碼，里面實現(xiàn)了大多數(shù)游戲需要的功能。這樣，開發(fā)者不需要從頭到尾編寫一個完整的游戲程序?，F(xiàn)在有許多框架可以幫助開發(fā)者設(shè)計游戲，開發(fā)者只用關(guān)注具體的游戲邏輯，而不用擔(dān)心如何使游戲順暢運行這些細(xì)節(jié)問題。

使用框架時唯一需要注意的一點就是如何從眾多的框架中挑選一個合適的框架。像ImpactJS這樣的框架功能非常強大，幾乎可以在各個 方面為開發(fā)者提供幫助;而像EaselJS的框架則主要是處理圖形方面的工作。***，還是需要由開發(fā)者決定使用哪種框架更加合適。這看起來似乎很簡單，但 在JavaScript的世界里面，選擇一個框架時也意味著你選擇了一種特定的編程風(fēng)格。

ig.module('monster') 
.requires('impact.game',) 
.defines(function(){ 
Monster=ig.Entity.extend({eyes : 42});}); 

Monster=ig.Entity.extend({eyes : 42});});ImpactJS就是一個很好的例子，它不僅提供了圖像顯示和音效處理的方法，還在實現(xiàn)中插入了自己的對象和模型。

Ascended Arcade三個月內(nèi)發(fā)開了三款游戲，全部使用的是ImpactJS的框架

雖然現(xiàn)在已經(jīng)有很多HTML5游戲使用了一些框架，但是還是有很多開發(fā)者不嫌麻煩地選擇不依賴任何框架完全自己開發(fā)。如果你想在合理的時間內(nèi)完 成任務(wù)，使用框架當(dāng)然是最有效的方法。Ascended Arcade就是一個很好的例子，在短短三個月的時間里，他們就開發(fā)出了三個游戲，全部使用了ImpactJS框架。

建議2：將小屏幕和觸屏設(shè)備考慮在內(nèi)

HTML5***的賣點之一就是它既能在桌面PC上使用，也能在筆記本電腦、平板設(shè)備甚至是智能手機上運行。(這里有IE9在Windows Phone 7 Mango上的運行效果演示)。

HTML5與生俱來就具備了跨平臺的特性，通常為開發(fā)者節(jié)省了很多工作。然而，有些事情是需要開發(fā)者考慮的…

SpyChase在Windows Phone 7 Mango上的運行效果

首先也是最重要的一點，不同的設(shè)備屏幕的尺寸也有所不同，屏幕的寬高比以及分辨率可能有很大的差別。如果想讓你的HTML5在移動設(shè)備上擁有良 好的效果，確保它支持多種分辨率并且不超過WVGA的800×480框架大小。此外，由于大多數(shù)的移動設(shè)備無法在一個屏幕上顯示所有的頁面內(nèi)容，他們常常 采用精確的縮放和平移技術(shù)，而這些技術(shù)通常并不適用于游戲的編寫?？梢栽诰幊痰臅r候使用viewport meta標(biāo)志禁用這些功能。下面的代碼片段可以用來使你的游戲視圖根據(jù)屏幕的實際水平寬度自動調(diào)節(jié)。移動瀏覽器上的縮放功能常常與觸控游戲控制功能產(chǎn)生沖 突，可以將“user-scaleable”參數(shù)設(shè)置為“no”，從而禁用瀏覽器的縮放功能。

現(xiàn)在你已經(jīng)能夠?qū)⒛愕挠螒蛞晥D很好地呈現(xiàn)在小屏幕設(shè)備上了，接下來就該考慮如何處理用戶輸入的問題了。大多數(shù)觸屏設(shè)備都有一個虛擬鍵盤，但是在 玩游戲的時候顯示一個虛擬鍵盤實在太浪費空間了。你應(yīng)該開發(fā)一個有限的虛擬鍵盤，只提供游戲中使用到的按鍵(比如箭頭)。當(dāng)然，***是盡可能在游戲中不需 要使用額外的元素。Spy Chase在這方面做得很好，用戶只用一個手指就能控制游戲中的汽車了。

建議3：自動保存用戶的記錄

使用 site pinning,web瀏覽器試圖讓W(xué)eb Apps可以像桌面apps一樣工作。但是，讓網(wǎng)站像Apps一樣運行的想法還比較新鮮，同樣的，讓W(xué)eb頁面保存客戶端的狀態(tài)也尚未成熟。用戶在關(guān)閉 Microsoft Word的文檔時可能會思考一下內(nèi)容是否已經(jīng)保存，而在關(guān)閉Web頁面時往往不會這么仔細(xì)了。通常這并不會帶來什么問題——大多數(shù)的Web頁面是沒有狀態(tài) 的，或者是將用戶的記錄保存在了服務(wù)器上。

但如果是處理瀏覽器游戲，情況就完全不同了。通常在客戶端執(zhí)行的是JavaScript代碼，HTML5游戲通常將游戲的狀態(tài)緩存在內(nèi)存中(RAM)。一旦關(guān)閉瀏覽器窗口，用戶辛辛苦苦贏得的高分就永遠(yuǎn)地丟失了。

你可以要求用戶小心一點，不要將正在進(jìn)行的游戲窗口關(guān)閉，但是意外總是會發(fā)生的，尤其是當(dāng)用戶開了多個窗口或是電池沒電的時候。

長話短說：在編寫HTML5游戲時，***是經(jīng)常將游戲玩家的進(jìn)度狀態(tài)保存一下，當(dāng)用戶重新打開關(guān)閉的web頁面時，應(yīng)該讓用戶可以繼續(xù)之前沒有結(jié)束的游戲而不是重頭來過。

你應(yīng)該將用戶的記錄保存在哪里呢?過去，答案往往是服務(wù)器端的數(shù)據(jù)庫或是客戶端的cookie。但是這兩個都不是***的選擇。如果是在服務(wù)器 端，則會產(chǎn)生額外的HTTP請求開銷。如果是cookie的話，則可以保存記錄的空間非常有限，并且cookie的壽命取決于瀏覽器的配置。

一個更有效的方法是使用HTML5 DOM storage。DOM Storage提供了一個key-value存儲(或是JavaScript定義的對象)的接口，可以為每個網(wǎng)站保存幾兆的數(shù)據(jù)。使用起來非常方便，但是 在HTML5游戲中，你可能想要記錄一些更加復(fù)雜的數(shù)據(jù)結(jié)構(gòu)——這些DOM storage本身可能并不支持。幸運的是，現(xiàn)在的JavaScript提供了一套機制幫助開發(fā)者將一組對象壓縮成一些緊湊的符號，這就是JSON機制。 使用這套機制，DOM storage可以保存任何格式的信息。下面的兩個函數(shù)展示了如何使用HTML5 DOM storage保存游戲狀態(tài)以及ECMAScript5中的JSON功能：

functionsaveState(state) { 
    window.localStorage.setItem("gameState", JSON.stringify(state)); 
} 
functionrestoreState() { 
    varstate =window.localStorage.getItem("gameState"); 
    if(state) { 
        returnJSON.parse(state); 
    }else{ 
        retrun null; 
    } 
} 

建議4：使用profiler

游戲開發(fā)中***的挑戰(zhàn)是在加入許多功能以后，如何保證游戲仍然具有高的幀顯示頻率。

好的消息是近幾年來，瀏覽器的速度越來越快了，基于HTML5的游戲已經(jīng)可以達(dá)到每秒60幀了。

這是非常了不起的。對IE9來說，這意味著開發(fā)了一個全新的JavaScript引擎，能夠利用多CPU內(nèi)核以及基于Direct2D的硬件渲染管道。換言之，如果你配備了高配置的游戲平臺，IE9就能充分地利用這些硬件平臺。

IE9整合了JavaScript分析器，能夠發(fā)現(xiàn)性能瓶頸

對于簡單的游戲，這意味著你不必?fù)?dān)心它的性能問題。但由于HTML5可以運行在任何平臺上，這意味著你發(fā)開的HTML5游戲應(yīng)該能夠運行在任何 一個設(shè)備或是瀏覽器上，其中有些設(shè)備或瀏覽器的處理能力可能并沒有你希望的那么快。即使你的應(yīng)用只針對高性能的PC，游戲的性能也是一個不得不考慮的問題。

如果你要求你的游戲達(dá)到每秒60幀，這意味著每一幀的渲染時間不能超過16毫秒。也就是說，在你一眨眼的時間里面，你需要完成至少6幀的渲染工作?，F(xiàn)在聽起來可能有點難以想象…但是有些非凡的游戲確實能夠做到。

幸運的是，這里有些工具可能能夠幫助你。在IE9(或是IE10)上，通過按下F12按鍵可以打開開發(fā)工具面板。選擇“Profile”選項然后選中“Start profiling”。

現(xiàn)在在你覺得性能需要提升的地方停留30秒，profiler將收集相關(guān)數(shù)據(jù)，然后選擇“stop profiling”。你將看到你的游戲中的每個功能的累積執(zhí)行時間。通常，你會發(fā)現(xiàn)某些功能占用了大部分的時間。這樣你就能有針對性地優(yōu)化那些特別耗時的功能了。

不要過分相信自己的直覺——有些代碼可能看起來效率很低，但在某些JavaScript引擎上執(zhí)行起來速度卻很快。***的辦法就是時常地反復(fù)分析程序，對于修改過的代碼，需要反復(fù)進(jìn)行測試確保你的修改確實能夠提升程序的性能。

游戲變得越來越社會化：Warimals是基于HTML5的游戲，用戶可以與Facebook上的好友一起參與游戲

建議5：要有創(chuàng)造性!

能夠開發(fā)出在瀏覽器中運行的游戲是一件很棒的事情，而更酷的是可以使用HTML5在瀏覽器上開發(fā)游戲應(yīng)用!從技術(shù)的角度看，HTML5是非常棒的，而瀏覽器也是非常理想的游戲平臺。

想想看…各種不同的設(shè)備上都有瀏覽器，它們通常是時時在線的，它是人們接收郵件、聊天和社交網(wǎng)絡(luò)的工具。瀏覽器游戲的開發(fā)者，可以利用自己開發(fā)的游戲?qū)碜允澜绺鞯氐娜藗兟?lián)系在一起。

作為一個HTML5游戲開發(fā)者，你必須了解很多很酷的開發(fā)工具，在Mozilla社區(qū)中我們已經(jīng)介紹了很多為Firefox開發(fā)者提供的開發(fā)工具，包括 JavaScript Debugger, Style Editor, Page Inspector, Scratchpad, Profiler, Network Monitorand Web Console.

#p#

下面繼續(xù)介紹一些HTML游戲開發(fā)的工具。

Canvas Debugger

在***版本的firefox中，我們在瀏覽器中添加了Canvas調(diào)試。Canvas Debugger允許你跟蹤所有的canvas上下文調(diào)用， 像繪制元素和使用特定的調(diào)色器一樣，它會根據(jù)具體的要求調(diào)用顏色編碼。它不僅在開發(fā)基于WebGL的游戲時有用，它同時也可以用來測試基于Canvas 2D的游戲。 在下面的游戲中，你可以看到動畫被分解成很多個靜態(tài)圖，你可以點擊任意一行直接查看那一部分的響應(yīng)。

Shader Editor

當(dāng)你創(chuàng)建一個基于WebGL的游戲時，如果能在游戲運行時測試和修改著色器程序?qū)⑹欠浅？岬囊患隆Ｊ褂肧hader Editor就可以做到這么酷的事情。你不需要重新加載界面就可以修改頂點和片段著色器，還可以查看其對輸出結(jié)果的影響。

Web Audio Editor

在Firefox Aurora(32)版本中有一個Web Audio Editor，這個編輯器通過圖表展示了所有的音頻結(jié)點和當(dāng)前AudioContext的連接。你可以通過它查看每個結(jié)點的特定屬性。Web Audio API提供了更多混音的創(chuàng)建，對音頻的操作和處理比HTML5的Audio標(biāo)簽強大很多。

Network Monitor

對于HTML5游戲開發(fā)者來說，需要花費昂貴的代碼來對游戲進(jìn)行繁瑣的測試。如果游戲是在手機設(shè)備中運行，可以使用Network Monitor直觀地看到所有的網(wǎng)絡(luò)請求，系統(tǒng)耗時和類型大小等屬性。

除此之外，你還可以通過Network Monitor直觀地看到游戲的性能分析。

Web IDE

開發(fā)游戲之前你必須先選擇一個開發(fā)環(huán)境，同樣，你有很多種選擇(Sublime,Eclipse,Dreamweaver,vi等等)，重要的是你肯定已經(jīng)有一款常用的開發(fā)環(huán)境了。如果你對瀏覽器端的開發(fā)環(huán)境感興趣，你可以試一下Web IDE，它已經(jīng)在Firefox的***版本中上線了。

Web IDE不僅提供開發(fā)者進(jìn)行正常的編碼，還可以遠(yuǎn)程發(fā)布、調(diào)試、框架管理等。

原文鏈接：http://www.cocoachina.com/game/20150906/13326.html?utm_source=tuicool