真正实现一次开发,跨平台运行——解构HTML5游戏引擎X-Canvas

shutterstock_238275508

由于具备一次开发、多平台运行的特性,所以HTML5作为一个标准技术和规范能够帮助开发者减少在适配上所耗费的人力、物力和时间成本。但由于其性能和标准化问题,HTML5在应用层面迟迟未能落地。移动游戏上当今离钱最近的移动开发领域,同时也对各方面的性能有极高的要求正因如此,所以倘若HTML5技术能在移动页游市场取得成绩,将对整个HTML5开发带来深远的影响。早在2012年6月,著名游戏引擎Cocos2D就开发出了基于HTML5规范集的Cocos2D-HTML5,并在此后完成了捕鱼达人HTML5版的移植,但以往浏览器的渲染工作主要依靠CPU来进行,动画效果、图形渲染、特效处理却需要依靠GPU充分发挥硬件特性,所以离人们期望的效果还有一些距离。最近,Opera和UC优视这两家移动浏览器厂商分别推出了基于硬件加速的HTML5游戏引擎Sphinx(基于Presto)和X-Canvas,毫无疑问,这能够帮助HTML5游戏开发上升到一个新的高度。于是,我邀请UC优视游戏研发部的徐俊峰,请他从性能、开发者支持和商业化模式三个方面对X-Canvas进行了解读,他告诉我,快速流畅的体验、100%HTML5跨平台解决方案以及端和页双发行策略是X-CANVAS的三个特色。

4.25.23

快速流畅的体验来自X-Canvas引以为傲的3大组件:HTML5加速引擎、JS游戏框架和JS物理引擎。

 HTML5加速引擎:是一个使用OpenGL硬件加速实现的HTML5的运行环境,提供了100%标准的Canvas和JavaScript接口。将资源更新、内存管理、多线程做了内部管理和优化。目前X-Canvas完全支持OpenGLES,HTML5加速引擎会自动适配,选择最佳方案。

JS游戏框架:HTML5的Canvas接口是简单的,并不满足快速开发的需求,X-Canvas提供了可选的JS游戏框架,目前UC支持create js、quarkjs、box2djs。提供诸如MovieClip、Bitmap,Container等API,让开发JavaScript就像开发Flash一样。

JS物理引擎:很多游戏都需要物理碰撞引擎,X-Canvas提供了一个Box2D的版本,希望将简单、高效进行到底。

徐俊峰认为,提供了100%的JavaScript开发接口,经过OpenGL硬件加速的Canvas渲染引擎,能够让开发者用开发Web的成本而得到原生App的流畅体验,目前X-Canvas引擎可以保持 30-60帧速(FPS)的情况下跑1000个精灵数(sprites)。

X-Canvas引擎具备极好的跨平台性,可以支持iOS、Android、Windows Phone 8和浏览器。在开发过程中,游戏开发者在以前的技术基础上可以很快的把原来的游戏开发转换到引擎架构下;开发完成后,不仅可以通过X-Canvas把游戏打包成App,通过应用商店发行,而且能在UC页游平台上通过插件在浏览器上直接进行调用。UC会对通过九游、HTML5应用商店对其进行支撑,帮组开发者有效发行。

为了推进X-Canvas的发展,UC会对开发者提供一些专业服务:在提供健全的中文API文档和DEMO之外,他们愿意提供团队对采用这个引擎开发的项目从前期介入,在开发各个流程中进行全方位支持。同时也可能定期地,针对X-Canvas的技术特点、特性举办开发者沙龙和讲座,及时搜集开发者反馈,帮助X-Canvas一步改进。

可能一些做游戏开发者更关心技术细节,我收集了一些问题请徐俊峰为开发者解答,罗列如下。

音效的使用和控制

目前使用的Media Player解决方案,支持的格式有Mp3/Ogg/Wav/3gp等。每个声音实例都可以独立控制1. 暂停、恢复和停止 2. 控制音量大小、静音 3. 对声音进行事件控制等。

后期会支持骨骼动画和配套工具吗?

目前已经支持骨骼动画,可以配合Flash CS使用。我们已经在开发对应的教程,敬请期待。

是否有粒子系统,和附带的粒子编辑器,粒子配置表兼容什么样的格式?

粒子系统目前在JS游戏框架的第一个版中暂未提供,我们会尽快支持。如果等不及的开发者可以使用一些第三方JS解决方案或者自行开发。

颜色的混合和单个图像精灵RGBA的调整方案?

X-Canvas提供了JS游戏框架(createjs),一套类FlashAPI的解决方案。提供一系列的Filter,如AlphaMapFilter/AlphaMaskFilter/BoxBlurFilter等。

.27.56

对动画的支持,是否支持压缩纹理集?支持什么软件什么格式导出的纹理集?如何去管理纹理集与配置表?

X-Canvas的JS游戏框架(createjs)是支持由Flash CS导出动画。

例如导出了一个Bubble的MovieClip,除了导出对应的资源文件,还有JS库,如下:

4.28.06

使用时,我们可以在需要的地方使用这个Bubble类。

4.28.12

另外,createjs还支持BitmapAnimation,可以使用TexturePacker导出资源。

28.18

 注:文章配图来自网络

订阅更多文章