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

标签: 前端技术 编程技术 canvas html5 IE9 | 发表时间:2011-06-23 18:25 | 作者:editor never-online
出处:http://stblog.baidu-tech.com

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

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

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

本文将不介绍canvas2d API的用法,如果想了解canvas2d API请访问:https://developer.mozilla.org/cn/Canvas_tutorial

可行性研究

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

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

现在的问题是,实现一个模拟器还是手工复刻。

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

下一个问题是帧率,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程序易被篡改,只能作为渲染终端。

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

相关 [圆桌骑士 html5 游戏开发] 推荐:

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

- never-online - 搜索研发部官方博客
随着XHTML的逐渐式微,Chrome,Safari,FireFox,Opera等现代浏览器正在积极完善HTML5实现,IE9也加入到标准的行列并将在今年上半年发布正式版,HTML5时代来临了. 在各种HTML5特性中,最吸引人的莫过于canvas标签,其提供的绘图API将颠覆以往web表现力匮乏的形象.

HTML5游戏开发工具推荐:IMPACT

- iDesperadO - HTML5研究小组
Impact 是一个 JavaScript 游戏引擎,可以为桌面和手机浏览器开发令人惊叹的 HTML5 游戏. 我已经试过了四个其他 JavaScript 游戏引擎,这是我用过的第一个比较有意义的(……)Impact 是市场上第一个真正专业级的 JavaScript 和 HTML5 游戏引擎. ——《Game Developer Magazine》,2011年5月.

游戏开发商开源HTML5游戏

- - Solidot
游戏工作室Wooga开源了其开发的HTML5游戏Pocket Island,源代码托管在GitHub上,该公司在官方博客上介绍了他们的开发经验,认为HTML5游戏有潜力,但尚未做好准备,开源的意图将是让其他人了解他们的工作,学习和改进. Wooga认为,2012年也许不是HTML5的黄金时代,但它的黄金时代即将到来.

HTML5游戏开发的5条最佳实践

- - HTML5研究小组
HTML5很棒,因为它几乎无所不能——它并不是为某种特殊的应用设计的. 更重要的是,HTML5几乎是无处不在的. 它就在你的PC机上、你的手机上、你的平板设备上——它甚至可能就在你的厨房电器上. 正是由于HTML5具有丰富的功能并且无处不在,所以它给开发者带来了很多的灵感. 俗话说得好,“一旦开发者有了灵感,他们就开始编写游戏了.

HTML5游戏开发之将Easel.js和Box2d在画布中结合起来

- - Web App Trend
开发HTML5游戏 Luxahoy时遇到的比较大的困难之一是:如何将Easel.js和Box2d这两个框架结合起来. 在本指南中我们将介绍基本的actor对象,让大家学会如何将box2d中的尺寸转换成easel中的x、y坐标以及旋转参数. 要想学习本指南,你应该具备box2d和easel的基本知识,知道它们是如何工作的.

游戏开发的51条军规

- 章明 - 互联网的那点事
Struan Robertson在gamesbrief中撰文讲述了他在游戏开发的51条经验:. 预留20%时间修改Bug以确保完美. 记住游戏发布的时间和期限把这件事放在心上,给自己一个开始修改的deadline. 怀着“我能弄出伟大的游戏”的心态开始每一个项目. 以在预定的时间和预算内完成项目为终极目标.

游戏开发者评微软Surface

- - CocoaChina移动观察
6月19日,微软揭开了携Surface进军平板市场的计划,这一全新平台将会把人体工程学设计的移动设备与笔记本功能性融合于一体. 据微软说,由Windows 8(以及Window RT)驱动的Surface将会为应用和游戏提供许多令人兴奋的机遇. 然而游戏开发者也是这样看的吗. 为此,我们在采访了业界的众多的开发者,而他们的第一印象显然是各不相同,不少开发者对这款设备的核心功能设定表示了担忧.

一份游戏开发学习路线

- -
认真学完 C++ Primer 是否有能力写个小游戏. 读完  C++ Primer,不在开发环境中写代码练习,还是啥也写不出来. 读完 C++ Primer, 同时把书中的习题和例子在开发环境中操作练习,但是不了解 Windows API 或者 QT,MFC  等框架或者其他图形库,或许就只能写出控制台小游戏.

让游戏开发变得简单高效:Unity如何搭建起自己的游戏开发生态系统?

- - PingWest中文网
Unity 3D作为一款性能卓越的引擎,已经踏出游戏的范畴,开始在更广泛的领域被得到运用. Unity的创始人兼CEO David Helgason说,Unity是开发分工上的一个环节,他把Unity看作由数万家公司组成的社区——不仅是有他们开发的Unity,还有整个Unity Asset Store中围绕Unity开发的众多辅助性工具和扩展功能,这些在Unity上生长出的开发工具们,能为开发者节约大量的开发时间与成本.