HTML5游戏《Cut the Rope》割绳子 幕后开发揭秘

灵感 “割绳子”是大家都爱玩的手机热门游戏，它有趣又可爱，因此我们想利用HTML5 的力量把这款伟大的游戏搬到网上来，让更多人可以一起玩。 为此，微软Internet Explorer 团队携手ZeptoLab（游戏原作者）和Pixel Lab 专家，在浏览器中为“割绳子”游戏注入活力。我们最终成功地将这款游戏移植到Web 平台，并展示了 HTML5 具备的一些最佳特色：Canvas 渲染图形、基于浏览器的音视频、CSS3 样式和 WOFF 字体。 您可在 www.cuttherope.ie 体验HTML5 版“割绳子”游戏。 我们认为，HTML5 版让Web 更有趣，并且体现了Internet Explorer 最新版本在标准支持方面所取得的进步。基于这样的考虑，我们希望分享本项目中所用的一些出色的“幕后”技术细节，帮助您构建自己的HTML5 网站并最终为 Windows 8 应用商店做好准备！ 从iOS 原始源代码移植而来，以HTML5 应用程序形式在IE9 中运行的“割绳子”游戏。

从Objective-C 到JavaScript

在将“割绳子”游戏引入新平台时，我们希望保留自己独特的物理、动作和个性化体验。因此在早期，我们决定从原生iOS 版“移植”本游戏（而非重写）。我们从全面研究Objective-C版本的源代码入手启动项目，结果发现这是一款庞大而复杂的游戏。iOS 原生版大约包括15,000 行代码（不包括库）！代码中最复杂的部分是物理、动画和绘图引擎。它们本身很复杂，全部三项紧密相连并且高度优化，这样更加复杂。 艰巨任务：把代码弄进浏览器，同时保持玩家熟悉的独特个性和优秀品质。为此，我们将赌注压在了JavaScript 上。 过去，人们都认为JavaScript 语言速度慢。坦白地说，最初确实存在这一问题。旧的JavaScript引擎是为了完成一些简单的浏览器脚本任务设计的（因此得名）。但现在，JavaScript 引擎已经过高度优化。借助即时编译等特色，现在JavaScript 几乎能以本地速度执行。 除此之外，我们知道，JavaScript 编码不同于编译语言编码 – 并且需要不同思维方式。当我们从Objective-C 移植游戏时，我们需要进行变更和优化。 一个明显例子是，JavaScript 缺少struct。struct 是一些相关的属性的轻量级聚合。用JavaScript 对象保存一组属性很容易，但该方法和正宗struct 之间存在重大区别。第一个区别在于，正宗struct 使用结构体变量的副本进行变量赋值和函数参数传递。因此，在编译语言（例如Objective-C）的函数中修改作为参数传递进来的结构体变量，不会影响函数外该变量的值。甚至在函数内都是以值传递的方式将结构体变量赋值给其他变量。与此不同的是，JavaScript 对象则是以引用方式传递。因此，当函数修改对象参数时，该变化对函数调用者是可见的。 在Javascript 中模拟struct 的一个简单的方法是为那些进行变量赋值和函数参数传递的 Javascript 对象制作副本。在本地语言中，使用struct 的开销通常小。在JavaScript 中创建对象的代价却很高，因此我们必须非常谨慎地将空间分配的次数降到最低。尤其在赋值时，无论什么时候我们都尽可能地尝试复制单个属性而非创建全新对象实例。 另一个例子是Objective-C 代码的面向对象本质。JavaScript 没有使用传统的基于对象的继承，而是提供原型继承，即基于Prototype（原型）对象的继承。这一高度简化的对象继承形式完全不兼容传统面向对象语言，例如Objective-C。幸运的是，各种各样的类库可以帮你写面向对象程序设计(OOP)风格的JavaScript 代码；我们使用约翰•瑞瑟（以jQuery 闻名）写的一个非常简单的库。（注，JavaScript 最新版规范ECMAScript5 也包含一些类支持，但我们选择不在本移植中使用，因为我们不熟悉该版语言，加之我们雄心勃勃的开发日程）。 除了从Objective-C 移植到JavaScript 之外，我们还需要从OpenGL 向HTML5 Canvas（画布）API 移植图形代码，总体上非常顺利。Canvas 是超快的渲染接口，尤其在那些使用硬件加速功能优化该接口的浏览器（例如 Internet Explorer 9）中。 出乎意料的是，在某些方面，Canvas 甚至提供了比移动版“割绳子”使用的OpenGL ES 更多的功能。一个例子是，画无锯齿直线。在OpenGL 中画无锯齿直线，需要将直线嵌入三角带并将直线末端的透明度设置为0。HTML5 画布自动处理用直线API 所画直线的无锯齿工作。就是说我们实际上需要从OpenGL 版本的代码中删去一些代码。去掉OpenGL 版本中的三角形顶点数组，比我们试图使用的本地复制三角带画线的方法所获得的程序性能的提升要好的多。 最后，我们在浏览器中执行近15,000 行代码（如果您在浏览器中查看源代码，它已变小，比原版本少很多行）。预计到那些代码的复杂度，丹尼斯•莫洛佐夫 (Denis Morozov)（ZeptoLab 开发总监）很早就提出一个合理问题：HTML5 是否会提供我们开发本游戏所需的速度和性能？ 为了回答这个问题，我们创建了一个早期“专注性能”的项目节点，在这段时间里我们专注于把游戏运行时性能要求最高的部分的小型版本做出来。具体来说，主要是绳子外观看起来是怎样的和我们是否能够在浏览器中处理复杂的物理引擎。 用画布API 画带锯齿直线绳子的范例。

