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

转载 2012年07月05日 11:43:06

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

  通过建立开发者社区全流程支持平台旨在解决开发者在使用天翼空间时包括客服,开发,测试,上架,开店等全流程中的使用问题,并通过论坛等交互式版块建立起用户的交互平台,最终达到提高用户满意度,提高开发者效率,为开发者服务的主旨。

  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、/WebAudio。在渲染上,有两种模式:WebGL和DOM。WebGL模式中,页面上只有一个大的元素。在DOM模式中,我们对每个对象使用单独的DOM元素,这些对象包括鸟、猪、石块、背景元素等等。然后,我们使用CSS3变换来高效地给这些元素布局。之所以用这两种模式,是因为还有很多浏览器不支持WebGL,而且我们想保证所有可能的浏览器都能运行这个游戏,不仅仅是Chrome。

  在音效方面,刚开始的时候,我们必须退而使用基于Flash的方法,因为一些浏览器对于标签的支持很差(包括Chrome)。后来这里修复了一下,Flash也就成为我们很少使用的倒退式方法。最终,我们相信WebAudio才是游戏中应该使用的API。

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

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

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

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

  ?资源加载:不同于大多数本地应用,Web应用通常会按需加载资源,这样才能快速启动。一般来说这是好事,但是会让应用逻辑更复杂,因为我们希望需要的资源下载完成后,每个游戏场景马上就能显示出来。这还意味着你需要对资源的请求小心排序,这样就不会在还不需要的资源上耗费带宽。

  ?跨浏览器渲染:如前所述,没有什么“最好的”方式,能够在所有的浏览器中渲染游戏画面。抽象渲染逻辑,并实施两种完全不同的方法,需要大量精力和工作量。

  ?让游戏能够做到每秒60帧运行,这是一个很重要的目标。垃圾回收暂停让其变得很困难,尽管我们最后还是解决了这方面的问题。

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

Html5愤怒的小鸟源码

  • 2014年03月31日 13:02
  • 4.08MB
  • 下载

html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟

愤怒的小鸟是一款人气火爆的益智游戏,现在我试着用lufylegend库件和Box2dWeb物理引擎来看看在html5中如何制作此类经典的物理游戏。准备工作一首先,你需要下载lufylegend库件1....
  • lufy_Legend
  • lufy_Legend
  • 2012-07-23 10:27:16
  • 31750

愤怒的小鸟项目源代码

  • 2015年06月03日 11:52
  • 5.45MB
  • 下载

html5游戏开发-愤怒的小鸟-开源讲座(二)-跟随小鸟的镜头

上一讲中介绍了如何让小鸟旋转跳上弹弓,以及利用外部力使小鸟弹飞出去,但是如果不做任何处理的话,小鸟就这么直冲冲的飞出屏幕了,本次我们就要让镜头时刻跟随小鸟来移动。下面是上一讲的连接,没有看过上一讲的朋...
  • lufy_Legend
  • lufy_Legend
  • 2012-07-25 08:27:41
  • 15424

html5 浅谈

  • 2012年10月21日 12:44
  • 1.12MB
  • 下载

html5仿愤怒的小鸟(简易版)

  • 2013年04月18日 10:25
  • 11KB
  • 下载

【NOIP2016提高组复赛】愤怒的小鸟

DescriptionSolution很明显是一个状态压缩DP的题目,不过也可以打成记忆化搜索。 设f[i]表示每个点选或不选的状态投射小鸟的最少方案。 首先预处理一个g[i][j]表示选i和选j...
  • doyouseeman
  • doyouseeman
  • 2016-11-30 17:14:39
  • 2618

html5愤怒的小鸟

  • 2012年05月30日 09:50
  • 1.91MB
  • 下载

愤怒的小鸟源码

  • 2015年07月02日 10:40
  • 12.87MB
  • 下载

愤怒的小鸟选关卡界面制作

先回观几张大家熟悉的效果图:   这个界面大家非常熟悉,现在小弟就想做这个效果。 先讲下我的思路: 第一步:动态选择排版样式 由于这里有四种界面效果,每张界面上的按钮数量...
  • aa4790139
  • aa4790139
  • 2012-01-13 11:47:27
  • 5442
收藏助手
不良信息举报
您举报文章:浅谈向HTML5移植“愤怒的小鸟”
举报原因:
原因补充:

(最多只允许输入30个字)