HTML5版本《cut the rope》背后的开发故事


Cut the Rope 是一款人见人爱的小游戏。有一个开发团队将它改造成了HTML5版本。想看看他们在改造过程中的经验之谈吗?那就看下面由开发人员自己写的文章吧! 在IE9中作为一...

Cut the Rope 是一款人见人爱的小游戏。有一个开发团队将它改造成了HTML5版本。想看看他们在改造过程中的经验之谈吗?那就看下面由开发人员自己写的文章吧!


在IE9中作为一个HTML5应用来运行,从原始的iOS源码改写而来。

Cut the Rope 是一款人见人爱的小游戏。所以我们有了个点子,即通过使用HTML5将这款游戏放到网上以便让更多的人能接触到它。


为了做到这一点,微软的IE团队和ZeptoLab团队(游戏的开发者)以及Pixel Lab的专家们合作以便将Cut the Rope 的网络版本实现。最终效果要能将游戏毫不失真地翻译成网络版本,并且能展示出HTML5的强大功能:画布提供的绘图、基于浏览器的音频和视频、CSS3风格以及WOFF字体的个性。


如果你想玩一下Cut the Rope 的HTML5版本,就去下面这个网址吧:www.cuttherope.ie.


我们觉得HTML5版本的游戏让网络更有趣了,同时,它也展示了IE的上一个版本因支持开放标准而显示出的长处。因此,我们想要分享一些开发 Cut the Rope 过程中的技术细节,以便帮助构建你自己的HTML5站点,并最终为Windows 8 Store做准备!


从Objective-C到 JavaScript


在将Cut the Rope应 用到一个新平台上的时候,我们希望我们保留了这个游戏的独特的物理特性、动作以及风格。所以,在开始的时候,我们想要改写iOS版本(而不是重写)。我们 仔细分析了用Objective-C写成的原始版本,发现工程量很大,并且很复杂。iOS版本包含大约15,000行代码(不包括库!)代码中最复杂的部 分是动作、动画以及绘图引擎。它们本身就很复杂,使事情变得更为复杂的是这三块之间耦合度很高,并经过了大量优化。


这是个令人生畏的工作:要将这些代码在浏览器上实现,而又不丧失原先的独特个性以及很高的质量。为了完成这个工作,我们赌上了Javascript。


在 过去,Javascript一直被人看做是速度很慢的语言。坦白讲,这种说法在最初的确是对的。老的Javascript引擎是为处理简单的“脚本” (scripting)类型的工作设计的(如它的名字所示)。然而,在现在,Javascript引擎已经经过大量优化了。整合进just-in- time等功能以后,Javascript执行速度已经可以接近底层代码执行速度了。


除此以外,我们知道使用Javascript编程不同于——并且需要的思维方式也不同于——用编译型语言编程。当我们将这个游戏从Objective-C改写过来的时候,我们知道应该充分利用Javascript编程的不同以及优点。


一 个明显的例子是在Javascript中缺少structs。Structs是相关属性的轻量级的聚合。使用Javascript对象来聚合一系列属性是 很容易的,但是这和使用一个合适的struct是很不同的。第一个不同是一旦structs被赋值给一个变量或则传递到一个函数的时候,它都会被复制。因 此,一个使用如Objective-C这样的编译型语言编写的函数可以修改以参数形式传过来的struct的值,而又不改变原来调用函数中的值。即使是在 同一个函数中,将一个不同的值赋给struct也会将值复制一遍。而Javascript对象,是通过引用传递的。所以一个函数修改了一个对象参数的时 候,原调用函数也能看到这个变化。


一个用来模仿structs的简单的方式是每当将Javascript对象作 为赋值对象或者参数传递的对象时都创建一个副本对象。在底层语言(native languages)中,使用structs的开销是很小的。但在Javascript中创建一个对象则会有很大开销,因此我们要非常小心,减少创建对象 的次数。特别是在赋值的时候,我们尽可能地复制单个属性,而不是创建一整个新的对象实体。


另一个例子是 Objective – C代码库面向对象的本质。与传统的基于对象的继承不同,JavaScript提供了基于原型属性(Prototype property)的继承。这是对基于对象的继承的一个高度简化的形式,与传统的Objective – C这样面向对象的语言不兼容。幸运的是,有各种各样的类库,可以帮助你写的面向对象编程(OOP)风格的JavaScript代码,我们使用的类库是一个非常简单的由John Ressig写的。 (需要注意的是,ECMAScript5,最新版本的JavaScript的规范,也提供了对一些类的支持,但我们选择不使用它,因为我们对该版本的语言不熟悉,而我们的开发进度非常紧张)。

更多 html5 相关资讯

微软为IE9开发HTML5网页版《怪物吃糖果》

微软为IE9开发HTML5网页版《怪物吃糖果》

《怪物吃糖果》(Cut the Rope)一款有趣的游戏,微软也为IE9开发了HTML5网页版,切断绳索,就能帮助怪物吃到糖果了。 微软还根据游戏内容向部分开发人员赠送了糖果,在便笺上,微软建

2012年,开发人员对HTML5都有哪些期待?

2012年开发人员对HTML5都有哪些新的期望?HTML5是一个发展中的标准,在2011年里,HTML5的发展取得了许多突破性的进展,但是它还有许多方面需要进一步的提升。 HTML5开发的两大主要

