HTML5游戏开发5条建议及开发工具分享

澳门新葡亰娱乐在线 13

幸运的是,有关HTML5游戏开发的指南现在已经有很多了。而这篇文章则是要告诉开发者在开发HTML5游戏以前应该具备的一些全局概念。你能从这篇
文章中学到什么?这里会介绍HTML5游戏开发的一些框架,你将知道如何使你设计的游戏能够在更多的平台上运行,了解如何管理在线游戏的状态,如何处理性
能问题。

关于作者:betty135

澳门新葡亰娱乐在线 1

(新浪微博:
个人主页 ·
我的文章

澳门新葡亰娱乐在线 2

建议1:使用框架

如果只是用HTML5编写一些小程序其实非常简单,但如果想往你的游戏中加入更丰富的功能,那么就有许多其他的事情需要处理了。

比如,如果你的游戏中有大量的图片、音效或是其他的资源,那么浏览器需要从你的游戏服务器上下载这些资源,这往往需要花费很多的时间。如果你在
编写程序的时候没有考虑这些问题,那么你也许会对最后的结果感到意外。由于图形和声音文件都是异步下载的,也许在你的资源下载好以前你的
JavaScript脚步已经开始运行了。这就是所谓的“爆音”现象(图像显示异常),而声音也可能在错误的时间播放。一个好的解决方法就是创建一个预先
下载机制,保证所有的资源下载完以后才允许脚本执行。

另一个你可能碰到的问题就是你的游戏在不同的机器甚至是浏览器中运行的速度有所不同。虽然这也许在你的控制范围以外,但你还是可以尽量使得你的动画或是动作的速度不依赖于游戏运行框架的速度。

其实,现在有许多的游戏模板代码,里面实现了大多数游戏需要的功能。这样,开发者不需要从头到尾编写一个完整的游戏程序。现在有许多框架可以帮助开发者设计游戏,开发者只用关注具体的游戏逻辑,而不用担心如何使游戏顺畅运行这些细节问题。

使用框架时唯一需要注意的一点就是如何从众多的框架中挑选一个合适的框架。像ImpactJS这样的框架功能非常强大,几乎可以在各个
方面为开发者提供帮助;而像EaselJS的框架则主要是处理图形方面的工作。最后,还是需要由开发者决定使用哪种框架更加合适。这看起来似乎很简单,但
在JavaScript的世界里面,选择一个框架时也意味着你选择了一种特定的编程风格。

functionsaveState(state) { 
    window.localStorage.setItem("gameState", JSON.stringify(state)); 
} 
functionrestoreState() { 
    varstate =window.localStorage.getItem("gameState"); 
    if(state) { 
        returnJSON.parse(state); 
    }else{ 
        retrun null; 
    } 
}

Monster=ig.Entity.extend({eyes :
42});});ImpactJS就是一个很好的例子,它不仅提供了图像显示和音效处理的方法,还在实现中插入了自己的对象和模型。

澳门新葡亰娱乐在线 3

Ascended Arcade三个月内发开了三款游戏,全部使用的是ImpactJS的框架

虽然现在已经有很多HTML5游戏使用了一些框架,但是还是有很多开发者不嫌麻烦地选择不依赖任何框架完全自己开发。如果你想在合理的时间内完
成任务,使用框架当然是最有效的方法。Ascended
Arcade就是一个很好的例子,在短短三个月的时间里,他们就开发出了三个游戏,全部使用了ImpactJS框架。

工具

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

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

建议4:使用profiler

游戏开发中最大的挑战是在加入许多功能以后,如何保证游戏仍然具有高的帧显示频率。

好的消息是近几年来,浏览器的速度越来越快了,基于HTML5的游戏已经可以达到每秒60帧了。

这是非常了不起的。对IE9来说,这意味着开发了一个全新的JavaScript引擎,能够利用多CPU内核以及基于Direct2D的硬件渲染管道。换言之,如果你配备了高配置的游戏平台,IE9就能充分地利用这些硬件平台。

澳门新葡亰娱乐在线 4

IE9整合了JavaScript分析器,能够发现性能瓶颈

对于简单的游戏,这意味着你不必担心它的性能问题。但由于HTML5可以运行在任何平台上,这意味着你发开的HTML5游戏应该能够运行在任何
一个设备或是浏览器上,其中有些设备或浏览器的处理能力可能并没有你希望的那么快。即使你的应用只针对高性能的PC,游戏的性能也是一个不得不考虑的问
题。

如果你要求你的游戏达到每秒60帧,这意味着每一帧的渲染时间不能超过16毫秒。也就是说,在你一眨眼的时间里面,你需要完成至少6帧的渲染工作。现在听起来可能有点难以想象…但是有些非凡的游戏确实能够做到。

澳门新葡亰娱乐在线,幸运的是,这里有些工具可能能够帮助你。在IE9(或是IE10)上,通过按下F12按键可以打开开发工具面板。选择“Profile”选项然后选中“Start
profiling”。

现在在你觉得性能需要提升的地方停留30秒,profiler将收集相关数据,然后选择“stop
profiling”。你将看到你的游戏中的每个功能的累积执行时间。通常,你会发现某些功能占用了大部分的时间。这样你就能有针对性地优化那些特别耗时的功能了。

