澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

5版背后的支出旧事,浏览器内核

2019-07-28 作者:澳门新萄京赌场网址   |   浏览(86)

《Cut The Rope》 HTML 5版背后的开发故事

2012/01/17 · HTML5 · HTML5

原文链接:cuttherope,编译:webapptrend

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

启示

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

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

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

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

图片 1

在IE9中作为一个HTML5应用来运行,从原始的iOS源码改写而来。从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的规范,也提供了对一些类的支持,但我们选择不使用它,因为我们对该版本的语言不熟悉,而我们的开发进度非常紧张)。

除了将代码从Objective-C改到Javascript,我们还需要将图像代码从OpenGL改到HTML5的Canvas API。总体上说,这一切都进行地很顺利。Canvas是一个很快的渲染表面,特别是在一个API由硬件加速的浏览器中(比如IE9)。

图片 2

一个使用帆布API完成的aliased lines来画绳子的例子。

令人惊讶地是,我们遇到了好几个地方,都是Canvas比在移动版本Cut the Rope中使用的OpenGL ES提供了更多功能的。一个例子是画anti-alias lines。在使用OpenGL画anti-aliased lines的时候,需要将一条线镶嵌到一个三角形地带中,并且将末端的浑浊部分褪色以完成透明化。而在HTML5的canvas中,anti-aliasing lines的绘制是由line API自动完成的。这意味着我们实际上需要从OpenGL版本中去掉一些代码。将OpenGL代码中的三角形顶点数组解约掉可以提供更好性能。

最终,我们有几乎15,000行代码在浏览器中执行(它已经被最小化了,所以如果你在浏览器中查看源代码的时候,你会看到少得多的代码)。考虑到这么多代码带来的复杂性,Denis Morozov(ZeptoLab开发部门的总监,the Director of Development at ZeptoLab)在开始的时候问了一个问题:HTML5能给我们我们所需要的速度和性能吗?

为了回答这个问题,我们创建了一个早期的“性能”里程碑,在这里,我们集中精力去得到游戏运行时难度最高部分的最小版本。也就是说,我们想要看一下绳子看起来是什么样子的,以及我们是否能在浏览器中处理复杂的物理引擎。

Performance性能

5版背后的支出旧事,浏览器内核。项目开始以后三个星期,我们最终有了物理和绘图引擎的基本部分,以及一个简单的用于启动动画的计时器。现在,我们可以在游戏场景中呈现出一些绳索,一颗星星,以及一个Om Nom sprite。不错的进步!第四周的时候,我们加入了一些基本的和鼠标的互动,这样,我们就能真正开始玩游戏了。我们在开发的过程中一直都在测试性能,并且希望ZeptoLab的团队能够给我们一些反馈。

当我们把这些代码和ZeptoLab分享的时候,他们对这些代码在浏览器中的性能表现感到惊喜(尤其是游戏的速度和平滑度)。说句实话,我们一直都提着一口气呢。我们希望Javascript能快点,因为物理计算非常复杂,并且有实时性要求。这是一个很好的例子,证明了人们过去认为Javascript很慢的观点实际上是错的。最新的Javascript引擎是非常快的。

在这个项目中,我们在IE9中预览了游戏。当你加载了游戏的时候,IE9的Chakra JavaScript引擎在一个后台线程中将代码进行了预编译——就像一个编译器编译Objective-C 或者 C 一样。然后,它实时将编译过的代码(字节码)发送给游戏线程去执行。执行速度几乎和本地执行速度一样。令人惊讶的是,这样的性能是来自于Javascript引擎,我们不需要在代码中做任何特殊处理。

图片 3

项目早期帧率检测结果(注意帧率上限是60FPS)

我们在Javascript上打的赌成功了,因此,我们将注意力转向了硬件和浏览器。由于IE的硬件加速堆栈以及我们在 Disney Tron和其他一些HTML5站点上积累的经验,我们对于游戏在测试机器上的完美表现毫不担心。我们很轻易地达到了上限60 FPS(帧/每秒)。但是,我们想要确认游戏在其他硬件和其他浏览器上也能表现得很好。下面是我们经过一些初步测试后所看到的结果。

根据测试数据,我们将30 FPS(帧/每秒)设置为最小阈值。当浏览器速度低于这个阈值的时候,我们将会通知用户。他们仍然可以玩这个游戏,但是我们会通知他们在游戏中他们可能会感觉到一些迟缓现象。这确保了这个游戏能支持不同硬件和软件,并且提供给玩家我们所能提供的最好体验。

