网络监测器

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

图片 1

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

图片 2

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

网络监测器

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

图片 3

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

图片 4

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

API

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

图片 5

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

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

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

今天我们发布了Firefox
31,它具有一些可以帮助HTML5游戏开发者编写并调试复杂游戏的新特性。并且Mozilla用博客记录了用asm.js做的首款商业游戏,像Dungeon
Defenders Eternity 和Cloud
Raiders这两款游戏都是用Emscripten编译器交叉编译到JavaScript中的。像这样的游戏意味着HTML5已经是一个游戏平台了。

游戏优化

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

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

来自 Mozilla 的 HTML5 游戏开发资源

2014/09/19 · HTML5 ·
HTML5

本文由 伯乐在线
betty135
翻译。未经许可,禁止转载!
英文出处:mozilla。欢迎加入翻译组

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

Web IDE

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

图片 6

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

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

工具

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

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

关于作者:betty135

图片 7

(新浪微博:http://weibo.com/u/1752665517)
个人主页
·
我的文章

图片 8

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

调试器

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

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

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

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

Web IDE

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

图片 11

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

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

你的声音

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

赞 收藏
评论

调试器

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

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

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

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

网站地图xml地图