在HTML5浏览器中,把绳子带到生活中

分享于 

15分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

immediate immediate。 这是很乐趣的,因为它是可以爱的。 所以我们有一个想法: 让我们通过使用HTML5的功能在web上提供它,让这个大游戏对于更大的观众来说。

To IE 团队的与 ZeptoLab ( 游戏的创造者) 和像素实验室的专家合作,在浏览器中将 Rope 削减为 life life To。 最终的结果是对web的游戏进行了真正的翻译,展示了HTML5必须提供的一些最佳内容: 画布渲染图形,基于浏览器的音频和视频,CSS3样式和WOFF字体的个性。

你可以玩HTML5版的 Cut,在以下位置:www.cuttherope.ie

我们认为HTML5版本使web更加有趣,它演示了在最新版本的IE 中进行标准支持的进展。 记住这个,我们想分享这个项目中使用的一些很酷的"behind 场景"技术细节来帮助你构建自己的HTML5站点,并最终为 Windows 8存储

从原来的iOS源代码中移植在IE9中运行的Rope作为一个HTML5应用程序。

一个特别设计的级别的屏幕截图,在这个版本中是独一无二的。

objective-c 到 JavaScript

我们希望能让我们保持独特的物理。运动和个性体验,从而使的绳索到一个新平台。 所以早期我们决定把这个游戏作为一个"端口"从本地iOS版本( 而不是重写)。 我们对原始 objective-c 代码库进行了大量的研究,从而引发了这个项目。 这是个大而复杂的游戏。 本机iOS版本包含大约 15,000行代码( 排除库)。 代码库中最复杂的部分是物理。动画和绘图引擎。 他们自己是复杂的,但更多的是由于所有三个都紧密连接和高度优化。

这是个艰巨的任务: 将这个代码变成浏览器,同时维持玩家熟悉的独特性质和令人难以置信的质量。 为了完成这一任务,我们将。

过去,JavaScript一直都是一种缓慢的语言。 坦白地说,这个声誉最初是有效的。 为简单的"脚本"类型的任务( 所以这个名字) 设计了旧的JavaScript引擎。 然而,在今天,JavaScript引擎得到了高度。 使用just-in-time编译功能,JavaScript现在可以在本地速度下执行。

除这里之外,我们知道JavaScript的编码与- 并且需要一种编译语言的编码不同。 当我们从 objective-c 移植游戏时,我们知道我们需要接受制作这类变化和优化的任务。

一个明显的例子是在JavaScript中缺少结构。 结构是相关属性的轻量聚合。 使用JavaScript对象保存一组属性很容易,但是这种方法和适当的结构之间存在着重要的区别。 第一个区别是当结构被分配给变量或者传递给函数时就会被复制。 因此,用像 objective-c 这样编译语言编写的函数可以修改作为参数传递的结构,而不会影响调用方的值。 即使在函数中,将结构赋值给另一个变量也会复制值。 另一方面,JavaScript对象是通过引用传递的。 因此,当函数修改对象参数时,这些更改对调用方是可见的。

模仿结构特性的简单方法是创建用于赋值或者参数传递的JavaScript对象副本。 在本机语言中,使用结构通常几乎没有开销。 在JavaScript中创建一个对象要贵得多,所以我们必须小心最小化分配的数量。 特别是在赋值方面,我们尽量复制单个属性,而不是创建全新的对象实例。