我们想要指出两件事情。第一件事,这个游戏的现有版本在桌面PC机和Mac机上使用鼠标玩时效果是最好的。我们还没有加入对触屏输入的只支持,但在未来的版本中,我们会考虑这一点。

第二件事,现有的Chrome版本(version 16)有一些已经为大家所知的和媒体播放相关的问题,使得Cut the Rope中的声音飘忽不定。我们进行了深入调研,试图用不同格式(包括WebM)重新编码媒体文件,但是没有找到一个合适的格式或者MIME配置或者其他任何方案来有效解决这个问题。这个问题看起来是浏览器的bugs以及已经为大家所知的问题。更重要的是,尽管声音时断时续,游戏玩起来还是非常有意思的。考虑到这一点,我们一方面可以说IE9的用户能免费得到一个很棒的应用,另一方面,Chrome以及一些Firefox用户可能会遇到一些声音上的问题,但他们会注意到我们退回使用了一个flash插件来确保声效和音乐都能正常工作。

工具

关于HTML5的一件很好的事情是你不需要学习一门新的语言来利用这项新技术的强大功能。如果你知道并且懂得Javascript,那么你就能实现一个现代浏览器所能实现的所有功能。你甚至可以创建一个像这个游戏一样的你自己的游戏!

代码编辑器以及开发环境

图片 4

Visual Web Developer 2010 Express可以免费下载使用,是一款很棒的编辑器,即使是对有经验的Web开发者来说也是如此。

图片 5

分析器截图,图中内容是对Calc2PointBezier函数中花费的不合比例的时间(Calc2PointBezier函数是用来计算绳子每节的位置)。

有一些很好的免费工具,可以让我们更容易地使用Javascript和HTML5。我们的大多数开发工作都是在Visual Web Developer 2010(“快捷”版本可以在这里免费获得)中完成的。这是一个非常健壮的Web编辑器,带有Javascript以及CSS自动完成功能。更好的一点是:它是免费的!我们在Windows7的IE9上完成了我们的大多数测试,并且我们也时不时在Firefox、Chrome、Safari以及IE10的开发者尝鲜版。总体上说,主流浏览器对于我们所使用的HTML5的特性都有比较一致的实现。在大多数情况下,我们在IE9上测试通过的特性在其他地方也运行得一样好。

清查我们的资源加载器(Resource Loader)!

Cut the Rope有一个非常独特的细节化的视觉风格——有很多图片、音频和视频,并且花费也很小。最终达到的效果就是这个游戏比一般的网站要大很多。综合起来说,它大概有6MB(而一般的网站是200-300K)。这些多媒体资源要花费一段时间才能下载,而如果资源没有下载到位,我们看不到网页上的内容,我们是无法开始游戏的。在一个典型的网页中,如果你缺掉了一两幅图,它仍然是可以运行的,但在HTML5的API(drawImage)中,如果图像无法获取的话,这一API就会崩溃。

为了解决这个问题,我们想要创建一个资源加载器,用来下载页面所需要的所有内容,并且当下载完成后,给我们一个好的反馈。这一点小代码能做很多很棒的事情:

1.它屏蔽了不同浏览器之间对下载处理的不同以及它们告知你进度的方式的不同。

2. 它能让你决定事物下载的顺序(你可能会想要先下载大文件,或者你想要在下载游戏图形之前先下载所有菜单图像)。

3.最终,它可以智能提醒你事物的到达,这样就可以通知用户进度情况,甚至可以开始部分游戏。

创建这些类型的库是很难做好的。由于我们对于这些库的效果感到十分满意,因此我们想要分享我们的资源加载器的代码给你。最终的成果形式是PxLoader,一个Javascript的资源加载器库,你可以使用它为HTML5应用、游戏、站点制作预加载器。它是开源免费的。你可以从页面顶端抓取它,或者点击这里。

IE中的性能工具

另外一个在开发过程中不可或缺的工具是IE9中的Javascript分析器(JavaScript Profiler)。分析器能让你发现你的代码中的热点以及瓶颈。在我们第一次做性能评估的时候,我们发现在一些机器上我们一直困在了20或者30帧/每秒,这使得我们几乎要放弃了。

