以圆桌骑士为例浅尝HTML5游戏开发

随着XHTML的逐渐式微,Chrome,Safari,FireFox,Opera等现代浏览器正在积极完善HTML5实现,IE9也加入到标准的行列并将在今年上半年发布正式版,HTML5时代来临了。web

在各类HTML5特性中,最吸引人的莫过于canvas标签,其提供的绘图API将颠覆以往web表现力匮乏的形象。随着浏览器对canvas的广泛支持,利用canvas实现的web应用会出现爆发性的增加。json

 

本人尝试了使用canvas开发2d卷轴游戏,与你们分享。canvas

本文将不介绍canvas2d API的用法,若是想了解canvas2d API请访问:https://developer.mozilla.org/cn/Canvas_tutorial浏览器

可行×××网络

尝试制做的游戏是Knights of the Round 圆桌骑士。框架

圆桌骑士(knights of the round)是由CAPCOM公司于1991年推出的一款动做游戏,对应游戏平台为街机,游戏基板为CPS1。游戏操控性上,圆桌骑士也更为注重一招一式地砍杀感受,那种刀碰铠甲的感受至关曼妙。dom

如今的问题是,实现一个模拟器仍是手工复刻。编辑器

用JS制做CPS1模拟器,涉及到ROM解码,68000汇编等技术,此非能力所及故不可行。有能力的大牛不妨试试,如今已经有JS实现的NES模拟器了。最后选择了纯手工复刻。ide

下一个问题是帧率,60FPS仍是30FPS?显而易见,60比30更有表现力,视觉感觉更流畅。工具

CPS1的帧频是60FPS,要提升仿真度,帧频必须达到60。带来的问题是对性能的苛刻要求。

工欲善其事必先利其器

动做游戏的核心在于各类精灵的动做。

须要一种工具,可以方便的建立,编辑,精灵所须要的帧与动做。

在写游戏以前,必须完成基础设施建设。为此开发了SpriteEditor工具,纯JS开发,利用dataURIscheme与图片另存为功能保存json格式的精灵配置文件。

 

精灵编辑器

使用编辑器的好处是能以可视化的方式管理精灵帧,动做与断定区。另外一种解决方案是使用规则的图片,在程序中生成维护帧和动做。这种方式与资源图片耦合较高,不方便维护。扩展性也有限,例如某几个动做须要同一帧,只好在连续图片中重复,产生没必要要的冗余帧。利用编辑器能够方便解耦程序和图像资源,编辑器负责分析图片并产生配置文件,游戏程序负责解读配置文件并还原,利于团队协做。

游戏系统结构

 

典型游戏软件系统结构图

典型游戏软件系统结构相似MVC。游戏状态至关于Model,渲染器至关于View,控制器就是Controller了。仿真器介于Model和Controller之间,理解起来比较简单。

canvas效率与兼容性

canvas渲染效率很不错,在Chrome里分辨率384*224能够轻松跑到200帧/每秒以上。不过拉伸后效率降低较严重。IE9得益于强大的硬件加速,即便放大10倍,帧率也不低于60。相比之下其余浏览器惨不忍睹,帧数不到两位数。Chrome开发版开启硬件加速反而变慢了。

比较杯具的是canvas仍存在兼容问题:

IE9 beta目前还不支持globalCompositeOperation
其余浏览器的globalCompositeOperation 效果也不是彻底一致。
Opera的save和restore与其余浏览器不一致。

IE9 canvas若是使用了drawImage再调用toDataURL会致使浏览器崩溃等等。

 

globalCompositeOperation兼容状况 ,IE9beta不支持。(其中截图来自网络)

游戏优化

考虑使用多个canvas分层渲染,避免屡次渲染相同部分,但分层的粒度要把握好,若是canvas过多在dom上的开销可能超过收益。

考虑使用脏矩形技术,只更新产生变化的区域。注意在不一样浏览器中收益不一样,甚至会产生负收益。

使用setInterval代替setTimeout效果较好。

避免给每一个精灵设置定时器,太多会形成队列阻塞。尝试在一个定时器中处理多个精灵动画。

避免给多个对象绑定事件监听,使用统一的事件代理。

总结与展望

虽然目前HTML5还存在很多问题,但仍值得期待:

  1. 缺乏成熟的开发框架和环境。
  2. 仍然存在较大的兼容性问题。
  3. 商业化难题,JS程序易被篡改,只能做为渲染终端。

这是一次使用新技术的探索与实践,但愿能以此抛砖引玉,创造出更有价值的应用。

 

相关文章
相关标签/搜索