另一个例子是 objective-c 代码库的面向对象。 JavaScript提供Prototype继承,而不是传统的基于对象的继承,它基于Prototype属性。 这是高度简化的对象继承形式,实际上与传统的面向对象语言( 如 objective-c ) 不兼容。 幸好,有很多类库可以帮助你编写面向对象编程( OOP ) 样式代码;我们使用编写的非常简单的一个插件,即由 John ( jQuery声名) 编写的。 ( 注意,ECMAScript5最新版本的规范也包括对类的支持,但是我们不能在这个端口中使用我们的。

除了从 objective-c 移植到JavaScript之外,还需要将图形代码从OpenGL传输到 HTML5 Canvas API。 总的来说,这一切都很顺利。 Canvas是一个惊人的快速呈现 Surface,特别是在浏览器的硬件加速( 像 IE 9 )的浏览器中。

使用画布API绘制带别名线的rope的示例。

令人惊讶的是,我们遇到了一些领域,画布提供了比移动版本的OpenGL版本更多的功能。 一个例子是绘制反别名行。 在OpenGL中绘制反对称线要求tessellating一条线成三角形条,并将端盖的不透明度降低到。 HTML5 Canvas 自动处理用它的线API绘制的线条的反走样。 这意味着我们实际上需要从OpenGL版本中移除代码。 在OpenGL代码中展开三角形顶点的array 还给我们提供了更好的性能,以便本地复制画线的三角形。

最后,在浏览器( 如果你在浏览器中查看源代码,那么它将比你的浏览器中的源代码少很多。) 中执行了近 15,000行代码。 Denis Morozov预测与这么多代码相关的复杂性,早期提出了一个公平问题: HTML5会给我们这个游戏所需要的速度和性能?

为了回答这个问题,我们创建了一个早期的"性能"里程碑,我们重点研究了游戏运行的最小部分。 即我们想看看绳子是什么样的,以及我们是否能在浏览器中处理复杂的物理引擎。

效率

我们已经准备好了三个星期,我们已经有了物理和绘图引擎的基础,用一个简单的计时器来处理动画。 现在我们可以在游戏场景中将一些绳子。一个星星和一个,画面呈现出来。 进度第四周,我们包括了一些基本的鼠标交互,并且可以实际播放游戏。 我们测试性能,但是我们想让ZeptoLab的团队给我们他们的反馈。

当我们与ZeptoLab共享代码时,他们对我们在现代浏览器中看到的性能( 特别是游戏的速度和平滑度) 感到惊喜。 说实话,我们一直在保持呼吸。 我们期望JavaScript速度快,但是物理计算很强,而且必须实时进行。 这是一个很好的例子,说明关于JavaScript的"缓慢度"的常见偏见是错误的。 最新一代的JavaScript引擎非常快。

在本例中,我们在 IE 9中预览游戏。 当你加载游戏时,IE 9的轮在 background 线程上编译代码,就像编译器编译 objective-c 或者 C++ 一样。 然后,将编译后的代码( 字节码) 发送到游戏线程执行执行。 结果接近本机执行速度。 令人惊讶的是,这是你从JavaScript引擎中免费获得的,我们没有必要在代码中做任何特殊的。

项目在Framerate的测试结果( 注意framerates在 60秒内被上限化)

我们对JavaScript的赌注是paying的,所以我们把注意力转移到硬件和浏览器上。 我们的Tron和其他HTML5站点的硬件加速,我们在测试机器上运行游戏时没有任何担心。 我们很容易地打击了我们的最高目标 60 ( 每秒帧数)。 但是,我们想确保游戏在它的他浏览器上运行得很好。 这就是我们在初步测试后看到的。

根据这些数字,我们将 30个FPS设置为最小的。 我们决定当浏览器进入 below 阈值时,我们会通知用户。 他们仍然可以玩游戏,但我们会通知他们会有点慢。 这确保了我们支持大量的硬件和软件,并提供了最好的体验,我们可以对游戏的访问者。

我们要指出的两点。 一个,当前版本的游戏在桌面pc和mac上有一个鼠标最好。 我们还没有添加对基于触摸的输入的支持,但是这是我们在考虑未来版本的。

第二,Chrome ( 版本 16 )的当前版本有与媒体播放相关的问题,这使得声音在剪切时不可预知。 我们研究了解决方案,试图以多种格式对媒体进行编码,但没有找到格式或者MIME配置,也没有任何其他方法能够可靠地修复问题。 这些似乎是浏览器 Bug 和已知问题。 更重要的是,游戏仍然可以玩,尽管有间歇性的音频。 ,我们可以说 IE 用户获得了免费的体验,Chrome 和一些 Firefox 用户可能会遇到音频问题,但是他们会发现sound的声音和音乐会让人 work。

工具

关于HTML5的一个很好的问题是,你不需要学习一种新语言来解锁这种新技术。 如果你知道和理解 JavaScript,你已经可以访问现代浏览器能做的一切。 你甚至可以像这样创建自己的游戏 !

代码编辑器和开发环境

Visual是一个免费下载,对于有经验的网站开发者来说,它是一个优秀的编辑。

探查器的截图,显示在Calc2PointBezier中花费的时间不比例,用于计算绳段位置的函数。

有一些很好的免费工具可以让JavaScript和HTML5轻松工作。 我们的大部分开发都是在Visual中完成的express。 这是一个真正健壮的网页编辑器,带有自动补全和 CSS。 速成版是免费的是很好的 ! 在 Windows 7上,我们在和不时的测试中进行了测试,我们还在 Firefox。Chrome。Safari和 IE 10开发人员预览上进行测试。 通常,所有主要浏览器都具有我们使用的HTML5特性的一致实现,在大多数情况下我们测试的IE 9"刚工作"。

查看我们的资源加载程序 !

剪切绳子具有非常独特和详细的视觉风格- 很多媒体以图像。声音和视频为代价。 结果是整个游戏比一般的网站要大得多。 组合,大约 6 MB ( 与典型站点的200 -300 k 相比)。 这些媒体可以能需要点时间下载,我们不能开始游戏,直到我们知道所有的东西。 传统的网页是相当容易的,如果你缺少一个图像或者两个但 HTML5 Canvas API ( drawImage ) 将失败,如果图像不可以用。

为了解决这个问题,我们想创建一个下载页面所需的所有内容的资源加载器。 这段代码做了很多聪明的事情:

  • 它处理不同浏览器处理下载的特点以及它们如何向你通知自己的进展。
  • 它允许你对下载( 例如,你可以能首先要启动大文件,或者在获得游戏图像之前下载所有菜单图像。)的顺序进行智能决定。
  • 最后,它会为你提供智能事件,以便你可以在第一组完成时显示用户进度甚至开始部分。

构建这些类型的库是很棘手的。 由于我们真的很满意这一切,我们希望为我们的资源加载器共享代码。 结果是 PxLoader,一个javascript资源加载库,可以为HTML5应用程序。游戏和网站创建 preloaders。 它是开源和免费的。 你可以从页面顶部获取它,或者单击这里的

IE 中的性能工具

开发过程中另一个不可或缺的工具是 IE 9中的JavaScript。 剖析使你可以发现代码中的热点和瓶颈。 在我们第一个性能相关的里程碑中,我们发现当我们在一些机器上发现,我们在 20或者 30.

我们做了一些最初的代码检查,但是没有什么。 我们将游戏加载到事件探查器,并立即看到我们花费了大量时间在函数上。 这个函数计算了一些与绳子物理有关的数学。 我们移植的objective-c 实现被递归编写,将一个新对象传递到每个连续的调用中。

通过微软的一些指导,我们决定用相同代码的"解包"迭代版本来替换递归函数。 结果惊人。我们在每个浏览器中看到 10x 个改进 ! 坦白说,在 IE 9中没有分析工具时,我们就不会发现。

接下来

微软在9月构建了 Windows 8的开发者预览。 通过这个声明,HTML5的故事变得更加有趣,因为Metro样式应用程序可以使用各种开发工具( 包括 HTML5 ) 创建。 这意味着网络开发人员可以接受为web编写的代码,并轻松无缝地将它的移植到 Windows 8. 在网上投资的投资现在可以在以后的Windows 存储中获得实际利润。

实际上,有很少的额外工作,我们能够将这个HTML5体验传输到 Windows 8地铁样式应用程序。 阅读关于削减绳子和它与 Windows的商店的集成这篇文章文章。

我们很高兴看到开发者今天可以用HTML5构建什么。 在 www.beautyoftheweb.com 下载 IE 9并找到其他漂亮站点,或者下载 dev.windows.com的Windows 8的开发人员预览。


bro  浏览  Html5  bri  剪切  ROPE  
相关文章