本文關(guān)鍵詞：HTML5游戲開(kāi)發(fā)，由筆耕文化傳播整理發(fā)布。

一個(gè)月前火狐發(fā)布了最新版本Firefox 31，新增了很多關(guān)于幫助游戲開(kāi)發(fā)者開(kāi)發(fā)和調(diào)試HTML5游戲的功能。除了Mozilla基金會(huì)目前依靠asm.js開(kāi)發(fā)HTML5游戲外，其它游戲制作公司比如Dungeon Defenders Eternity和Cloud Raiders都在javascript中使用交叉編譯器Emscripten編寫(xiě)游戲�？偠灾�，到目前為止HTML5已經(jīng)是一個(gè)很成熟的游戲平臺(tái)了。

如果你對(duì)Emscripten感興趣，你可以在Emscripten的wiki中了解到更多信息，MDN也提供了Emscripten的教程。如果你想用asm.js開(kāi)發(fā)，可以看一下這篇教程。

在這篇文章中，我們會(huì)向你介紹由Mozilla基金會(huì)創(chuàng)建的一些開(kāi)發(fā)和調(diào)試HTML5游戲的資源。我們會(huì)以介紹為主，如果有什么問(wèn)題，希望你可以在評(píng)論中給我們反饋。

開(kāi)始

當(dāng)你開(kāi)發(fā)基于HTML5的游戲時(shí)，你有很多選擇。使用什么樣的編輯器？是否用到Canvas 2d、WebGL？采用什么樣的呈現(xiàn)框架和游戲引擎？這些選擇大部分由開(kāi)發(fā)者的個(gè)人經(jīng)驗(yàn)和游戲?qū)⒁l(fā)布的平臺(tái)決定。沒(méi)有一篇文章能回答所有的問(wèn)題，但我們希望這篇文章能為你提供一條捷徑。

工具

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

下面我們會(huì)介紹一引起最近更新的工具。

Canvas Debugger

在最新版本的firefox中，我們?cè)跒g覽器中添加了Canvas調(diào)試。

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

想要了解更多Canvas Debugger的信息可以看一看這篇文章。

Shader Editor

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

想要了解更多Shader Editor的信息可以看一看這篇文章。 

Web Audio Editor

在最新的Firefox Aurora(32)版本中有一個(gè)Web Audio Editor，這個(gè)編輯器通過(guò)圖表展示了所有的音頻結(jié)點(diǎn)和當(dāng)前AudioContext的連接。你可以通過(guò)它查看每個(gè)結(jié)點(diǎn)的特定屬性。

Web Audio API提供了更多混音的創(chuàng)建，對(duì)音頻的操作和處理比HTML5的Audio標(biāo)簽強(qiáng)大很多。你可以通過(guò)這篇文章了解如何使用Web Audio API。

Network Monitor

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

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

想要了解更多Shader Editor的信息可以看一看這篇文章。

Web IDE

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

總結(jié)

如果你對(duì)上面的資源感興趣，可以進(jìn)行深入的學(xué)習(xí)，有什么收獲可以拿出來(lái)和大家一起分享。

英文：https://hacks.mozilla.org/2014/07/resources-for-html5-game-developers/#content-main

  本文關(guān)鍵詞：HTML5游戲開(kāi)發(fā)，由筆耕文化傳播整理發(fā)布。