HTML5游戏开发实例-百度.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,HTML5游戏开发实例-百度,目录,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,CPS1s Motorola 68000(10 MHz)CPU and graphics IC,Intel Core i7 1.6GHzto 3.33GHz,60FPS VS 30FPS,显而易见，,60FPS,比,30FPS,更有表现力，视觉感受更流畅。,CPS1,的帧频是,60FPS,，要提高仿真度，帧频必须达到,60,。,带来的问题是对性能的苛刻要求。,工欲善其事必先利其器,动作游戏的核心在于各种精灵的动作。,需要一种工具，能够方便的创建，编辑，精灵所需要的帧与动作。,在写游戏之前，必须完成基础设施建设。为此开发了,SpriteEditor,工具，纯,JS,开发，利用,data URI scheme,和图片另存为功能保存,jsonp,格式的精灵配置文件。,SpriteEditor,游戏,系统结构,典型游戏软件系统结构图,游戏状态,仿真器,渲染器,控制器,更新,信息,信息,信息,行动,圆桌骑士,DEMO,系统结构,Base,Sprite,Character,GameController,GameDriver,ResourceData,ResourceLoader,Managers,CommandManager,InfoManager,RenderManager,ScrollManager,SoundManager,SpriteManager,StageManger,Characters,Effects,Lancelot,Soldier,Effect,Info,入口,游戏细节,的把握,每一个像素，每一帧，每个动作都力求与原作一致。,使用,Winkawaks,模拟器的截图工厂，配合Fireworks,图形处理，以及,SpriteEditor,工具，打造出完美的游戏角色。,同样使用,Winkawaks,的音频录制功能，配合,Goldwave,音频处理软件，保持原汁原味。,Canvas,的效率与,兼容性,Canvas,渲染的效率很不错，在,Chrome,里分辨率,384*224,轻松跑到,200,帧以上。不过拉伸后效率下降较严重。,值得一提的是,IE9,，得益于强大的硬件加速，即使放大,10,倍以上，帧率也不低于,60,。相比之下其他浏览器惨不忍睹，帧数不到两位数。,Chrome,开发版开启硬件加速反而变慢了。,Canvas,的效率与,兼容性,比较杯具的是,canvas,同样存在兼容问题。,例如：,IE9 beta,还不支持,globalCompositeOperation,其他浏览器的,globalCompositeOperation,效果也不是完全一致。,Opera,的,save,和,restore,与其他浏览器不一致。,IE9,不支持,canvas,的,toDataURL,方法，如果调用会导致浏览器崩溃。,Canvas,的效率与,兼容性,Chrome,Opera,Firefox,Safari,globalCompositeOperation,兼容情况,IE9,尚未支持。,Audio,的效率与,兼容性,说到,Audio,，更加杯具的事实。,API,少得可怜只能播放，暂停，调节音量，,Seeking,和其他基本功能。,不能改变音调，调整播放速度，多声道控制，也不能进行流处理，不能指定播放某一段落，总之你想干的事情都不行。,各浏览器支持的音频格式也不尽相同。,Audio,的效率与,兼容性,Firefox,还不支持,loop,循环播放属性。,Chrome,在密集调用,play,，,pause,或设置,currentTime,时会导致延迟，甚至浏览器崩溃。,Safari,不支持脚本化的,audio,，如果使用脚本创建,audio,标签将无法正常工作。,Audio,的效率与,兼容性,较早的音频格式支持情况,目前,IE9,已支持,MP3,格式，仍不支持,Ogg,。,游戏,优化,如何实现高帧频？迭代渲染使用,setInterval,，不使用,setTimeout,。,动画的实现方法比较。避免给每个精灵设置定时器，可能造成队列阻塞，效率低下。尝试在一个统一的定时器中处理多个精灵动画。,避免给多个对象绑定事件监听，尝试使用统一的事件代理。,存在的问题,有许多过程没有抽象出来，硬编码比较多。,耦合性较高，在对象间的交互中知道太多对方的细节。,将进行重构，运用更合理的设计模式。,需要开发更完善的辅助工具。,总结与展望,目前,HTML5,还相当不成熟，但仍值得期待。,缺少成熟的开发框架和环境。,仍然存在较大的兼容性问题。,商业化难题，,JS,程序易被篡改，只能作为渲染终端。,这是,一次新技术的探索与实践，希望能以此抛砖引玉，,一起来,尝试新技术，开拓思维，创造更有价值的应用。,Q&A,Thanks!,最后附上圆桌骑士复刻项目地址：,