来自Mozilla的HTML5游戏开发资源

　　如果你对Emscripten感兴趣你可以在Emscripten wiki了解更多详细信息，也可以在github page上面获得代码。另外一个很好的资源是MDN上的 Emscripten tutorial。如果你想知道的asm.js性能，可以从这篇文章中获得更多细节asm.js performance improvements in the latest version of Firefox make games fly! 。

　　在这篇文章中我们会介绍给你一些Mozilla开发者所创造的资源，利用这些资源你可以编写并调试基于HTML5的游戏。这不是一个非常详尽的列表，我们欢迎大家提供在这方面任何有价值的反馈，请在评论中告诉我们。

从何处开始

　　当开发一个基于HTML5的游戏时，你可以有很多种选择。从选择哪种编辑器，到游戏中根据使用的渲染框架和游戏引擎决定的是否会用到Canvas 2d、 WebGL、SVG 或者 CSS。大多数这种决定都会根据开发者的经验或者是游戏发布的平台来决定。没有任何一篇文章可以回答这些问题，不过我们想要把材料集合在一起，这样可以帮助你立刻起步。

　　对游戏开发者来说，MDN上最关键的资源之一就是 Games Zone.MDN 的这一部分包括游戏开发的文章，演示，外部资源以及实例。它也包括一些对于开发者完成HMTL5需要了解的API的详细描述，包括声音管理，网络，存储和 图形渲染。我们现在正在对这部分内容进行添加和补充。我们希望将来有大多数普通场景，框架和工具链的内容和实例。

　　同时这里也有一些帖子和MDN上面的文章可以帮助游戏开发者进行工作。

工具

　　作为一名HTML5开发者，你并不会缺少可随意使用的工具。在Mozilla社区中我们一直致力于扩展Firefox开发者工具。这些包括一个功能全面的JavaScrip调试器，样式编辑器，页面探测器，暂存器，分析器，网络监测和网页控制台。

　　除了这些，最近也引进和更新了一些著名的工具，它们可以为游戏开发者提供很好的功能。

调试器

　　在最新推出的Firefox中，我们为浏览器增加了一个Canvas调试器。

　　这个Canvas调试器可以追踪所有用来生成框架的canvas指令，有些特别的指令都会用颜色标注出来比如画一个部件或者使用特定的着色程序。这 个Canvas调试器不仅可以用来开发基于WebGL的游戏，同时也可以用来调试基于Canvas 2D的游戏。在下面的游戏用你可以在动画中看到每个图像都被画到画布上。你可以点击任意一行直接跳到控制这个动作的JavaScript部分。

　　Canvas调试器最常报的两个错误是 setInterval instead of requestAnimationFrame和inspecting canvas elements in an iFrame。

　　如果想要了解关于Canvas调试器的更多的详细信息，请阅读Introducing the Canvas Debugger in Firefox Developer Tools。

编辑器

　　当开发基于WebGL的游戏时，当应用运行时能够测试并且改变着色程序是非常有帮助的。使用开发者工具里面的Shader编辑器可以实现这一功能。顶点和分片着色程序都不用重新加载页面就可以修改，或者直接可以查看对输出有何影响。

　　如果你想要对Shader编辑器有更多了解，请看这个帖子 Live editing WebGL shaders with Firefox Developer Tools，也可以看看这篇 MDN 文章，它包含了一些展示实时编辑的视频。

网络音频编辑器

　　现在的版本Firefox Aurora (32)有一个网络音频编辑器。这个编辑器用图形展示了所有的音频节点以及它们在现有的AudioContext中的联系。你可以详细查询每个节点的属性并监测它们。

 　　Web Audio API提供了比HTML5的 Audio tag更加复杂和强健的声音创造，操控和处理的功能。当使用网络音频API时记得读一下 Writing Web Audio API code that works in every browser，它包含了支持多种音频节点的相关信息。

　　如果你想要对网络音频编辑器有更多了解，记得读这篇介绍网络编辑器的文章，以及MDN 上的这篇文章。

网络监测器

　　当开发一个基于HTML5游戏的网站时，这个网站对于手机用户来说是非常麻烦和非常耗费时间的。使用这个网络检测器你可以直观地监测所有请求地址的网络请求，操作所花费的时间，以及终端的大小和型号。

　　另外使用网络监测器你可以看到一个你的app在缓存和未缓存情况下的表现的分析。

　　如果你想要知道更多关于网络监测器的详细信息请看MDN 网页。

Web IDE

　　当开始开发游戏时你首先要选择使用哪个编辑器。这里有很多编辑器（Sublime, Eclipse, Dreamweaver, vi等）。在大多数情况下，你已经有一个最喜欢的编辑器了。如果你对在浏览器内进行开发感兴趣的话你应该会想要试一下Firefox Nightly最新推出的Web IDE。

　　Web IDE不仅提供了一个功能全面的编辑器，也可以作为很多本地和远程平台，调试器，模板框架和应用管理的发布代理。并且，支持Web IDE的框架提供了API，使得其它编辑器可以使用它提供的函数。想要了解这方面的更多细节，请看一下这个帖子。

　　想要同步看Firefox Developer Tools的更多新闻，请看他们在Hacks博客上的系列文章。想要最新的最稳定的开发者工具特性，可以看他们在MDN上的文档。

API

　　MDN Games Zone列出了很多可以帮助开展游戏开发的API和文章。

　　除了这些资源你可能对额外的对开发有帮助的文章也感兴趣。

　　如果你的游戏支持使用WebRTC或WebSockets的多媒体互动，你可能对Together.js也感兴趣，它提供了web app的协作特定。想要了解可以实现什么可以看一看Introducing TogetherJS。

　　很多游戏需要存储空间，IndexedDB可以满足这一需求。想要了解扩展IndexedDB的性能，可以读Breaking the Borders of IndexedDB。你可能也对 localForage感兴趣，它提供了和浏览器无关的简单存储支持。想要知道更多详细信息可以读这个 Hacks post。

游戏优化

　　现在的HTML5游戏给尤其开发者提供了很大的力量。很多游戏将会在移动设备上运行，这和在桌面运行相比效果会差很大。所以如果你想要你的游戏在多种平台上都取得成功，优化你的代码非常重要。 Optimizing your JavaScript Game for Firefox OS 这个帖子提供了很多可以帮助你开发出在低端移动设备上也能良好运行的游戏的技巧。

本地化

　　为了你的游戏有更多的用户，你可能想要你的游戏提供对多种语言的支持。由于部分开发者将本地化也考虑在游戏的制作中，我们做了很多的招募翻译的工作来帮助你翻译游戏。想要了解这方面的更多信息请看这里。

你的声音

　　Mozilla是一个关于开发者和用户的社区，我们需要你的帮助和反馈。如果你有一些想要在未来产品中看到的特性，请加入irc.mozilla.org的讨论，或者通过 mailing lists联系。你也可以记录bugzilla.mozilla.org的bug。另外，我们也在DevTools  和Open Web Apps上有额外的反馈渠道。