来自 Mozilla 的 HTML5 游戏开发资源【mgm娱乐场】

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

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

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

关于作者:betty135

mgm娱乐场 1

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

mgm娱乐场 2

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

网络监测器

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

mgm娱乐场 3

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

mgm娱乐场 4

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

本地化

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

调试器

在最新推出的Firefox中,我们为浏览器增加了一个Canvas调试器。mgm娱乐场 5

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

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

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

网络监测器

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

mgm娱乐场 7

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

mgm娱乐场 8

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

从何处开始

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

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

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

API

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

mgm娱乐场 9

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

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

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

API

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

mgm娱乐场 10

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

如果你的游戏支持使用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已经是一个游戏平台了。

你的声音

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

赞 收藏
评论

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

Web IDE

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

mgm娱乐场 11

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

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

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

相关文章