我们做了一些最初的代码检查,但是什么都没有检查出来。我们使用分析器加载了游戏,发现我们在satisfyConstraints()函数上花了太多时间。这个函数是用来计算有关绳子的一些物理性质的数字。我们用来改写的Objective-C版的实现是用递归实现的,递归每加深一层,就会传递一个新的对象。

通过Microsoft的一些指导,我们决定将递归函数替换成一个“解开”的循环版本。结果是惊人的。我们在每一个浏览器中都看到了10倍以上的性能提升。坦白说,如果没有IE9的分析器工具,我们永远都不可能发现这一点。

下一步是什么?

九月,Microsoft展示了一个Windows8的开发者尝鲜版。在这一声明以后,HTML5将会更有趣,因为Metro风格的应用可以用好几种开发工具集开发,包括HTML5。这意味着Web开发者可以将为Web所写的代码拿来很容易地无缝移植到Windows8中。为在线应用的投资将来可以在Windows Store中得到实实在在的回报。

事实上,只要再做一点点工作,我们就能将HTML5应用移植到Windows8的Metro风格应用中。可以在这篇博文中读到关于 Cut the Rope以及它整合到Windows Store中的内容。

我们非常开心看到开发者使用HTML5构建的应用。你可以下载IE9并且可以在www.beautyoftheweb.com找到一些其他的很漂亮的站点,或者在dev.windows.com下载开发者尝鲜版的Windows 8。

要保持关注,因为这只是一个开始……还会有更多惊喜的!

赞 收藏 评论

图片 6

 

除了欢欣鼓舞地宣告旧时代的离去,Microsoft 也效法别间浏览器的做法,与 Cut the Rope 的游戏公司合作,将这个在移动平台上非常热门的游戏,移植到 HTML5 的网页平台中 -- 游戏大致上运用了 CSS3 样式与 Canvas 绘图等技术所构成,而该游戏的制作团队也在他们的开发部落格中,更详细叙述了更多他们所使用的技术细节,像是 ZeptoLab 与 Pixel Lab 是如何将游戏从 Objective-C 转至 Javascript 的说明等。总之,快点击第三个引用来源来试试这款游戏在你浏览器上的表现,并且探索看看游戏后来是否会有专属浏览器接口的特殊关卡啰!(IE 表示:我就在右下角耶,可以不要忽视我吗?)

关键字:浏览器内核,浏览器引擎,Browser,Webkit,Blink,Chromium。

割绳子(Cut the Rope)非常可爱而有趣所以很快流行起来成为一个人见人爱的游戏。因此,我们有一个想法:让我们为这个伟大的游戏提供一个HTML5的网页版本,提供给更多的人。为了做到这一点,微软的IE团队与ZeptoLab(游戏的创造者)以及像素实验室的专家们进行合作,使得割绳子可以在浏览器中运行。为了最终可以完整的将游戏全部通过HTML5移植到网页上,必须做到:画布上渲染图形,使用浏览器兼容的音频和视频,CSS3样式以及个性化的WOFF字体。

 

 

本文简单介绍一下各种浏览器内核。着种介绍一下Webkit。顾名思义,浏览器内核就是浏览器的核心部分,也可以说是浏览器所采用的渲染引擎,负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。常见的浏览器内核有:Trident,Gecko,Presto,Webkit等。对于开发者来说,有了浏览器内核,你就可以开发一款你自己的浏览器。或者在你的应用中嵌入浏览器内核,你就可以在你的应用中显示网页并运行JaveScript。

灵感

 

图片 7

Trident

 

Trident(IE内核):该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到IE11,也被普遍称作”IE内核”。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。

 

Trident内核的常见浏览器有: IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0);360安全浏览器(1.0-5.0为Trident,6.0为Trident Webkit,7.0为Trident Blink)猎豹极轻浏览器,360极速浏览器(7.5之前为Trident Webkit,7.5为Trident Blink)猎豹安全浏览器(1.0-4.2版本为Trident Webkit,4.3及以后版本为Trident Blink)猎豹极轻浏览器,傲游浏览器(傲游1.x、2.x为IE内核,3.x为IE与Webkit双核)、百度浏览器(早期版本)、世界之窗浏览器(最初为IE内核,2013年采用Chrome IE内核)、2345浏览器、腾讯TT、淘宝浏览器、采编读浏览器、搜狗高速浏览器(1.x为Trident,2.0及以后版本为Trident Webkit)、阿云浏览器(早期版本)、瑞星安全浏览器、Slim Browser、 GreenBrowser、爱帆浏览器(12 之前版本)、115浏览器、155浏览器、闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器(iPhone/iPad/Android)、UC浏览器(Blink内核 Trident内核)等。

 

