Cocos2D-HTML5开源2D游戏引擎

<![CDATA[

Cocos2D-HTML5是基于HTML5规范集的Cocos2D引擎的分支,于2012年5月发布。Cocos2D-HTML5的作者林顺将在本文中介绍Cocos2D-HTML5的框架、API、跨平台能力以及强大的性能。Cocos2D-HTML5是Cocos2D系列引擎随着互联网技术演进而产生的一个分支。该分支基于HTML5规范集,目标是可对游戏进行跨平台部署。Cocos2D-HTML5采用MIT开源协议,设计上保持Cocos2D家族的传统架构,并可联合Cocos2D-X JavaScript-binding接口,最大程度地实现游戏代码在不同平台上的复用。

Cocos2D-HTML5由Cocos2D-X核心团队主导开发和维护,行业领袖、HTML5大力推动者Google为这个项目提供支持。Zynga、Google等大公司的工程师也参与到Cocos2D-HTML5的设计工作中,在各路高手的协作之下,Cocos2D-HTML5的技术方案和API设计正毫无疑问地朝着 大气、简洁的方向快速发展。

Cocos2D程序员可分为三类:苦逼程序员,把自己游戏针对iOS、 Android、Windows Phone三大主流平台分别用Objective-C、Java、C#移植一遍,不是熬夜换语言重写游戏逻辑,就是学习不同语言为熬夜移植做准备;普通程序员,采用C++,一次编码后争取最大限度地在iOS、Android、Windows 8 Metro之间复用;而作为后PC时代的文艺程序员,我认为跨全平台才是真的跨,配合Cocos2D-X JavaScript-binding,最终目标是能够实现Native App和Web Browser之间的轻松跨越。

图1 Cocos2D-HTML5游戏框架结构

下文就细致地介绍Cocos2D-HTML5引擎以及如何玩转它。

引擎的框架设计

Cocos2D-HTML5引擎框架的设计目标总结下来有两个,第一个目标是 “偷懒”,引擎运行目标平台是所有的平台,无论是PC浏览器还是移动浏览器,;第二个目标还是“偷懒”,兼容Cocos2D系列引擎,让已掌握开发要领的同学可以继续偷懒,让没有学过的同学可以轻松悟透、轻松入门、晋级。

在引擎的框架设计中,渲染层是Canvas或WebGL,如果浏览器支持WebGL,自动优先选择WebGL,运行速度会快一点,要是不支持也没关系,Canvas通过性能优化后,比起WebGL一点也不逊色。

区别于其他Cocos2D系列引擎设计,Cocos2D-HTML5引擎框架引入了Dom Menu的设计,浏览器支持多语言的优势得到了传承,开发者再也不用为游戏的多语言发愁了,再也不需要辛苦地到处找字库、贴图了,因为在引擎内已准备好了。值得注意的是,Dom实现的各项菜单还有各种动作和特效,甚至和Canvas可以实现互动,让开发者一点都感觉不到Dom的存在。

图2 UI Dom分层结构

引擎的API封装和使用介绍

框架设计得简洁明了,API当然也不能复杂,Cocos2D-HTML5在API的封装上,直观易懂,最大程度地保留原Cocos2D系列的API的使用习惯,保持发扬偷懒的风尚,使开发者可以在悟解框架之后轻松继续晋级。

在引擎的设计和开发中,采用的是John Resige类的继承方法,在使用上类似于C++,适合原有Cocos2D系列的游戏资源进行快速1:1移植,我们的目标是实现机械式翻译,因此期待自动翻译的工具出现。

当然,Cocos2D-HTML5引擎面向的是Web,引擎在高级API的封装上,根据JavaScript语言的特点重新进行封装,满足广大前端程序员、JavaScript开发者的使用习惯:Write less,do more。

API足够容易使用。在其代码仓库有专门的目录,其中为开发者准备了各种Demo,所有的引擎功能都有对应的test case展示其用法,开发者可以在这个基础上快速掌握各种功能和特效的使用,还有更简单的方式—直接拷贝组合应用于游戏开发中。

此外,引擎采用原生的JavaScript语言开发,可兼容其他成熟的JavaScript框架,开发者可以在引擎的基础上自由选用合适的框架,加速游戏的开发进度。

引擎的跨平台能力

在互联网领域,各个浏览器之间存在大量的标准和不兼容,引擎一定要将这种耗费无谓青春的行为扼杀。在引擎的设计中,通过浏览器能力检测和适配器模式,消除不同浏览器带来的运行环境的差异,兼容不同浏览器的事件处理,抹平不同浏览器之间的各个坑,让开发者能在平坦的道路上加速前进,快乐写代码。抹平了差异,再也不需要做重复无价值的工作,基于Cocos2D-HTML5开发的游戏终于可以轻松穿越操作系统运行在各浏览器上了。

采用Cocos2D-HTML5这类更高级语言引擎进行游戏开发,开发效率更高,加上丰富的工具集支持、实时的各种调试手段和云合作开发手段,更加直接的效果调校方式,完全没有开发环境依赖,各种优势的叠加,可以大幅度降低开发成本,提升游戏的上架速度。

如果觉得这样还不够,还有更好的选择,引擎的高级API和Cocos2D-X JavaScript-binding引擎API是相同的,同一份JavaScript游戏代码不用修改或者小范围修改,配合JavaScript-binding引擎就能以Hybrid的方式直接作为本地应用发布。

通过两种发布方式的结合,Cocos2D-HTML5可实现立体覆盖,通过它开发者就能以一个更快、更惬意的方式实现自己的想法。

引擎的性能

引擎通过一系列的优化措施,在设计之初就注重各项功能的实现和性能的有机结合,保证引擎在使用上没有各种性能上的短板。

目前引擎通过优化,运行起来已符合“复杂”游戏运行的性能要求。但不可否认,引擎采用的是脚本语言,且运行在浏览器这个特殊的环境中,引擎的效率相对于本地应用性能会低一些。

HTML5游戏引擎中,WebGL性能够强,可惜不是所有浏览器都能支持,要实现伟大的跨平台目标,引擎就必须兼容性能次之的Canvas。还好Canvas的表现还不错,经过优化,Canvas模式下引擎性能表现毫不逊色。

各项性能优化工作如图3、图4所示,如有更好的方案请不吝赐教。

图3 优化之前的TileMap测试例(4400个Tile 8.7帧)

首先,从逻辑层面和渲染层面相互配合,引入DirtyRegion的方法,利用少量的逻辑控制,在耗时最大的渲染环节,不该重画的部分坚决不画。通过优化,需要做的事情变少了,渲染效率高了,带来的更大利好是系统级别的省电,在移动设备上,这个优势会变得日益明显。

图4 优化之后的TileMap测试例(4400个Tile 60帧)

其次,引擎利用临时Canvas作为缓存,用来缓存需要大量渲染处理的图层中间结果,频繁使用时,直接复制,不需要经过繁琐的步骤获得。通过优化可提升渲染环节的处理效率,加速引擎在特定情景模式下的运行速度。

<

p >下面列举一个性能对比的例子:在进行优化之前,运行TileMap测试例,4400个Tile]
]>