HTML5游戏开发实例分享-百度

HTML5 游戏开发实例分享

Baidu Space 团队

图像版权归CAPCOM公司所有。

罗睿

luorui@http://www.77cn.com.cn 12/16/2010

我是IE9

我是Chrome8

目录

HTML5简介 使用HTML5技术开发游戏 总结与展望 Q&A

图像版权归CAPCOM公司所有。

HTML5简介

什么是HTML5？ HTML5有哪些优点和新特性？ HTML5能做些什么？

什么是HTML5？

HTML5是XHTML宣告失败后的新宠儿。 2006年，W3C承认他们在期待HTML迁移到 XML方面过于乐观。 2009年，W3C停止了关于XHTML2.0的工作， 并将资源转向HTML。

现在，标准专家们正把所有令人兴奋的、新 的Web技术都塞进HTML5中。

HTML5有哪些优点和新特性？

减少了对外部插件的需求 (Flash / SilverLight) 更优秀的错误处理。 更多取代脚本的标记，新元素和表单控件。 用于绘画的canvas元素。 用于媒体回放的video和audio元素。 对本地离线存储更好的支持。 Web Messaging，Web Workers，Web Socket ……

HTML5能做些什么？

有如此多的新功能，应该做点什么了。 取代JS验证的表单？ 用更语义化的标签构建页面？ 还是实现一个即时聊天工具？ 嗯……似乎还不够激动人心。

那么，使用canvas和audio做游戏吧！

使用HTML5技术开发游戏

可行性研究。 工欲善其事必先利其器。 游戏系统结构。 游戏细节的把握。 Canvas的效率和兼容性。 Audio的效率和兼容性。 游戏优化。 存在的问题。

可行性研究

俄罗斯方块，吃豆子还是别的什么? Knights of the Round 圆桌骑士。 模拟器 VS 手工复刻。 10MHz VS 3GHz 60FPS VS 30FPS

俄罗斯方块，吃豆子还是别的什么?

WOW! 真酷！

Knights of the Round 圆桌骑士

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

Knights of the Round 圆桌骑士

模拟器 VS 手工复刻

用JS制作CPS1模拟器？

– ROM解码 – 68000汇编 – ……还是算了吧，弄不来。

纯手工复刻？

– 这个比较可行……

10MHz VS 3GHz

CPS1's Motorola 68000 (@ 10 MHz) CPU and graphics IC

Intel Core i7 1.6 GHz to 3.33 GHz

60FPS VS 30FPS

显而易见，60FPS 比 30FPS更有表现力，视 觉感受更流畅。 CPS1的帧频是60FPS，要提高仿真度，帧频 必须达到60。 带来的问题是对性能的苛刻要求。

工欲善其事必先利其器

动作游戏的核心在于各种精灵的动作。

需要一种工具，能够方便的创建，编辑， 精灵所需要的帧与动作。

在写游戏之前，必须完成基础设施建设。 为此开发了SpriteEditor工具，纯