性能

项目第三周，我们最终将基本的物理和绘图引擎落实到位，利用简单计时器引导动画。我们现在能够在游戏场景中渲染一对绳子、星星和Om Nom 小怪物。第四周，我们加入了一些基本鼠标互动并且实际上我们能够玩游戏了！我们一直在测试性能，但我们希望ZeptoLab 团队给予反馈。 当我们与ZeptoLab 共享代码时，他们对我们在现代浏览器中所看到的性能（尤其是游戏速度和流畅度）惊喜不已。说实话，我们都有些难以置信。我们期望JavaScript 速度会很快，尽管物理计算是密集的并且必须是实时发生的。这个例子恰恰证明了JavaScript“速度慢”的普通偏见是错误的。最新一代 JavaScript 引擎非常快。 在这种情况下，我们在Internet Explorer 9 中预览游戏。当加载游戏时，Internet Explorer 9的Chakra JavaScript 引擎在后台线程中预编译代码 — 正如编译器编译Objective-C 或C++那样。然后，向游戏线程实时发送编译后的代码（字节码）加以执行。结果是，接近本地执行速度。令人惊讶的是，JavaScript 引擎无偿地提供了这些支持 — 我们不必在代码中做特殊处理。 我们押注JavaScript 颇有成效，因此我们将注意力转到硬件和浏览器。有了Internet Explorer硬件加速渲染以及我们的迪斯尼《创战机（Tron）》游戏和其他HTML5 网站经验，我们不担心游戏是否能在测试机上完美运行。我们轻松实现最高目标60 FPS（帧／秒）。但是，我们要确保，游戏在其他硬件和其他浏览器中顺畅运行。在初步测试之后，我们发现了一些问题。 基于那些数字，我们将最小限度设定为30 FPS。我们决定，当浏览器低于限值时，我们将通知用户。他们仍可玩游戏，但要告诉他们，体验可能会差一些。这确保我们支持现有各种硬件和软件并且能够向全部游戏访客提供最佳体验。 我们要指出两点。第一，目前游戏版本在使用鼠标的PC 和Mac 上表现最佳。我们尚未加入触控输入支持，但正考虑在未来版本中加入。 第二，目前Chrome 版本（文章撰写时为第16 版）存在媒体回放问题，“割绳子”游戏音效不可预知。我们研究解决方法并尝试以多种格式（包括WebM）重编码媒体，但未发现能可靠地解决问题的格式或MIME 配置或其他信息。这些似乎是浏览器故障和已知问题。更重要的是，尽管音频时断时续，但游戏仍很好玩儿并且有趣。考虑到这一点，我们可以说，Internet Explorer 9 用户获得良好免插件体验，Chrome 和一些Firefox 用户可能遇到音频问题，但要注意，我们退而借助Flash 插件确保音效和音乐。 项目早期帧速率测试结果（注，帧速率最高60FPS）。

工具

HTML5 的伟大之处在于，您不必学习新语言、便可发挥这一新技术的威力。如果您知道并了解JavaScript，您已能够利用现代浏览器的全部功能。您甚至能自己创建类似游戏！