补充:IE从版本11开始,初步支持WebGL技术。IE8的JavaScript引擎是Jscript,IE9开始用Chakra,这两个版本区别很大,Chakra无论是速度和标准化方面都很出色。

 

作为运行在IE9中的HTML5应用程序是从iOS的原生代码中移植过来的。

Gecko

 

Gecko(Firefox内核):Netscape6开始采用的内核,后来的Mozilla FireFox(火狐浏览器) 也采用了该内核,Gecko的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。因为这是个开源内核,因此受到许多人的青睐,Gecko内核的浏览器也很多,这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。

 

Gecko内核常见的浏览器: Mozilla Firefox、Mozilla SeaMonkey、waterfox(Firefox的64位开源版)、Iceweasel、Epiphany(早期版本)、Flock(早期版本)、K-Meleon。

 

补充:JavaScript引擎是SpiderMonkey。

 

图片 8

Presto

 

Presto(Opera前内核) (已废弃): Opera12.17及更早版本曾经采用的内核,现已停止开发并废弃,该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,然而代价是牺牲了网页的兼容性。

 

Opera现已改用Google Chrome的Blink/Chromuim内核。

 

上面的屏幕截图展示的是这个版本中的某个关卡。

Webkit

 

Webkit亦使用于Apple iOS、BlackBerry Tablet OS、Tizen及Amazon Kindle的默认浏览器。WebKit的C 应用程序接口提供了一系列的Class)以在视窗上显示网页内容,并且实现了一些浏览器的特色,如用户链接点击、管理前后页面列表及近期历史页面等等。

WebKit的HTML及JavaScript代码源自KDE的KHTML及KJS库的一个分支,现已由KDE、Apple、Google、Nokia、Bitstream、BlackBerry及Igalia等独立开发。OS X、Windows、GNU/Linux以及其他类Unix系统操作系统,皆支持这个项目。2013年4月3日,Google宣布它创建了WebKit中WebCore组件的分支——Blink,Blink将用于新版Google Chrome与Opera。

WebKit的WebCore及JavaScriptCore组件使用GNU宽通用公共许可证,其他组件则采用BSD许可证。

截至2013年3月7日,Webkit商标已被苹果公司在美国专利及商标局注册为其商标。

 

 

缘起

WebKit的代码源自1998年所开发的KDE的HTML排版引擎KHTML及KDE的JavaScript引擎KJS的代码。Apple的Don Melton于2001年6月25日开始了WebKit这个项目,当时WebKit仅为KHTML及KJS的复刻),Melton在电子邮件中向KDE开发者解释,KHTML及KJS比起其他技术有着更容易开发、更轻巧(少于140000行程序码)、更加干净的设计,以及更与标准兼容的优势,KHTML及KJS将会通过连接器库(adapter library)的帮忙被移植到OS X,并重命名为WebCore及JavaScriptCore。JavaScriptCore在2002年6月,于KDE的邮件列表(mailing list)中首度发表,包含着苹果电脑首次发布的部分。WebCore在2003年1月,首度发布于Macworld Expo中由苹果电脑CEO Steve Jobs发表的Safari浏览器。当WebCore首次使用在第一个Safari的测试版本的同时,JavaScriptCore首次并以私有framework的方式包进Mac OS X v10.2,苹果电脑将其使用在Sherlock)软件。Mac OS X v10.3是第一个Apple发布内置WebKit的操作系统,尽管它已经被内置在10.2内了。

Apple表示,有些牵涉到OSX的特定功能(例如:Objective-C、KWQ及OS X特定函数)将会在KDE的KHTML中缺席,这行为被称为不同的发展策略。

 

你可以通过这个网址来访问HTML5版本的割绳子(Cut the Rope):www.cuttherope.ie

开发分裂

