html5及css3开发性能问题
现在html5被炒的很火,特别是chrome的版本不断更新,越来越多的css3属性的支持。到目前为止确实可以使用css3+html5制作出可以媲美桌面应用的web应用了。除了IE的兼容性问题,其它浏览器基本上已实现W3C所制定的那套东西,当然chrome中其中表现最好的一个浏览器,想用html5开发应用,要么逼客户使用chrome或firefox浏览器,要么用开源的webkit自己封装一个客户端环境。后者就是我们公司采用的方案
前段时间为公司开发了一个基于html5+css3为前端基础的游戏,名叫"农夫乐园",类似于QQ的玫瑰小镇,不同的是我们的游戏是用html5+css3实现的,而QQ的玫瑰小镇是以flash as 实现的。
农夫乐园是以客户端方式运行在桌面,前端web包含在了webkit中,而webkit又嵌在了一个C++客户端中,所以可以完全使用html5+css3技术而不用考虑兼容性。而且这样的方式嵌入桌面,JS还可以和c++进行通信,实现JS拥有操作系统API的功能。
农夫乐园已经第一期已经上线,在边锋游戏大厅和游戏茶苑客户端中都可以玩,还有快播的快玩游戏平台中的棋牌游戏下的农夫乐园也有。
由于开发周期较短,只有2周,所以架构上比较急,很多功能也是临时加的。
开发过程中才发现CSS3的性能真的不咋的,多几个translate的动画做位移画面就卡的很。在测试机上2G内存,core双核的台式机上15个css3位置动画同时运动的话cpu就达到50%以上。反而使用js实现的movieclip动画帧效率更高。所以游戏中减少了很多的css3动画,希望后期的浏览器对css3动画支持效率更好吧。
游戏中并未采用canvas来实现,因为canvas在布局方面还是很麻烦的。所以整个游戏都是dom+css3+js来实现游戏布局及相关交互
由于其它项目都很急所以农夫乐园2期的开发也排在了很后面。后期由于要实现比较多的动画效果所以还是要考虑canvas来实现动画,虽然布局上会花掉不少心思。但为了动画性能,没有办法,canvas上绘制来实现动画效率还行,除了粒子特效之类的性能不如flash as3,其它方面的性能还是可以的