今天我们发布了Firefox
31,它具有一些可以帮助HTML5游戏开发者编写并调试复杂游戏的新特性。并且Mozilla用博客记录了用asm.js做的首款商业游戏,像
Dungeon Defenders Eternity 和Cloud
Raiders这两款游戏都是用Emscripten编译器交叉编译到JavaScript中的。像这样的游戏意味着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 文章,它包含了一些展示实时编辑的视频。 |