cut the rope HTML 五版本背后的开发故事

有一些很好的免费工具，可以让我们更容易地使用Javascript和HTML5。我们的大多数开发工作都是在Visual Web Developer 2010（“快捷”版本可以在这里免费获得）中完成的。这是一个非常健壮的Web编辑器，带有Javascript以及CSS自动完成功能。更好的一点是：它是免费的！我们在Windows7的IE9上完成了我们的大多数测试，并且我们也时不时在Firefox、Chrome、Safari以及IE10的开发者尝鲜版。总体上说，主流浏览器对于我们所使用的HTML5的特性都有比较一致的实现。在大多数情况下，我们在IE9上测试通过的特性在其他地方也运行得一样好。

清查我们的资源加载器（Resource Loader）！

Cut the Rope有一个非常独特的细节化的视觉风格——有很多图片、音频和视频，并且花费也很小。最终达到的效果就是这个游戏比一般的网站要大很多。综合起来说，它大概有6MB（而一般的网站是200-300K）。这些多媒体资源要花费一段时间才能下载，而如果资源没有下载到位，我们看不到网页上的内容，我们是无法开始游戏的。在一个典型的网页中，如果你缺掉了一两幅图，它仍然是可以运行的，但在HTML5的帆布API（drawImage）中，如果图像无法获取的话，这一API就会崩溃。

为了解决这个问题，我们想要创建一个资源加载器，用来下载页面所需要的所有内容，并且当下载完成后，给我们一个好的反馈。这一点小代码能做很多很棒的事情：

1.它屏蔽了不同浏览器之间对下载处理的不同以及它们告知你进度的方式的不同。

2. 它能让你决定事物下载的顺序（你可能会想要先下载大文件，或者你想要在下载游戏图形之前先下载所有菜单图像）。

3.最终，它可以智能提醒你事物的到达，这样就可以通知用户进度情况，甚至可以开始部分游戏。

创建这些类型的库是很难做好的。由于我们对于这些库的效果感到十分满意，因此我们想要分享我们的资源加载器的代码给你。最终的成果形式是PxLoader，一个Javascript的资源加载器库，你可以使用它为HTML5应用、游戏、站点制作预加载器。它是开源免费的。你可以从页面顶端抓取它，或者点击这里。

IE中的性能工具

另外一个在开发过程中不可或缺的工具是IE9中的Javascript分析器（JavaScript Profiler）。分析器能让你发现你的代码中的热点以及瓶颈。在我们第一次做性能评估的时候，我们发现在一些机器上我们一直困在了20或者30帧/每秒，这使得我们几乎要放弃了。

我们做了一些最初的代码检查，但是什么都没有检查出来。我们使用分析器加载了游戏，发现我们在satisfyConstraints()函数上花了太多时间。这个函数是用来计算有关绳子的一些物理性质的数字。我们用来改写的Objective-C版的实现是用递归实现的，递归每加深一层，就会传递一个新的对象。

通过Microsoft的一些指导，我们决定将递归函数替换成一个“解开”的循环版本。结果是惊人的。我们在每一个浏览器中都看到了10倍以上的性能提升。坦白说，如果没有IE9的分析器工具，我们永远都不可能发现这一点。

下一步是什么？

九月，Microsoft展示了一个Windows8的开发者尝鲜版。在这一声明以后，HTML5将会更有趣，因为Metro风格的应用可以用好几种开发工具集开发，包括HTML5。这意味着Web开发者可以将为Web所写的代码拿来很容易地无缝移植到Windows8中。为在线应用的投资将来可以在Windows Store中得到实实在在的回报。

事实上，只要再做一点点工作，我们就能将HTML5应用移植到Windows8的Metro风格应用中。可以在这篇博文中读到关于?Cut the Rope以及它整合到Windows Store中的内容。

我们非常开心看到开发者使用HTML5构建的应用。你可以下载IE9并且可以在www.beautyoftheweb.com找到一些其他的很漂亮的站点，或者在dev.windows.com下载开发者尝鲜版的Windows 8。

要保持关注，因为这只是一个开始……还会有更多惊喜的！

原文链接：cut the rope HTML 5版本背后的开发故事

?

?