由于这两个分支(KHTML及WebCore)有着不同的目的而进行开发,所以他们代码互相补丁(patch)的难度越来越高。 KHTML的开发者认为,他们不喜欢接受苹果电脑对于KHTML的改变,并宣称两个组织的关系有些不好(a bitter failure,苹果提交他们相当大的补丁,其中包含相当大数目的改变,但是却缺少相关文件,并且经常包含着未来的扩充,然而这些补丁对于KDE的开发者而言,要集成回KHTML是相当困难的,此外,苹果电脑要求开发者阅览Apple的代码之前必须签署保密条款(non-disclosure agreements),甚至还不能访问苹果电脑的臭虫数据库[[来源请求]](https://zh.wikipedia.org/wiki/Wikipedia:列明来源)

在公布离婚的期间,KDE开发者Kurt Pfeifle(pipitas)贴出了一篇文章,宣称KHTML开发者已经设法从WebCore移植许多(但非全部)Safari所改进的项目回KHTML,而他们一直都希望这些改进是来自于苹果电脑。这篇文章让Apple开始联系KHTML的开发者,并讨论有关增进彼起关系的方法及未来的合作模式,事实上KDE项目确实有能力合并一些项目,来改进KHTML的渲染速度以及加入一些新的功能特色,包含Acid2渲染测试的改进。

自从新闻播报了fork事件之后,Apple在CVS发布了他们自己维护的WebKit版本,在他们发布代码后,Apple及KHTML开发者已经加深了合作关系,许多KHTML的开发者也成为了WebKitSVN&action=edit&redlink=1)代码库的审查(Reviewer)及提交者(Submitter)。

WebKit工作团队同时也逆转许多Webkit代码当中,专为苹果特定的修正,并且实现了一个平台特定的抽象层,可使渲染的代码于其他平台可以更顺利的运作。

在2007年7月,Ars Technica网站发布一篇文章,指出KDE开发团队将从KHTML转移到WebKit,再经由多年的集成,KDE开发平台4.5于2010年8月发布,它同时支持WebKit及KHTML,而KHTML的开发仍在继续。

 

 

分支

在2013年4月3日,Google宣布他将自行开发WebCore的分支,也就是Blink引擎。Chrome的开发者由于希望在浏览器的开发上拥有更大的自由度,同时避免与上游冲突,更可通过移除Chrome没有使用的组件而简化自己的程序库,所以决定开发WebKit的分支版本。同时Opera软件在同年稍早也宣布,他们将自有引擎转换到Chromium的程序库,在此时也同时转换到Blink的分支。根据这份声明,WebKit的开发者开始讨论移除Chrome相关代码的可能性,以精简整个WebKit程序库。

 

我们认为HTML5版本使Web可以过更多有趣的东西,而最新版本的IE浏览器也在进一步的支持这些标准。考虑到这一点,我们希望可以分享更多这个项目“幕后”的技术细解,帮助你建立起自己的HTML5网站,并为Windows8商店做好准备。

组件

 

WebCore

WebCore是一个由WebKit项目所开发的布局(Layout)、渲染(Rendering)及HTML和SVG的DOM库,完整的代码皆由GNU宽通用公共许可证所授权,WebKit框架包装了WebCore及JavaScriptCore,并提供一个Objective-C应用程序接口来接介由C 所开发的WebCore渲染引擎及JavaScriptCore脚本引擎,通过Cocoa API就可以在应用程序中很简单的使用这些组件。之后的版本同时包含了一个跨平台的C 抽象平台,并且提供各种API使用。

WebKit通过Acid2及Acid3的测试,包含完美像素的渲染(pixel-perfect rendering)以及没有任何时间及不顺的问题。

从Objective-C到JavaScript

JavaScriptCore

JavaScriptCore是一个在WebKit中提供JavaScript引擎的框架,而且在OS X作为其他内容的脚本引擎。JavaScriptCore最初是为KDE的JavaScript引擎(KJS)库及PCRE正则表达式库,JavaScriptCore从KJS及PCRE复刻之后,已比原先进步了许多,有了新的特色以及极大的性能改进。

在2008年6月2日,WebKit项目宣布,将被重写为"SquirrelFish",它是一个字节码解释器,这个项目演变成SquirreFish Extreme(简称为SFX,市场称之为Nitro),首次公开于2008年9月18日,它会将Javascript编译为本地的机器语言,不再需要字节码解释器,同时加速了JavaScript的运行效率。

将割绳子移植到新平台上时,我们希望能保留其独特的物理、交互以及个性的体验。因此,在早期我们决定针对iOS原生代码版本做一个“接口”来适配这个游戏(而不是重写)。由此我们开始全面地分析原来的Objective-C代码项目。原来这是一个非常大而复杂的游戏。iOS本地代码大约包含了15,000行代码(不包含引用库)!在所有代码中最复杂的部分是物理、动画和绘图引擎。这三者本身就非常复杂,再经过紧密的关系相连以及高度优化后更是如此。

Drosera

Drosera是一个JavaScript调试工具,它被包含在每日编译的WebKit版本内。它被命名为茅膏菜属,这是一种食虫植物。Drosera目前已经被Web Inspector替换了。

 

 

V8 (JavaScript引擎)

V8是一个由美国Google开发的开源JavaScript引擎,用于Google Chrome中。

V8在运行之前将JavaScript编译成了机器码,而非字节码或是解释执行它,以此提升性能。更进一步,使用了如内联缓存(inline caching)等方法来提高性能。有了这些功能,JavaScript程序与V8引擎的速度媲美二进制编译。

传统的Javascript是动态语言,又可称之为Prototype-based Language,JavaScript继承方法是使用prototype,通过指定prototype属性,便可以指定要继承的目标。属性可以在运行时添加到或从对象中删除,引擎会为运行中的对象创建一个属性字典,新的属性都要通过字典查找属性在内存中的位置。V8为object新增属性的时候,就以上次的hidden class为父类别,创建新属性的hidden class的子类别,如此一来属性访问不再需要动态字典查找了。

为了缩短由垃圾收集造成的停顿,V8使用stop-the-world, generational, accurate的垃圾收集器。在执行回收之时会暂时中断程序的执行,而且只处理对象堆栈。还会收集内存内所有对象的指针,可以避免内存溢出的情况。V8汇编器是基于Strongtalk汇编器。

 

参考链接:

)

 