HTML5视频发展状况

HTML5视频发展状况

HTML5已经进入了在线视频市场,这是一件激动人心的事情,同时也对工业开发者提出了挑战。随着HTML5规范和各种浏览器的不断改变,LongTail Video花费了大量的时间来弄清楚这一技

欧朋成主流,手机浏览器进HTML5时代

欧朋成主流,手机浏览器进HTML5时代

随着网络技术的快速发展,作为新一代的网页技术标准,HTML5天生具有优势,无需任何插件就可以直接在浏览器中实现包括视频、动画特效在内的丰富呈现效果,一方面能够带给用户

微博热议HTML5技术,跨平台游戏或兴起

微博热议HTML5技术,跨平台游戏或兴起

久久乐网络联席创始人,市场总监李泓璇今日在腾讯微博中提出:现代人完整时间越来越少,碎片时间越来越多,再加之iOs、Android平台手机的普及和3G网络的更广泛应用,基于HTML5的跨平

网易邮箱全面支持HTML5:语音输入搜索邮件

网易邮箱全面支持HTML5:语音输入搜索邮件

网易邮箱极速4.0版近日取得最新突破,支持语音输入搜索邮件,成为全球首家采用此技术的邮箱运营商。   据网易邮箱极速4.0版项目经理介绍,对于支持HTML5最新版本的Chro

给力:HTML5代码可实现的八大视觉效果

给力:HTML5代码可实现的八大视觉效果

“HTML5”一出生就伴随着各种争论,不过有几个业界大佬的保驾护航、极力推动,相信随着支持webkit浏览器的普及,HTML 5会越来越普及、越来越强大,一定是必然趋势。   HT

Synacor收购HTML5操作系统公司Carbyn

据国外媒体报道,在线内容、门户和前端技术解决方案提供商Synacor在今天提交的修订版IPO(首次公开募股)申请材料中称,该公司本月收购了HTML5操作系统开发公司Carbyn。

JQ.Mobi:HTML5最终的jQuery框架

JQ.Mobi:HTML5最终的jQuery框架

HTML5开发商appMobi为移动Web开发者推出了最终的jQuery框架——jQ.Mobi,jQ.Mobi与原有方案相比更快、更轻巧,它提供给开发者一直在寻找的用户界面和编程功能。

IBM收购HTML5应用开发商WorkLight

北京时间1月31日晚间消息,IBM今日宣布,将收购以色列移动应用开发商WorkLight。   WorkLight可帮助企业开发和传播HTML5、混合( hybrid)及本地应用,在确保完美的用户

更多 javascript 相关资讯

割绳子(Cut The Rope)游戏HTML5版背后的开发故事

割绳子(Cut The Rope)游戏HTML5版背后的开发故事

译者注: Cut the Rope 是一款人见人爱的小游戏。有一个开发团队将它改造成了 HTML5 版本。想看看他们在改造过程中的经验之谈吗?那就看下面由开发人员自己写的文章吧~启示在 I

五理由 .NET开发者应该关注HTML 5

五理由 .NET开发者应该关注HTML 5

微软近期在D9和Computex 2011大会上演示了Windows 8,普通用户对于Windows 8的全新界面和触摸功能是欣喜不已,但对另一群人来说就是2012,他们就是Silverlight和.Net开发人员,在D9

Yahoo推Cocktails航母 :JavaScript框架

Yahoo推Cocktails航母 :JavaScript框架

 Yahoo!最近发布了Cocktails—— 一系列简化在客户端与服务器端环境都可以运行的应用程序的开发与托管的技术。Cocktails由Yahoo! Mojito——一个环境无关的JavaScript web

PhoneGap开发初体验:用HTML5技术开发本地应用

PhoneGap开发初体验:用HTML5技术开发本地应用

怎样在智能手机(以及其他移动设备)上将HTML5应用程序作为本地程序运行?虽然现在Web技术发展得相当快,但是想要在浏览器上运行一个几兆大小的应用程序还是非常困难的,因为

[科普文] 关于浏览器内核的一些小知识,明明白白选浏览器

[科普文] 关于浏览器内核的一些小知识,明明白白选浏览器

浏览器是我们每天几乎都必须使用的软件产品,可是对于自己每天都接触的浏览器,很多同学其实对其一无所知。今天异次元就跟大家说说关于浏览器内核的一些事儿吧,好让你了解多一点

Sencha 发布移动 HTML5 云计算平台

Sencha 发布移动 HTML5 云计算平台

Javascript网页开发框架提供商Sencha今天发布了Sencha.io,一个新的HTML5移动开发云计算服务。这项服务允许Sencha的应用开发者构建基于浏览器的应用而不用写服务器端代码或者

HTML5热潮来临,Office15也将支持其开发

HTML5热潮来临,Office15也将支持其开发

最新消息微软已经公开表明 HTML5 和 JavaScript 将是 Windows8中关键的开发平台技术,如今的两则招聘信息更是暗示了,HTML5 和 JavaScript 也将成为 Office15 甚至是 Office365

外媒:HTML5取代不了Flash

外媒:HTML5取代不了Flash

据国外媒体报道,美国知名IT网站彼得·威纳(Peter Wayner)今日撰写评论文章,称HTML5将会改变互联网的很多方面。虽然它不会取代Flash或Shockwave,但HTML5将会重新塑造互联

更多 objective-c 相关资讯