1、HTML5 游戏开发实例分享,图像版权归CAPCOM公司所有。,目录,HTML5简介 使用HTML5技术开发游戏 总结与展望 Q&A,图像版权归CAPCOM公司所有。,HTML5简介,什么是HTML5？ HTML5有哪些优点和新特性？ HTML5能做些什么？,什么是HTML5？,HTML5是XHTML宣告失败后的新宠儿。 2006年，W3C承认他们在期待HTML迁移到XML方面过于乐观。 2009年，W3C停止了关于XHTML2.0的工作，并将资源转向HTML。 现在，标准专家们正把所有令人兴奋的、新的Web技术都塞进HTML5中。,HTML5有哪些优点和新特性？,减少了对外部插件的需求 (F
2、lash / SilverLight) 更优秀的错误处理。 更多取代脚本的标记，新元素和表单控件。 用于绘画的canvas元素。 用于媒体回放的video和audio元素。 对本地离线存储更好的支持。 Web Messaging，Web Workers，Web Socket ,HTML5能做些什么？,有如此多的新功能，应该做点什么了。 取代JS验证的表单？ 用更语义化的标签构建页面？ 还是实现一个即时聊天工具？ 嗯似乎还不够激动人心。 那么，使用canvas和audio做游戏吧！,使用HTML5技术开发游戏,可行性研究。 工欲善其事必先利其器。 游戏系统结构。 游戏细节的把握。 Canvas的
3、效率和兼容性。 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
4、 of the Round 圆桌骑士,模拟器 VS 手工复刻,用JS制作CPS1模拟器？ ROM解码 68000汇编 还是算了吧，弄不来。纯手工复刻？ 这个比较可行,10MHz VS 3GHz,CPS1s 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。 带来的问题是对性能的苛刻要求。,工欲善其事必先利其器,动作游戏的核心在于各种精
5、灵的动作。 需要一种工具，能够方便的创建，编辑，精灵所需要的帧与动作。 在写游戏之前，必须完成基础设施建设。为此开发了SpriteEditor工具，纯JS开发，利用data URI scheme 和图片另存为功能保存jsonp格式的精灵配置文件。,SpriteEditor,游戏系统结构,典型游戏软件系统结构图,圆桌骑士DEMO系统结构,Base,Sprite,Character,Game Controller,Game Driver,Resource Data,Resource Loader,Managers,Command Manager,Info Manager,Render Manage
6、r,Scroll Manager,Sound Manager,Sprite Manager,Stage Manger,Characters,Effects,Lancelot,Soldier,Effect,Info,入口,游戏细节的把握,每一个像素，每一帧，每个动作都力求与原作一致。 使用Winkawaks模拟器的截图工厂，配合Fireworks图形处理，以及SpriteEditor工具，打造出完美的游戏角色。 同样使用Winkawaks的音频录制功能，配合Goldwave音频处理软件，保持原汁原味。,Canvas的效率与兼容性,Canvas渲染的效率很不错，在Chrome里分辨率384*224
7、轻松跑到200帧以上。不过拉伸后效率下降较严重。 值得一提的是IE9，得益于强大的硬件加速，即使放大10倍以上，帧率也不低于60。相比之下其他浏览器惨不忍睹，帧数不到两位数。 Chrome开发版开启硬件加速反而变慢了。,Canvas的效率与兼容性,比较杯具的是canvas同样存在兼容问题。 例如： IE9 beta还不支持globalCompositeOperation 其他浏览器的globalCompositeOperation 效果也不是完全一致。 Opera的save和restore与其他浏览器不一致。 IE9不支持canvas的toDataURL方法，如果调用会导致浏览器崩溃。,Can
8、vas的效率与兼容性,Chrome,Opera,Firefox,Safari,globalCompositeOperation兼容情况,IE9尚未支持。,Audio的效率与兼容性,说到Audio，更加杯具的事实。 API少得可怜，只能播放，暂停，调节音量，Seeking和其他基本功能。 不能改变音调，调整播放速度，多声道控制，也不能进行流处理，不能指定播放某一段落，总之你想干的事情都不行。 各浏览器支持的音频格式也不尽相同。,Audio的效率与兼容性,Firefox还不支持loop循环播放属性。 Chrome在密集调用play，pause或设置currentTime时会导致延迟，甚至浏览器崩溃
9、。 Safari不支持脚本化的audio，如果使用脚本创建audio标签将无法正常工作。,Audio的效率与兼容性,较早的音频格式支持情况,目前IE9已支持MP3格式，仍不支持Ogg。,游戏优化,如何实现高帧频？迭代渲染使用setInterval，不使用setTimeout。 动画的实现方法比较。避免给每个精灵设置定时器，可能造成队列阻塞，效率低下。尝试在一个统一的定时器中处理多个精灵动画。 避免给多个对象绑定事件监听，尝试使用统一的事件代理。,存在的问题,有许多过程没有抽象出来，硬编码比较多。 耦合性较高，在对象间的交互中知道太多对方的细节。 将进行重构，运用更合理的设计模式。 需要开发更完善的辅助工具。,总结与展望,目前HTML5还相当不成熟，但仍值得期待。 缺少成熟的开发框架和环境。 仍然存在较大的兼容性问题。 商业化难题，JS程序易被篡改，只能作为渲染终端。这是一次新技术的探索与实践，希望能以此抛砖引玉，一起来尝试新技术，开拓思维，创造更有价值的应用。,Q & A,Thanks!,最后附上圆桌骑士复刻项目地址： http:/