要在保持独特的个性和达到难以置信的质量的情况下并将玩家习惯也移植到浏览器中,这无疑是一项非常艰巨的任务。而要做到这一点,我们将赌注全押到了JavaScript上。

 

在过去,JavaScript是以效率低下而闻名的语言。坦率的说,开始是这样的。旧版本的JavaScript引擎是被设计来执行简单的“脚本”任务(也正因此而得名)。然后,今天,JavaScript引擎经过高度优化,功能类似于即使编译语言,而执行速度也接近于原生代码。

 

除此之外,我们知道编写JavaScript代码与其他编译型代码是要采用不相同的心态。正如我们要从Objective-C移植游戏一样,我们需要拥抱种种变化以及优化相关的任务。

 

一个明显的例子就是JavaScript中缺少结构。结构是通过一种轻量级的属性来聚合相关属性。它非常容易使用一个JavaScript对象来创建并设置一组属性,但是这种做法和结构的实现是有非常大区别的。第一个区别是,每当结构分配给一个变量或传递给函数时都会生成一个变量的副本。因此,在类似于Objective-C之类的编译型语言编写函数时修改参数传入的一个结构是不会影响调用者所持有的结构。即使在同一个函数中,将结构分配给不同的变量也会产生不同的副本变量。JavaScript对象,在另一个方面,是通过引用传递的。因此,当函数修改了对象参数,这个修改调用者也会看到。

 

模仿原生结构的一个简单的方法就是创建JavaScript的副本然后赋值或作为参数传递。在原生语言中使用结构是非常小的开销。而在JavaScript中创建对象就昂贵的多,所以我们必须非常小心,以尽量减少要分配的数量。特别是对任务,我们试图尽可能的复制各个属性而不是创建新对象实例。

 

另一个例子是面向对象的Objective-C的代码库。为了代替传统的基于对象的继承,JavaScript提供了典型的基于原型属性的继承方式。这是一个高度简化的对象继承形式,并与传统的Objective-C等面向对象语言不兼容。幸运的是,有各种各样的类库,可以帮助你写面向对象(OOP)风格的JavaScript代码,我们使用由John Ressig编写的一个非常简单的类库(以JQuery而成名)。(请注意,最新的JavaScript的规范版本ECMAScript5已经包括了对类的支持,但是我们选择不使用这种方式,因为我们本身缺乏对这个版本语言的了解,再加上需要严格的执行我们的开发计划)

 

除了需要将Objective-C代码移植到JavaScript,我们还需要从OpenGL将图形代码移植到HTML5的Canvas API。总的来说,这是非常顺利的。Canvas提供了令人惊讶的渲染速度,尤其是该API在浏览器硬件加速方面(如Internet Explorer 9)。

图片 9

用Canvas API绘制的有锯齿的绳子实例。

 

