Joel Webber 谈向 HTML5 移植“愤怒的小鸟”

  • Abel Avram
  • 郑柯

2012 年 1 月 15 日

话题:JavaChromeHTML5语言 & 开发

Joel Webber 是 Google Web Toolkit 的创建者之一,他在 GOTO Aarhus 2011 大会上做了名为”HTML 5 中愤怒的小鸟”的演讲,该演讲由 InfoQ 录制并发布。我们采访了 Webber,想知道将“愤怒的小鸟”这款热门游戏移植到 Google Chrome 和 HTML5 上的更多细节。

InfoQ:关于将“愤怒的小鸟”移植到 HTML5 上,请您提供一些技术细节吧。

JW:在 GOTO 的演讲里面,涵盖了大多数广泛技术层面。简单说来,游戏是用 Java 写的,使用 Google Web Toolkit 转编译成了 JavaScript。在移植过程中,我们开发了一个小程序库,叫 PlayN,游戏开发者可以用其完全在 Java 环境中工作(相比在浏览器中调试,直接在 JVM 上调试要方便、强大得多)。经过转编译,PlayN 程序库让同样的代码可以运行在 Flash 和 Android 上,尽管 Rovio 目前还没有使用这个功能。

InfoQ:您使用了哪些 HTML5 特性?

JW:要是说得迂腐一点,我用到了一些目前还不属于“HTML5”的规范,但常常被人们认为是其一部分。其中包括:WebGL、Canvas、CSS3(特别是仿射 [affine] 变换),LocalStorage、<audio>/WebAudio。在渲染上,有两种模式:WebGL 和 DOM。WebGL 模式中,页面上只有一个大的 <canvas> 元素。在 DOM 模式中,我们对每个对象使用单独的 DOM 元素,这些对象包括鸟、猪、石块、背景元素等等。然后,我们使用 CSS3 变换来高效地给这些元素布局。之所以用这两种模式,是因为还有很多浏览器不支持 WebGL,而且我们想保证所有可能的浏览器都能运行这个游戏,不仅仅是 Chrome。

在音效方面,刚开始的时候,我们必须退而使用基于 Flash 的方法,因为一些浏览器对于 <audio> 标签的支持很差(包括 Chrome)。后来这里修复了一下,Flash 也就成为我们很少使用的倒退式方法。最终,我们相信 WebAudio(https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html)才是游戏中应该使用的 API。

InfoQ:移植这个游戏花了多少时间?

JM:很难给出精确答案。在 Google,我们有三个人支持 Rovio,但主要是用那 20% 的时间(有时还包括晚上和周末)。一个 Rovio 的工程师完成了移植的大部分主要工作。其他人后来辅助一些应用内支付工作,以及一些上线后的问题。

InfoQ:最困难的工作是哪些?

JW:游戏的逻辑很直接。我们已经有 Box2D(Angry Birds 和其他很多 2D 物理游戏使用的引擎)可以使用,用 Java 开发游戏让其更易于管理(某种程度上比较大的)代码库。不过还是有一些东西需要额外的工作:

  • 资源加载:不同于大多数本地应用,Web 应用通常会按需加载资源,这样才能快速启动。一般来说这是好事,但是会让应用逻辑更复杂,因为我们希望需要的资源下载完成后,每个游戏场景马上就能显示出来。这还意味着你需要对资源的请求小心排序,这样就不会在还不需要的资源上耗费带宽。
  • 跨浏览器渲染:如前所述,没有什么“最好的”方式,能够在所有的浏览器中渲染游戏画面。抽象渲染逻辑,并实施两种完全不同的方法,需要大量精力和工作量。
  • 让游戏能够做到每秒 60 帧运行,这是一个很重要的目标。垃圾回收暂停让其变得很困难,尽管我们最后还是解决了这方面的问题。

在 InfoQ 提供的“HTML5 中愤怒的小鸟”演示中,Web 提到更多遇到的关于垃圾回收方面的难题,以及PlayN 程序库,还有该程序库在 JVM 上调试时起到的作用。

查看英文原文:Joel Webber on Porting Angry Birds to HTML5

JavaChromeHTML5语言 & 开发