不要过分相信自己的直觉——有些代码可能看起来效率很低,但在某些JavaScript引擎上执行起来速度却很快。最好的办法就是时常地反复分析程序,对于修改过的代码,需要反复进行测试确保你的修改确实能够提升程序的性能。

澳门新葡亰娱乐在线 5

游戏变得越来越社会化:Warimals是基于HTML5的游戏,用户可以与Facebook上的好友一起参与游戏

网络音频编辑器

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

澳门新葡亰娱乐在线 6

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

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

建议5:要有创造性!

能够开发出在浏览器中运行的游戏是一件很棒的事情,而更酷的是可以使用HTML5在浏览器上开发游戏应用!从技术的角度看,HTML5是非常棒的,而浏览器也是非常理想的游戏平台。

想想看…各种不同的设备上都有浏览器,它们通常是时时在线的,它是人们接收邮件、聊天和社交网络的工具。浏览器游戏的开发者,可以利用自己开发的游戏将来自世界各地的人们联系在一起。

作为一个HTML5游戏开发者,你必须了解很多很酷的开发工具,在Mozilla社区中我们已经介绍了很多为Firefox开发者提供的开发工具,包
括JavaScript Debugger, Style Editor, Page Inspector, Scratchpad,
Profiler, Network Monitorand Web Console.

下面继续介绍一些HTML游戏开发的工具。

Shader编辑器

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

澳门新葡亰娱乐在线 7

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

建议3:自动保存用户的记录

使用 site pinning,web浏览器试图让Web
Apps可以像桌面apps一样工作。但是,让网站像Apps一样运行的想法还比较新鲜,同样的,让Web页面保存客户端的状态也尚未成熟。用户在关闭
Microsoft
Word的文档时可能会思考一下内容是否已经保存,而在关闭Web页面时往往不会这么仔细了。通常这并不会带来什么问题——大多数的Web页面是没有状态
的,或者是将用户的记录保存在了服务器上。

但如果是处理浏览器游戏,情况就完全不同了。通常在客户端执行的是JavaScript代码,HTML5游戏通常将游戏的状态缓存在内存中(RAM)。一旦关闭浏览器窗口,用户辛辛苦苦赢得的高分就永远地丢失了。

你可以要求用户小心一点,不要将正在进行的游戏窗口关闭,但是意外总是会发生的,尤其是当用户开了多个窗口或是电池没电的时候。

长话短说:在编写HTML5游戏时,最好是经常将游戏玩家的进度状态保存一下,当用户重新打开关闭的web页面时,应该让用户可以继续之前没有结束的游戏而不是重头来过。

你应该将用户的记录保存在哪里呢?过去,答案往往是服务器端的数据库或是客户端的cookie。但是这两个都不是最佳的选择。如果是在服务器
端,则会产生额外的HTTP请求开销。如果是cookie的话,则可以保存记录的空间非常有限,并且cookie的寿命取决于浏览器的配置。

一个更有效的方法是使用HTML5 DOM storage。DOM
Storage提供了一个key-value存储(或是JavaScript定义的对象)的接口,可以为每个网站保存几兆的数据。使用起来非常方便,但是
在HTML5游戏中,你可能想要记录一些更加复杂的数据结构——这些DOM
storage本身可能并不支持。幸运的是,现在的JavaScript提供了一套机制帮助开发者将一组对象压缩成一些紧凑的符号,这就是JSON机制。
使用这套机制,DOM
storage可以保存任何格式的信息。下面的两个函数展示了如何使用HTML5 DOM
storage保存游戏状态以及ECMAScript5中的JSON功能:

functionsaveState(state) { 
    window.localStorage.setItem("gameState", JSON.stringify(state)); 
} 
functionrestoreState() { 
    varstate =window.localStorage.getItem("gameState"); 
    if(state) { 
        returnJSON.parse(state); 
    }else{ 
        retrun null; 
    } 
}

调试器

在最新推出的Firefox中,我们为浏览器增加了一个Canvas调试器。澳门新葡亰娱乐在线 8

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

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

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

Web Audio Editor

在Firefox Aurora(32)版本中有一个Web Audio
Editor,这个编辑器通过图表展示了所有的音频结点和当前AudioContext的连接。你可以通过它查看每个结点的特定属性。Web
Audio
API提供了更多混音的创建,对音频的操作和处理比HTML5的Audio标签强大很多。

网络监测器

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

澳门新葡亰娱乐在线 10

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

澳门新葡亰娱乐在线 11

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

Web IDE

开发游戏之前你必须先选择一个开发环境,同样,你有很多种选择(Sublime,Eclipse,Dreamweaver,vi等等),重要的是你肯
定已经有一款常用的开发环境了。如果你对浏览器端的开发环境感兴趣,你可以试一下Web
IDE,它已经在Firefox的最新版本中上线了。

澳门新葡亰娱乐在线 12

Web IDE不仅提供开发者进行正常的编码,还可以远程发布、调试、框架管理等。

Web IDE

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

澳门新葡亰娱乐在线 13

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图