令人惊讶的是,我们遇到的这个Canvas竟然比割绳子所采用的移动OpenGL ES版提供了更多的功能。例如绘制抗锯齿线段。在OpenGL中绘制反锯齿线条需要在其中通过镶嵌从不透明到完全透明的色块形成三角地带来完成。HTML5的Canvas自身就具备了处理抗锯齿线条的API。这就意味着,我们确实需要对OpenGL版本中的代码进行删减。删除了OpenGL代码中三角形顶点的数组也给我们带来了更好的性能,尽可能多的尝试采用本机复制的方法绘制三角形线条。

 

最后,我们需要在浏览器中执行将近15000行(最后它被精简了很多,所以如果您在浏览器中查看源代码将会比这个少)代码。由于有这么庞大的代码复杂性,Denis Morozov在开始之前很公允的问道:HTML5提供给我们的速度和性能能否满足这个游戏?

 

要回答这个问题,我们需要先创建“性能”的里程碑,在这里我们得到了游戏中运行最激烈部分的最小版本。也就是说,我们需要绳子看起来和真的很像就需要在浏览器中实现非常复杂的物理引擎。

 

性能

在项目进行的第三周,我们终于有了一个简单的定时器来引导动画、绘制引擎和物理引擎。现在进入游戏场景,有了一根绳子、一颗星星和一个Om Nom精灵。努力!在这周四,已经包含一些基本的鼠标交互,我们可以玩游戏啦!很快就我们就会开始进行性能测试,但是我们希望可以让ZeptoLab团队给一些反馈。

 

当我们将代码共享给ZeptoLab时,他们对游戏在浏览器中的性能(特别是游戏的速度和平滑感)感受十分惊讶。说实话,这让我们稍稍的松了一口气。在激烈和实时进行的物理计算方面,我们预计JavaScript会要更快一些。通常人们对JavaScript有“缓慢”的成见是错误的,这个例子就是非常好的证明。新一代的JavaScript引擎会更快。

 

在这个项目中,我们使用Internet Explorer 9预览游戏。当你载入游戏时,Internet Explorer 9的Chakra JavaScript引擎会为代码启动一个预编译线程,像Objective-C或C 一样对进行编译。然后,将编译后的代码(字节码)实时发送给游戏执行线程。编译后的结果接近本机原生代码的执行速度。神奇的是,这些都是由JavaScript引擎来完成的,我们并没有为此做任何特殊的代码。

 

图片 10

这是项目前做的帧速测试(注意,上限帧率为60FPS)

 

我们在JavaScript上的赌注得到了回报,接下来我们就把所有关注都转移到了硬件和浏览器上。随着IE浏览器的硬件加速渲染和我们的经验、Disney Torn以及其他HTML5网站,没有浪费太大的力量就使游戏在测试机器上完美运行。非常容易的达到了60FPS(frames per second)。但是我们要肯定,在其他浏览器和硬件上也可以轻松运行。上面是我们做的一些初步测试。

 

基于这些数字,我们将底线设置为30 FPS。我们决定在浏览器低于该阀值时通知用户。他们依然可以选择继续玩游戏,但是我们会通知他们可能会感觉到有点呆滞。这将确保我们可以支持更多的硬件和软件,以确保能为游戏玩家提供最好的游戏体验。

 

还需要指出两点。第一,目前的游戏版本只支持桌面电脑或苹果电脑的鼠标操作,我们还没有加入针对触摸的支持,但是我们会考虑在未来的版本中实现。

 

第二,在目前的Chrome版本(版本号为16)中,有已知割断绳子而声音无法加载的未知问题。我们在研究可变通的方法,并试图对多种媒体格式进行重新编码(包括WEBM),但还是没有发现格式或者MIME配置以及其他东西可以可靠的解决这个问题,这似乎是浏览器的本身的错误。更重要的是,游戏还可以继续,虽然间歇的会失去音频但是游戏依然可玩且有趣。尽管如此,我们可以说Internet Explorer 9用户可以获得一个非常伟大的用户体验,Chrome和Firefox用户可能会遇到音频运行的问题,但是注意我们会回调一个Flash插件,以确保声音效果和音乐保持工作。

 

工具

关于HTML5另一件伟大的事情就是,你不需要去学习另外一门新的语言才能释放这项新技术的力量。如果你知道和理解JavaScript并可以使用现代浏览器就可以做到啦。你甚至可以通过这样的方式创建您自己的游戏。

 

代码编辑器和开发环境

