当你html可视化开发工具基于的時你有很多选择。使用什么样的编辑器?是否用到Canvas 2d、WebGL?采用什么样的呈现框架和游戏引擎?这些选择大部分由html可视化开发工具者的个人经验和遊戏将要发布的平台决定

　　幸运的是，有关HTML5游戏html可视化开发工具的指南现在已经有很多了而这篇文章则是要告诉html可视化开发工具者茬html可视化开发工具HTML5游戏以前应该具备的一些全局概念。你能 从这篇文章中学到什么?这里会介绍HTML5游戏html可视化开发工具的一些框架你将知道洳何使你设计的游戏能够在更多的平台上运行，了解如何管理在线游戏的状态如何处理性能问题。　　话不多说现在就开始介绍HTML5游戏html鈳视化开发工具的几条实用建议。　　建议1：使用框架　　如果只是用HTML5编写一些小程序其实非常简单但如果想往你的游戏中加入更丰富嘚功能，那么就有许多其他的事情需要处理了　　比如，如果你的游戏中有大量的图片、音效或是其他的资源那么浏览器需要从你的遊戏服务器上下载这些资源，这往往需要花费很多的时间如果你在 编写程序的时候没有考虑这些问题，那么你也许会对最后的结果感到意外由于图形和声音文件都是异步下载的，也许在你的资源下载好以前你的 Javanoxss脚步已经开始运行了这就是所谓的“爆音”现象(图像显示異常)，而声音也可能在错误的时间播放一个好的解决方法就是创建一个预先 下载机制，保证所有的资源下载完以后才允许脚本执行　　另一个你可能碰到的问题就是你的游戏在不同的机器甚至是浏览器中运行的速度有所不同。虽然这也许在你的控制范围以外但你还是鈳以尽量使得你的动画或是动作的速度不依赖于游戏运行框架的速度。　　其实现在有许多的游戏模板代码，里面实现了大多数游戏需偠的功能这样，html可视化开发工具者不需要从头到尾编写一个完整的游戏程序现在有许多框架可以帮助html可视化开发工具者设计游戏，html可視化开发工具者只用关注具体的游戏逻辑而不用担心如何使游戏顺畅运行这些细节问题。　　使用框架时唯一需要注意的一点就是如何從众多的框架中挑选一个合适的框架像ImpactJS这样的框架功能非常强大，几乎可以在各个 方面为html可视化开发工具者提供帮助;而像EaselJS的框架则主要昰处理图形方面的工作最后，还是需要由html可视化开发工具者决定使用哪种框架更加合适这看起来似乎很简单，但 在Javanoxss的世界里面选择┅个框架时也意味着你选择了一种特定的编程风格。

　　Ascended Arcade三个月内发开了三款游戏全部使用的是ImpactJS的框架　　虽然现在已经有很多HTML5游戏使鼡了一些框架，但是还是有很多html可视化开发工具者不嫌麻烦地选择不依赖任何框架完全自己html可视化开发工具如果你想在合理的时间内完 荿任务，使用框架当然是最有效的方法Ascended Arcade就是一个很好的例子，在短短三个月的时间里他们就html可视化开发工具出了三个游戏，全部使用叻ImpactJS框架　　建议2：将小屏幕和触屏设备考虑在内　　HTML5最大的卖点之一就是它既能在桌面PC上使用，也能在笔记本电脑、平板设备甚至是智能手机上运行(这里有IE9在Windows Phone 7 Mango上的运行效果)。　　HTML5与生俱来就具备了跨平台的特性通常为html可视化开发工具者节省了很多工作。然而有些事凊是需要html可视化开发工具者考虑的…　

　　SpyChase在Windows Phone 7 Mango上的运行效果　　首先也是最重要的一点，不同的设备屏幕的尺寸也有所不同屏幕的宽高仳以及分辨率可能有很大的差别。如果想让你的HTML5在移动设备上拥有良 好的效果确保它支持多种分辨率并且不超过WVGA的800×480框架大小。此外甴于大多数的移动设备无法在一个屏幕上显示所有的页面内容，他们常常 采用精确的缩放和平移技术而这些技术通常并不适用于游戏的編写。可以在编程的时候使用viewport meta标志禁用这些功能下面的代码片段可以用来使你的游戏视图根据屏幕的实际水平宽度自动调节。移动浏览器上的缩放功能常常与触控游戏控制功能产生冲 突可以将“user-scaleable”参数设置为“no”，从而禁用浏览器的缩放功能　　现在你已经能够将你嘚游戏视图很好地呈现在小屏幕设备上了，接下来就该考虑如何处理用户输入的问题了大多数触屏设备都有一个虚拟键盘，但是在 玩游戲的时候显示一个虚拟键盘实在太浪费空间了你应该html可视化开发工具一个有限的虚拟键盘，只提供游戏中使用到的按键(比如箭头)当然，最好是尽可能在游戏中不需 要使用额外的元素Spy Chase在这方面做得很好，用户只用一个手指就能控制游戏中的汽车了　　建议3：自动保存鼡户的记录　　使用 site pinning,web浏览器试图让Web Apps可以像桌面apps一样工作。但是让像Apps一样运行的想法还比较新鲜，同样的让Web页面保存客户端的状态也尚未成熟。用户在关闭 Microsoft Word的文档时可能会思考一下内容是否已经保存而在关闭Web页面时往往不会这么仔细了。通常这并不会带来什么问题——夶多数的Web页面是没有状态 的或者是将用户的记录保存在了服务器上。　　但如果是处理浏览器游戏情况就完全不同了。通常在客户端執行的是Javanoxss代码HTML5游戏通常将游戏的状态缓存在内存中(RAM)。一旦关闭浏览器窗口用户辛辛苦苦赢得的高分就永远地丢失了。　　你可以要求鼡户小心一点不要将正在进行的游戏窗口关闭，但是意外总是会发生的尤其是当用户开了多个窗口或是电池没电的时候。　　长话短說：在编写HTML5游戏时最好是经常将游戏玩家的进度状态保存一下，当用户重新打开关闭的web页面时应该让用户可以继续之前没有结束的游戲而不是重头来过。　　你应该将用户的记录保存在哪里呢?过去答案往往是服务器端的数据库或是客户端的cookie。但是这两个都不是最佳的選择如果是在服务器 端，则会产生额外的HTTP请求开销如果是cookie的话，则可以保存记录的空间非常有限并且cookie的寿命取决于浏览器的配置。　　一个更有效的方法是使用HTML5 DOM storageDOM Storage提供了一个key-value存储(或是Javanoxss定义的对象)的接口，可以为每个网站保存几兆的数据使用起来非常方便，但是 在HTML5游戲中你可能想要记录一些更加复杂的数据结构——这些DOM storage本身可能并不支持。幸运的是现在的Javanoxss提供了一套机制帮助html可视化开发工具者将┅组对象压缩成一些紧凑的符号，这就是JSON机制 使用这套机制，DOM storage可以保存任何格式的信息下面的两个函数展示了如何使用HTML5 DOM

　　对于简单的游戏这意味着你不必担心它的性能问题。但由于HTML5可以运行在任何平台上这意味着你发开的HTML5遊戏应该能够运行在任何 一个设备或是浏览器上，其中有些设备或浏览器的处理能力可能并没有你希望的那么快即使你的只针对高性能嘚PC，游戏的性能也是一个不得不考虑的问题　　如果你要求你的游戏达到每秒60帧，这意味着每一帧的渲染时间不能超过16毫秒也就是说，在你一眨眼的时间里面你需要完成至少6帧的渲染工作。现在听起来可能有点难以想象…但是有些非凡的游戏确实能够做到　　幸运嘚是，这里有些工具可能能够帮助你在IE9(或是IE10)上，通过按下F12按键可以打开html可视化开发工具工具面板选择“Profile”选项然后选中“Start profiling”。　　现茬在你觉得性能需要提升的地方停留30秒profiler将收集相关数据，然后选择“stop profiling”你将看到你的游戏中的每个功能的累积执行时间。通常你会發现某些功能占用了大部分的时间。这样你就能有针对性地优化那些特别耗时的功能了　　不要过分相信自己的直觉——有些代码可能看起来效率很低，但在某些Javanoxss引擎上执行起来速度却很快最好的办法就是时常地反复分析程序，对于修改过的代码需要反复进行测试确保你的修改确实能够提升程序的性能。　　

　　游戏变得越来越社会化：Warimals是基于HTML5的游戏用户可以与Facebook上的好友一起参与游戏　　建议5：要囿创造性!　　能够html可视化开发工具出在浏览器中运行的游戏是一件很棒的事情，而更酷的是可以使用HTML5在浏览器上html可视化开发工具游戏应用!從技术的角度看HTML5是非常棒的，而浏览器也是非常理想的游戏平台　　想想看…各种不同的设备上都有浏览器，它们通常是时时在线的它是人们接收邮件、聊天和社交网络的工具。浏览器游戏的html可视化开发工具者可以利用自己html可视化开发工具的游戏将来自世界各地的囚们联系在一起。　　作为一个HTML5游戏html可视化开发工具者你必须了解很多很酷的html可视化开发工具工具，在Mozilla社区中我们已经介绍了很多为Firefoxhtml可視化开发工具者提供的html可视化开发工具工具包括Javanoxss Debugger　　在最新版本的firefox中，我们在浏览器中添加了Canvas调试Canvas Debugger允许你跟踪所有的canvas上下文调用， 像繪制元素和使用特定的调色器一样它会根据具体的要求调用颜色编码。它不仅在html可视化开发工具基于WebGL的游戏时有用它同时也可以用来測试基于Canvas 2D的游戏。 在下面的游戏中你可以看到动画被分解成很多个静态图，你可以点击任意一行直接查看那一部分的响应