浅谈向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游戏移植到android并打包成apk,加广告《二》

html5游戏移植到android并打包成apk,加广告《二》 在上篇简单介绍了h5游戏使用腾讯X5内核SDK集成到android 这篇则讲解开发集成,先看看工程目录结构 ...
  • netman2008hn
  • netman2008hn
  • 2015年06月06日 10:40
  • 948

浅谈人工智能

历史      各个文明中都有杰出的工匠发明了自动机器来代替人类劳动,早在春秋时期鲁班就发明了世界上第一个机器人,可在空中飞翔‘三日不下’;三国时期蜀汉的诸葛亮发明了‘木牛流马’来运送战备物资,称得上...
  • oba_gaga
  • oba_gaga
  • 2016年10月09日 20:57
  • 1864

浅谈数据库设计

浅谈数据库设计 ——-目录(?)[+]第一章 需求分析设计简介设计步骤需求分析重要性实例小型电子商务网站第二章 逻辑设计E-R图设计范式概要第一范式1NF第二范式2NF第三范式3NF BC范式第三章 ...
  • CCSUXWZ
  • CCSUXWZ
  • 2017年06月21日 17:50
  • 297

Tizen web app开发示例(将2048移植到Tizen平台上)

一. Tizen简介 Tizen是由英特尔和三星合作创建的基于Linux的一款新开源操作系统,是一个开源的、标准化的基于Linux的操作系统。该操作系统支持 HTML5 与基于 WAC 的应用程序,还...
  • lei_miaomiao
  • lei_miaomiao
  • 2015年12月01日 12:51
  • 1224

浅谈java及应用

给初学者之一:浅谈java及应用   学java不知不觉也已经三年了, 从不知java为何物到现在一个小小的j2ee项目经理,虽说不上此道高手,大概也算有点斤两了吧。每次上网,泡bbs逛论坛,没少去...
  • u012402926
  • u012402926
  • 2016年05月04日 17:54
  • 143

浅谈Open vSwitch移植

前一段时间自己私下一直学习Open vSwitch。起初学习Open vSwitch的目的,只是为了更好的学习OpenFlow协议,然而当我看到Open vSwitch处理OpenFlow协议的入口函...
  • yueyihua
  • yueyihua
  • 2016年03月31日 16:09
  • 2191

浅谈Linux内核移植

Linux内核简介:1.系统架构 (1)Linux是由用户空间和内核空间构成的(2)用户空间主要是用户应用程序以及一些C库文件,配置文件。一般是看得见的。(3)内核空间主要是系统调用接口,狭义上的内...
  • hyq4412
  • hyq4412
  • 2016年03月11日 13:58
  • 112

浅谈面向对象

这段时间天天被米老师洗脑式的上课,讲的都是一个中心,面向对象!     但是,面向对象到底是怎么回事儿呢?我们看一下维基百科里是怎么说的:     面向对象程序设计(英语:Object-oriente...
  • laner0515
  • laner0515
  • 2014年06月29日 15:33
  • 3255

浅谈Html5的优势和劣势

作为Html的第五次重大改革,Html5在以下方面均有改进: 一、网络标准 HTML5本身是由W3C推荐出来的,它的开发是通过谷歌、苹果,诺基亚、中国移动等几百家公司一起酝酿的技术,这个技术最大的...
  • Summer_15
  • Summer_15
  • 2017年04月19日 19:26
  • 856

浅谈HTML5的FormData对象

利用 FormData 对象,可以通过JavaScript键值对来模拟一系列表单控件,还可以使用 XMLHttpRequest的send() 方法来异步提交表单。 与普通的Ajax相比,使用Form...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年04月25日 13:59
  • 1426
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:浅谈向HTML5移植“愤怒的小鸟”
举报原因:
原因补充:

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