《Cut The Rope》 HTML 5版背后的开发故事
fmms 13年前
译者注： <strong>Cut the Rope</strong> 是一款人见人爱的小游戏。有一个开发团队将它改造成了 HTML5 版本。想看看他们在改造过程中的经验之谈吗？那就看下面由开发人员自己写的文章吧~ <p align="left"><strong> 启示</strong></p> <p align="left"><a><img style="display:block;margin-left:auto;margin-right:auto;" title="《Cut The Rope》 HTML 5 版背后的开发故事" alt="《Cut The Rope》 HTML 5版背后的开发故事" src="https://simg.open-open.com/show/df6747a357986020c7023b40a2c92285.jpg" width="220" height="220" /></a></p> <p> 在 IE9 中作为一个 HTML5 应用来运行，从原始的 iOS 源码改写而来。</p> <p align="left"> Cut the Rope 是一款人见人爱的小游戏。所以我们有了个点子，即通过使用 HTML5 将这款游戏放到网上以便让更多的人能接触到它。</p> <p align="left"> 为了做到这一点，微软的 IE 团队和 <a href="/misc/goto?guid=4958326072266317193" rel="nofollow" target="_blank">ZeptoLab</a> 团队（游戏的开发者）以及 <a href="/misc/goto?guid=4958326073067476818" rel="nofollow" target="_blank">Pixel Lab</a> 的专家们合作以便将 Cut the Rope 的网络版本实现。最终效果要能将游戏毫不失真地翻译成网络版本，并且能展示出 HTML5 的强大功能：画布提供的绘图、基于浏览器的音频和视频、CSS3风格以及 WOFF 字体的个性。</p> <p align="left"> 如果你想玩一下 Cut the Rope 的 HTML5 版本，就去下面这个网址吧：<a href="/misc/goto?guid=4958325065288099232" rel="nofollow" target="_blank">www.cuttherope.ie</a>.</p> <p align="left"> 我们觉得 HTML5 版本的游戏让网络更有趣了，同时，它也展示了 IE 的上一个版本因支持开放标准而显示出的长处。因此，我们想要分享一些开发 Cut the Rope 过程中的技术细节，以便帮助构建你自己的 HTML5 站点，并最终为 <a href="/misc/goto?guid=4958326074592483669" rel="nofollow" target="_blank">Windows 8 Store</a> 做准备！</p> <p> <strong>从</strong><strong>Objective-C</strong><strong>到</strong><strong> JavaScript</strong></p> <p align="left"> 在将 Cut the Rope 应用到一个新平台上的时候，我们希望我们保留了这个游戏的独特的物理特性、动作以及风格。所以，在开始的时候，我们想要改写 iOS 版本（而不是重写）。我们仔细分析了用 Objective-C写成的原始版本，发现工程量很大，并且很复杂。iOS 版本包含大约 15，000行代码（不包括库！）代码中最复杂的部分是动作、动画以及绘图引擎。它们本身就很复杂，使事情变得更为复杂的是这三块之间耦合度很高，并经过 了大量优化。</p> <p align="left"> 这是个令人生畏的工作：要将这些代码在浏览器上实现，而又不丧失原先的独特个性以及很高的质量。为了完成这个工作，我们赌上了 Javascript。</p> <p align="left"> 在过去，Javascript 一直被人看做是速度很慢的语言。坦白讲，这种说法在最初的确是对的。老的 Javascript 引擎是为处理简单的“脚本”（scripting）类型的工作设计的（如它的名字所示）。然而，在现在，Javascript 引擎已经经过大量优化了。整合进 just-in-time 等功能以后，Javascript 执行速度已经可以接近底层代码执行速度了。</p> <p align="left"> 除此以外，我们知道使用 Javascript 编程不同于——并且需要的思维方式也不同于——用编译型语言编程。当我们将这个游戏从 Objective-C改写过来的时候，我们知道应该充分利用 Javascript 编程的不同以及优点。</p> <p align="left"> 一个明显的例子是在 Javascript 中缺少 structs。Structs 是相关属性的轻量级的聚合。使用 Javascript 对象来聚合一系列属性是很容易的，但是这和使用一个合适的 struct 是很不同的。第一个不同是一旦 structs 被赋值给一个变量或则传递到一个函数的时候，它都会被复制。因此，一个使用如 Objective-C这样的编译型语言编写的函数可以修改以参数形式传过来的 struct 的值，而又不改变原来调用函数中的值。即使是在同一个函数中，将一个不同的值赋给 struct 也会将值复制一遍。而 Javascript 对象，是通过引用传递的。所以一个函数修改了一个对象参数的时候，原调用函数也能看到这个变化。</p> <p align="left"> 一个用来模仿 structs 的简单的方式是每当将 Javascript 对象作为赋值对象或者参数传递的对象时都创建一个副本对象。在底层语言（native languages）中，使用 structs 的开销是很小的。但在 Javascript 中创建一个对象则会有很大开销，因此我们要非常小心，减少创建对象的次数。特别是在赋值的时候，我们尽可能地复制单个属性，而不是创建一整个新的对象实 体。</p> <p align="left"> 另一个例子是 Objective – C 代码库面向对象的本质。与传统的基于对象的继承不同，JavaScript 提供了基于原型属性（Prototype property）的继承。这是对基于对象的继承的一个高度简化的形式，与传统的 Objective – C 这样面向对象的语言不兼容。幸运的是，有各种各样的类库，可以帮助你写的面向对象编程（OOP）风格的 JavaScript 代码，我们使用的类库是<a href="/misc/goto?guid=4958326075387943875" rel="nofollow" target="_blank">一个非常简单的</a>由 John Ressig 写的。 （需要注意的是，ECMAScript5，最新版本的 JavaScript 的规范，也提供了对一些类的支持，但我们选择不使用它，因为我们对该版本的语言不熟悉，而我们的开发进度非常紧张）。</p> <p align="left"> 除了将代码从 Objective-C改到 Javascript，我们还需要将图像代码从 OpenGL 改到 HTML5 的 Canvas API。总体上说，这一切都进行地很顺利。Canvas 是一个很快的渲染表面，特别是在一个 API 由硬件加速的浏览器中（比如 IE9）。</p> <p align="left"><a><img style="display:block;margin-left:auto;margin-right:auto;" title="《Cut The Rope》 HTML 5 版背后的开发故事" alt="《Cut The Rope》 HTML 5版背后的开发故事" src="https://simg.open-open.com/show/5203401804a87150447804cff10a7d4d.jpg" width="220" height="220" /></a></p> <p style="text-align:center;"> 一个使用帆布 API 完成的 aliased lines 来画绳子的例子。</p> <p align="left"> 令人惊讶地是，我们遇到了好几个地方，都是 Canvas 比在移动版本 Cut the Rope 中使用的 OpenGL ES 提供了更多功能的。一个例子是画 <a href="/misc/goto?guid=4958326076187521291" rel="nofollow" target="_blank">anti-alias lines</a>。 在使用 OpenGL 画 anti-aliased lines 的时候，需要将一条线镶嵌到一个三角形地带中，并且将末端的浑浊部分褪色以完成透明化。而在 HTML5 的 canvas 中，anti-aliasing lines 的绘制是由 line API 自动完成的。这意味着我们实际上需要从 OpenGL 版本中去掉一些代码。将 OpenGL 代码中的三角形顶点数组解约掉可以提供更好性能。</p> <p align="left"> 最终，我们有几乎 15，000行代码在浏览器中执行（它已经被最小化了，所以如果你在浏览器中查看源代码的时候，你会看到少得多的代码）。考虑到这么多代码带来的复杂 性，Denis Morozov（ZeptoLab 开发部门的总监，the Director of Development at ZeptoLab）在开始的时候问了一个问题：HTML5能给我们我们所需要的速度和性能吗？</p> <p align="left"> 为了回答这个问题，我们创建了一个早期的“性能”里程碑，在这里，我们集中精力去得到游戏运行时难度最高部分的最小版本。也就是说，我们想要看一下绳子看起来是什么样子的，以及我们是否能在浏览器中处理复杂的物理引擎。</p> <p align="left"><strong> Performance</strong><strong>性能</strong></p> <p align="left"> 项目开始以后三个星期，我们最终有了物理和绘图引擎的基本部分，以及一个简单的用于启动动画的计时器。现在，我们可 以在游戏场景中呈现出一些绳索，一颗星星，以及一个 Om Nom sprite。不错的进步！第四周的时候，我们加入了一些基本的和鼠标的互动，这样，我们就能真正开始玩游戏了。我们在开发的过程中一直都在测试性能，并 且希望 ZeptoLab 的团队能够给我们一些反馈。</p> <p align="left"> 当我们把这些代码和 ZeptoLab 分享的时候，他们对这些代码在浏览器中的性能表现感到惊喜（尤其是游戏的速度和平滑度）。说句实话，我们一直都提着一口气呢。我们希望 Javascript 能快点，因为物理计算非常复杂，并且有实时性要求。这是一个很好的例子，证明了人们过去认为 Javascript 很慢的观点实际上是错的。最新的 Javascript 引擎是非常快的。</p> <p align="left"> 在这个项目中，我们在 IE9 中预览了游戏。当你加载了游戏的时候，IE9的 Chakra JavaScript 引擎在一个后台线程中将代码进行了预编译——就像一个编译器编译 Objective-C 或者 C++ 一样。然后，它实时将编译过的代码（字节码）发送给游戏线程去执行。执行速度几乎和本地执行速度一样。令人惊讶的是，这样的性能是来自于 Javascript 引擎，我们不需要在代码中做任何特殊处理。</p> <p align="left"><a><img style="display:block;margin-left:auto;margin-right:auto;" title="《Cut The Rope》 HTML 5 版背后的开发故事" alt="《Cut The Rope》 HTML 5版背后的开发故事" src="https://simg.open-open.com/show/bb7e7875c59df85444a00cf8e7189d1f.jpg" width="220" height="220" /></a></p> <p style="text-align:center;">项目早期帧率检测结果（注意帧率上限是 60FPS）</p> <p align="left"> 我们在 Javascript 上打的赌成功了，因此，我们将注意力转向了硬件和浏览器。由于 IE 的硬件加速堆栈以及我们在 <a href="/misc/goto?guid=4958326076990350263" rel="nofollow" target="_blank">Disney Tron</a> 和其他一些 <a href="/misc/goto?guid=4958322406456687672" rel="nofollow" target="_blank">HTML5站点</a>上积累的经验，我们对于游戏在测试机器上的完美表现毫不担心。我们很轻易地达到了上限 60 FPS（帧/每秒）。但是，我们想要确认游戏在其他硬件和其他浏览器上也能表现得很好。下面是我们经过一些初步测试后<a href="/misc/goto?guid=4958326078521266773" rel="nofollow" target="_blank">所看到的结果</a>。</p> <p align="left"> 根据测试数据，我们将 30 FPS（帧/每秒）设置为最小阈值。当浏览器速度低于这个阈值的时候，我们将会通知用户。他们仍然可以玩这个游戏，但是我们会通知他们在游戏中他们可能会 感觉到一些迟缓现象。这确保了这个游戏能支持不同硬件和软件，并且提供给玩家我们所能提供的最好体验。</p> <p align="left"> 我们想要指出两件事情。第一件事，这个游戏的现有版本在桌面 PC 机和 Mac 机上使用鼠标玩时效果是最好的。我们还没有加入对触屏输入的只支持，但在未来的版本中，我们会考虑这一点。</p> <p align="left"> 第二件事，现有的 Chrome 版本（version 16）有一些<a href="/misc/goto?guid=4958326079325656566" rel="nofollow" target="_blank">已经为大家所知的和媒体播放相关的问题</a>， 使得 Cut the Rope 中的声音飘忽不定。我们进行了深入调研，试图用不同格式（包括 WebM）重新编码媒体文件，但是没有找到一个合适的格式或者 MIME 配置或者其他任何方案来有效解决这个问题。这个问题看起来是浏览器的 bugs 以及已经为大家所知的问题。更重要的是，尽管声音时断时续，游戏玩起来还是非常有意思的。考虑到这一点，我们一方面可以说 IE9 的用户能免费得到一个很棒的应用，另一方面，Chrome 以及一些 Firefox 用户可能会遇到一些声音上的问题，但他们会注意到我们退回使用了一个 flash 插件来确保声效和音乐都能正常工作。</p> <p align="left"><strong> 工具</strong></p> <p align="left"> 关于 HTML5 的一件很好的事情是你不需要学习一门新的语言来利用这项新技术的强大功能。如果你知道并且懂得 Javascript，那么你就能实现一个现代浏览器所能实现的所有功能。你甚至可以创建一个像这个游戏一样的你自己的游戏！</p> <p align="left"><strong> 代码编辑器以及开发环境</strong></p> <p><a><img style="display:block;margin-left:auto;margin-right:auto;" title="《Cut The Rope》 HTML 5 版背后的开发故事" alt="《Cut The Rope》 HTML 5版背后的开发故事" src="https://simg.open-open.com/show/4364f210c285d78c354ad2032b8d180c.jpg" width="220" height="161" /></a> Visual Web Developer 2010 Express 可以免费下载使用，是一款很棒的编辑器，即使是对有经验的 Web 开发者来说也是如此。</p> <p style="text-align:center;"><a><img title="《Cut The Rope》 HTML 5 版背后的开发故事" alt="《Cut The Rope》 HTML 5版背后的开发故事" src="https://simg.open-open.com/show/4de64e24fb4251f8d370ffa3d73c5375.jpg" width="220" height="260" /></a></p> <p> 分析器截图，图中内容是对 Calc2PointBezier 函数中花费的不合比例的时间（Calc2PointBezier 函数是用来计算绳子每节的位置）。</p> <p align="left"> 有一些很好的免费工具，可以让我们更容易地使用 Javascript 和 HTML5。我们的大多数开发工作都是在 Visual Web Developer 2010（“快捷”版本可以在<a href="/misc/goto?guid=4958326080114288065" rel="nofollow" target="_blank">这里</a>免 费获得）中完成的。这是一个非常健壮的 Web 编辑器，带有 Javascript 以及 CSS 自动完成功能。更好的一点是：它是免费的！我们在 Windows 7 的 IE9 上完成了我们的大多数测试，并且我们也时不时在 Firefox、Chrome、Safari 以及 IE10 的开发者尝鲜版。总体上说，主流浏览器对于我们所使用的 HTML5 的特性都有比较一致的实现。在大多数情况下，我们在 IE9 上测试通过的特性在其他地方也运行得一样好。</p> <p align="left"><strong> 清查我们的资源加载器（</strong><strong>Resource Loader</strong><strong>）！</strong></p> <p align="left"> Cut the Rope 有一个非常独特的细节化的视觉风格——有很多图片、音频和视频，并且花费也很小。最终达到的效果就是这个游戏比一般的网站要大很多。综合起来说，它大概有 6MB（而一般的网站是 200-300K）。这些多媒体资源要花费一段时间才能下载，而如果资源没有下载到位，我们看不到网页上的内容，我们是无法开始游戏的。在一个典型的网页 中，如果你缺掉了一两幅图，它仍然是可以运行的，但在 HTML5 的 API（drawImage）中，如果图像无法获取的话，这一 API 就会崩溃。</p> <p align="left"> 为了解决这个问题，我们想要创建一个资源加载器，用来下载页面所需要的所有内容，并且当下载完成后，给我们一个好的反馈。这一点小代码能做很多很棒的事情：</p> <p align="left"> 1. 它屏蔽了不同浏览器之间对下载处理的不同以及它们告知你进度的方式的不同。</p> <p align="left"> 2. 它能让你决定事物下载的顺序（你可能会想要先下载大文件，或者你想要在下载游戏图形之前先下载所有菜单图像）。</p> <p align="left"> 3. 最终，它可以智能提醒你事物的到达，这样就可以通知用户进度情况，甚至可以开始部分游戏。</p> <p align="left"> 创建这些类型的库是很难做好的。由于我们对于这些库的效果感到十分满意，因此我们想要分享我们的资源加载器的代码给 你。最终的成果形式是 PxLoader，一个 Javascript 的资源加载器库，你可以使用它为 HTML5 应用、游戏、站点制作预加载器。它是开源免费的。你可以从页面顶端抓取它，或者点击<a href="/misc/goto?guid=4958326080922934429" rel="nofollow" target="_blank">这里</a>。</p> <p align="left"><strong> IE</strong><strong>中的性能工具</strong></p> <p align="left"> 另外一个在开发过程中不可或缺的工具是 IE9 中的 Javascript 分析器（JavaScript Profiler）。分析器能让你发现你的代码中的热点以及瓶颈。在我们第一次做性能评估的时候，我们发现在一些机器上我们一直困在了 20 或者 30 帧/每秒，这使得我们几乎要放弃了。</p> <p align="left"> 我们做了一些最初的代码检查，但是什么都没有检查出来。我们使用分析器加载了游戏，发现我们在 satisfyConstraints ()函数上花了太多时间。这个函数是用来计算有关绳子的一些物理性质的数字。我们用来改写的 Objective-C版的实现是用递归实现的，递归每加深一层，就会传递一个新的对象。</p> <p align="left"> 通过 Microsoft 的一些指导，我们决定将递归函数替换成一个“解开”的循环版本。结果是惊人的。我们在每一个浏览器中都看到了 10 倍以上的性能提升。坦白说，如果没有 IE9 的分析器工具，我们永远都不可能发现这一点。</p> <p align="left"><strong> 下一步是什么？</strong></p> <p align="left"> 九月，Microsoft 展示了一个 Windows 8 的开发者尝鲜版。在这一声明以后，HTML5将会更有趣，因为 Metro 风格的应用可以用好几种开发工具集开发，包括 HTML5。这意味着 Web 开发者可以将为 Web 所写的代码拿来很容易地无缝移植到 Windows 8 中。为在线应用的投资将来可以在 Windows Store 中得到实实在在的回报。</p> <p align="left"> 事实上，只要再做一点点工作，我们就能将 HTML5 应用移植到 Windows 8 的 Metro 风格应用中。可以在<a href="/misc/goto?guid=4958317136164482612" rel="nofollow" target="_blank">这篇博文</a>中读到关于 Cut the Rope 以及它整合到 Windows Store 中的内容。</p> <p align="left"> 我们非常开心看到开发者使用 HTML5 构建的应用。你可以下载 IE9 并且可以在 <a href="/misc/goto?guid=4958322406456687672" rel="nofollow" target="_blank">www.beautyoftheweb.com</a> 找到一些其他的很漂亮的站点，或者在 <a href="/misc/goto?guid=4958326083186773324" rel="nofollow" target="_blank">dev.windows.com</a> 下载开发者尝鲜版的 Windows 8。</p> <p align="left"> 要保持关注，因为这只是一个开始……还会有更多惊喜的！<br /> <br /> 来自: <a id="link_source2" href="/misc/goto?guid=4958326083983973635" target="_blank">www.webapptrend.com</a></p>