代码编辑器和开发环境

一些很好用的免费工具都可以让你轻松地使用JavaScript 和HTML5 进行开发。而我们大部分开发都是在Visual Web Developer 2010 中完成的。这是一个拥有JavaScript 和CSS 自动补全功能的真正稳健的Web 编辑器。更棒的是，精简版完全免费！我们在Windows 7 上Internet Explorer 9 中做大部分测试工作，有时也在Firefox、Chrome、Safari 和Internet Explorer 10 开发者预览版中做测试。总之，全部主流浏览器都非常一致地呈现我们所用的 HTML5 特色，在绝大多数情况下，我们在Internet Explorer 9 中测试的任何功能在任何其他地方“都能工作”。 Visual Web Developer 2010 精简版免费下载，是面向资深 web 开发者的伟大编辑器。

检查我们的资源加载器！

“割绳子”游戏有极其独特的复杂视觉风格 – 大量媒体都是图形、音频和视频格式 – 保证了较低成本。最终的结果是整个游戏比普通网站都大。加在一起，大约6 MB（较之典型网站200-300K）。下载如此多的媒体可能要花一段时间，我们知道，只有一切完备时才能启动游戏。如果漏掉一两个图片，传统网页会相当宽容，不会出什么大问题；但如果图形不可用，HTML5 Canvas API (drawImage) 就会出问题。 为了应付这一挑战，我们希望创建资源加载器下载网页所需的全部内容并在下载时给予积极反馈。这点代码有许多“聪明”的地方： 1. 如何针对不同浏览器处理下载以及如何通知你当前的进度。 2. 可以让你对内容下载顺序做明智决定（例如，你可能希望首先下载大文件，或者在获得游戏图形之前下载全部菜单图形）。 3. 最后，当你要的内容加载好时就触发一个事件，这样您能向用户显示进度或者甚至在第一组资源完成加载时启动部分游戏功能。 构建这些类型的库是很难的。在此我们希望与你共享资源加载器代码，因为我们对我们所做的 确实很满意。我们的产物是PxLoader，它是一个JavaScript 资源加载器库，方便你创建HTML5应用、游戏和网站的预加载器。它是开源并且免费的，您可在这里获取： thinkpixellab.com/pxloader 。

Internet Explorer 性能工具

开发过程中另一不可或缺的工具是Internet Explorer 9 中的JavaScript Profiler（分析器）。分析器可以让您发现代码中CPU 负载较高的部分和产生瓶颈的部分。在我们首个测试性能的 项目节点中，我们发现自己在一些机器上被困在20 或30 FPS 时，几乎停止工作。 我们做了一些初始代码复查，但一无所获。我们利用分析器加载游戏，立即发现我们在satisfyConstraints()函数内花了大量时间。该函数计算一些与绳子物理特性相关的数学公式。Objective-C 版本的实现中我们使用的是递归的方法，每次将一个新对象传递到更深的调用中。 在微软指导下，我们决定用相同代码的“拆解”迭代版替代递归函数，结果是惊人的。我们看到，代码在每个浏览器上的性能都提升了10 倍！坦白地说，如果没有Internet Explorer 9分析工具，我们无法发现这类问题。 分析器屏幕截图显示Calc2PointBezier 函数中所花的不相称时间，该函数用于计算绳段位置。

未来会怎样？

在2011 年九月的BUILD 大会上，微软展示了Windows 8 开发者预览版。伴随它的发布，HTML5 的故事将更有趣，因为我们将可以利用各种开发者工具集（包括HTML5）开发Windows 8 应用。这意味着，Web 开发者可以将面向Web 编写的代码轻松、无缝地移植至Windows 8 上。现在致力于投资沉浸式在线体验，以后就可在Windows 应用商店中真正实现利润。 实际上，我们仅需要少量额外工作，即可将HTML5 体验移植到Windows 8 上来。 我们兴奋地看到，开发者可利用HTML5 构建应用。您可以下载Internet Explorer 9 并在 www.beautyoftheweb.com 网站发现其他漂亮网站，或在dev.windows.com 网站下载Windows 8 RP 版本。 继续关注，这只是开始…… 惊喜连连！ 原文地址：www.cuttherope.ie/dev/ 全文PDF文档下载：Cut the Rope开发技术大揭秘.pdf

标签:HTML5游戏IE Web网页版