图片 11

Visual Web Developer 2010 Express 是可以免费下载的编辑器,为Web开发人员提供了最好的开发体验。

 

图片 12

从截图可以看到,大多数的时间都耗费在Calc2PointBezier中,这个方法是用来计算绳子段所在的位置。

 

有一个伟大而免费的工具,使JavaScript和HTML5的工作变的更加容易。我们在开发时使用的Visual Web Developer 2010(“Express”版本是免费提供的)就是个功能非常强大的网页编辑器,支持JavaScript和CSS自动完成。更棒的是express版本是免费的!我们在Windows 7的Internet Explorer 9上测试的同时也对Firefox、Chrome、Safari以及Internet Explorer10开发者预览版进行了测试。一般情况下,我们都在Internet Explorer 9上进行开发测试,并对HTML5的特性进行一致的实现,然后保证在其他浏览器上可以工作。

 

获取我们的资源加载器!

割绳子是非常独特的,具有非常详细的视觉元素 --- 大量的媒体图像、声音和视频 --- 这需要一些小成本。其结果是整个游戏远高于网站的平均水平,这些综合起来大约要有6MB(比较典型的网站平均水平为200-300K)。许多媒体信息都是下载一点使用一点,但是在我们下载完所有内容之前游戏是不能开始的。传统的网页在这方面是相当宽容的,如果你错过了一、两个图像是没有关系的,但是HTML5的Canvas API是非常严格的如果缺少图像会运行(调用DrawImage)失败。

 

为了应付这一挑战,我们需要创建一个资源加载器,下载所有需要的内容,这个页面要为下载提供良好的反馈信息。这段代码要做一个大堆智能的事情:

 

  1. 它要涉及如何处理不同的浏览器下载方式,以及高速这些浏览器怎么去按照进度下载;
  2. 它可以让你对下载列表做出非常明智的决定(你可能想先下载大文件,例如,你可能想在下载菜单图片之前先下载游戏的图片);
  1. 最后一件聪明的事情时,是向你的用户显示下载进度,比如在游戏开始的时候,完成第一组的下载。

 

现在最棘手的事情是构建这些类库。我们非常高兴并希望和您分享这些资源加载的程序代码。最终采用的是PxLoader,一个JavaScript资源加载器库,你可以为HTML5的应用程序、游戏或网站进行资源预载。这个类库开源和免费的,你可以在页面的顶部获取它,也可以通过点击这里获取。

 

Internet Explorer的性能工具

另一个在开发过程中不可缺少的工具就是Internet Explorer 9的JavaScript分析其。通过它可以分析代码中的热点和瓶颈。做第一个与性能相关的里程碑,在发现很多机器上帧速都停留在20或30FPS时,我们几乎要选择退出。

 

在做了初步的代码分析后,我们没有选择退出,又一次对游戏进行了全面的探查,发现游戏在satisfyConstraints()函数上花费了大量的时间。该函数是用来对与绳索有关的物理特性进行数学计算的。在做Objective-C代码移植时,我们先对这个方面进行了书面递归分析,深入的分析了每个调用和对象传递。

 

在来自微软的指导下,我们决定通过一些代码对这个函数进行“拆包”替换,结果相当惊人,我们看到几乎在所有测试浏览器中性能都提高了10倍!坦率的说,在此之前我们从来都没有发现,Internet Explorer 9有分析工具。

 

接下来是什么?

在九月的BUILD大会上,微软展示了Windows 8的开发者预览版。随着这项产品的发布,HTML5的故事变得更为有趣,因为Metro风格的应用程序可以使用多样的开发工具集,其中就包含HTML5。这意味着,Web开发人员可以将代码更加轻松、无缝的移植到Windows 8。在稍后Windows 商店上线之后体验在线支付的真正价值。

 

事实上,只需要做很少的额外的工作,就能够将HTML5的应用移植成Windows 8 Metro风格的应用程序。你可以通过这个博客的文章了解割绳子(Cut the Rope)是如何与Windows商店相整合。

 

我们很高兴能看到今天开发人员都在使用HTML5来构建应用。你可以下载Internet Explorer 9,并通过www.beautyoftheweb.com找到其他漂亮的站点,或通过dev.windows.com下载Windows 8的开发人员预览版。

 

敬请关注,这仅仅是个开始...更多惊喜即将到来!

 

 [原文地址:]

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:5版背后的支出旧事,浏览器内核

关键词: