PCon全球产品创新大会(北京站)来啦~了解最新日程 了解详情
写点什么

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

  • 2012 年 1 月 15 日
  • 本文字数:0 字

    阅读完需:约 1 分钟

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

2012 年 1 月 15 日 21:01
用户头像

发布了 479 篇内容, 共 133.3 次阅读, 收获喜欢 37 次。

关注

评论

发布
暂无评论
发现更多内容

GitHub上1.3W Stars国内第一的项目实战PDF

Java架构之路

Java 程序员 架构 面试 编程语言

用138个案例讲明白了Spring全家桶+Docker+MQ

996小迁

Docker 架构 面试 RabbitMQ Spring全家桶

架构师训练营第六周作业

Geek_xq

京东城市时空数据引擎JUST亮相中国数据库技术大会(附PPT链接)

京东科技开发者

数据库 nosql

年前成功拿下35K+16薪美团Java架构师Offer!考点、面试题分享送给明年金三银四的你

Java架构追梦

Java 架构 面试 美团 offer

七大步骤,详解预置算法构建模型的全过程

华为云开发者社区

架构 算法 数据

ONES 年终报告 | 功能升级123次,服务超100万客户

万事ONES

研发管理工具 年终报告

完美!这份世界顶级架构师编写的550页Spring5高级编程

Java架构之路

Java 程序员 架构 面试 编程语言

【华为云专家原创】 服务注册与发现如何满足服务治理?

华为云开发者社区

分布式 服务 注册

盘点 2020 | 数据里有你、我、他,关键还是自己

李孟

大数据 数据中台 感悟 盘点2020

博睿数据支持腾讯云函数监控,Serverless时代已来临

博睿数据

Serverless APM 监控

互联网寒冬下,程序员如何化解危机?答案全在这份阿里Java知识地图里

比伯

Java 编程 程序员 面试 计算机

由两个问题引发的对GaussDB(DWS)负载均衡的思考

华为云开发者社区

数据库 数据 负载

看完这篇,保证让你真正明白:分布式系统的CAP理论、CAP如何三选二

四猿外

架构 分布式系统 CAP CAP原理 CAP理论

从阿里P5到P8=入门到内核?看看这份对标80W+年薪的Java进阶路线图

Java架构之路

Java 程序员 架构 面试 编程语言

京东将上线社区团购“京喜拼拼”:社区团购是否是一次泡沫大战

石头IT视角

LeetCode题解:剑指 Offer 40. 最小的k个数,二叉堆,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

花火交易所APP开发|花火交易所软件系统开发

系统开发

接口测试-使用mock生产随机数据

测试人生路

接口测试

【得物技术】交易轨迹系统

得物技术

数据 交易 得物 得物技术 自定义

太平金科助力“开局之战”顺利启动,博睿数据“A+N”一体化解决方案全力护航

博睿数据

APM npm AIOPS

数字资产钱包系统开发及介绍

Bitmap 续篇-基于 Bitmap 瞅瞅不一样的 Percentile

GrowingIO技术专栏

BitMap

大数据ETL批量调度,这几款工具都需要去掌握了解

会飞的鱼

大数据处理 kettle 运维自动化 海豚调度 ETL算法

测开之函数进阶· 第5篇《偏函数》

无个性不签名

测试开发

终于有人把SpringBoot讲清楚了!阿里P8力推的SpringBoot核心笔记

Crud的程序员

spring 程序员 springboot

架构设计大作业1

仲夏

手把手带你入门加密算法的Python实现

华为云开发者社区

Python 算法 加密

推陈出新,一步到位,智慧水务这么用效率翻倍

一只数据鲸鱼

物联网 数据采集 智慧城市 组态软件 智慧水务

网易有道 iOS二面经验分享

iOSer

ios 面试 网易

咨询师的诱惑

escray

程序员 面试 面经

TDSQL前沿技术进展和趋势——数据异常基础理论研究

TDSQL前沿技术进展和趋势——数据异常基础理论研究

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