2024年-HTML游戏开发实例分享百度学习课件

HTML5游戏开发实例分享罗睿BaiduSpace团队luorui@12/16/2010图像版权归CAPCOM公司所有。我是IE9我是Chrome812024/5/10目录HTML5简介使用HTML5技术开发游戏总结与展望Q&A图像版权归CAPCOM公司所有。22024/5/10HTML5简介什么是HTML5？HTML5有哪些优点和新特性？HTML5能做些什么？32024/5/10什么是HTML5？HTML5是XHTML宣告失败后的新宠儿。2006年，W3C承认他们在期待HTML迁移到XML方面过于乐观。2009年，W3C停止了关于XHTML2.0的工作，并将资源转向HTML。现在，标准专家们正把所有令人兴奋的、新的Web技术都塞进HTML5中。42024/5/10HTML5有哪些优点和新特性？减少了对外部插件的需求(Flash/SilverLight)更优秀的错误处理。更多取代脚本的标记，新元素和表单控件。用于绘画的canvas元素。用于媒体回放的video和audio元素。对本地离线存储更好的支持。WebMessaging，WebWorkers，WebSocket……52024/5/10HTML5能做些什么？有如此多的新功能，应该做点什么了。取代JS验证的表单？

用更语义化的标签构建页面？

还是实现一个即时聊天工具？嗯……似乎还不够激动人心。

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

62024/5/10使用HTML5技术开发游戏可行性研究。工欲善其事必先利其器。游戏系统结构。游戏细节的把握。Canvas的效率和兼容性。Audio的效率和兼容性。游戏优化。存在的问题。72024/5/10可行性研究俄罗斯方块，吃豆子还是别的什么?KnightsoftheRound圆桌骑士。模拟器VS手工复刻。10MHzVS3GHz60FPSVS30FPS82024/5/10俄罗斯方块，吃豆子还是别的什么?WOW!真酷！92024/5/10KnightsoftheRound圆桌骑士圆桌骑士（knightsoftheround）是由CAPCOM公司于1991年推出的一款动作游戏，对应游戏平台为街机，游戏基板为CPS1。游戏操控性上，圆桌骑士也更为注重一招一式地砍杀感觉，那种刀碰铠甲的感觉相当曼妙。102024/5/10KnightsoftheRound圆桌骑士112024/5/10模拟器VS手工复刻用JS制作CPS1模拟器？ROM解码68000汇编……还是算了吧，弄不来。纯手工复刻？这个比较可行……122024/5/1010MHzVS3GHzCPS1'sMotorola68000(@10MHz)CPUandgraphicsICIntelCorei7

1.6

GHz

to3.33

GHz

132024/5/1060FPSVS30FPS显而易见，60FPS比30FPS更有表现力，视觉感受更流畅。CPS1的帧频是60FPS，要提高仿真度，帧频必须达到60。带来的问题是对性能的苛刻要求。142024/5/10工欲善其事必先利其器动作游戏的核心在于各种精灵的动作。需要一种工具，能够方便的创建，编辑，精灵所需要的帧与动作。在写游戏之前，必须完成基础设施建设。为此开发了SpriteEditor工具，纯JS开发，利用dataURIscheme和图片另存为功能保存jsonp格式的精灵配置文件。152024/5/10SpriteEditor162024/5/10游戏系统结构典型游戏软件系统结构图游戏状态仿真器渲染器控制器更新信息信息信息行动172024/5/10圆桌骑士DEMO系统结构BaseSpriteCharacterGame

ControllerGame

DriverResource

DataResource

LoaderManagersCommand

ManagerInfo

ManagerRender

ManagerScroll

ManagerSound

ManagerSprite

ManagerStage

MangerCharactersEffectsLancelotSoldier……EffectInfo……入口182024/5/10游戏细节的把握每一个像素，每一帧，每个动作都力求与原作一致。使用Winkawaks模拟器的截图工厂，配合Fireworks图形处理，以及SpriteEditor工具，打造出完美的游戏角色。同样使用Winkawaks的音频录制功能，配合Goldwave音频处理软件，保持原汁原味。192024/5/10Canvas的效率与兼容性Canvas渲染的效率很不错，在Chrome里分辨率384*224轻松跑到200帧以上。不过拉伸后效率下降较严重。值得一提的是IE9，得益于强大的硬件加速，即使放大10倍以上，帧率也不低于60。相比之下其他浏览器惨不忍睹，帧数不到两位数。Chrome开发版开启硬件加速反而变慢了。202024/5/10Canvas的效率与兼容性比较杯具的是canvas同样存在兼容问题。例如：

IE9beta还不支持globalCompositeOperation

其他浏览器的globalCompositeOperation效果也不是完全一致。

Opera的save和restore与其他浏览器不一致。IE9不支持canvas的toDataURL方法，如果调用会导致浏览器崩溃。212024/5/10Canvas的效率与兼容性ChromeOperaFirefoxSafariglobalCompositeOperation兼容情况IE9尚未支持。222024/5/10Audio的效率与兼容性说到Audio，更加杯具的事实。API少得可怜，只能播放，暂停，调节音量，Seeking和其他基本功能。不能改变音调，调整播放速度，多声道控制，也不能进行流处理，不能指定播放某一段落，总之你想干的事情都不行。各浏览器支持的音频格式也不尽相同。232024/5/10Audio的效率与兼容性Firefox还不支持loop循环播放属性。Chrome在密集调用play，pause或设置currentTime时会导致延迟，甚至浏览器崩溃。Safari不支持脚本化的audio，如果使用脚本创建audio标签将无法正常工作。242024/5/10Audio的效率与兼容性较早的音频格式支持情况目前IE9已支持MP3格式，仍不支持Ogg。252024/5/10游戏优化如何实现高帧频？迭代渲染使用setInterval，不使用setTimeout。动画的实现方法比较。避免给每个精灵设置定时器，可能造成队列阻塞，效率低下。尝试在一个统一的定时器中处理多个精灵动画。避免给多个对象绑定事件监听，尝试使用统一的事件代理。262024/5/10存在的问题有许多过程没有抽象出来，硬编码比较多。耦合性较高，在对象间的交互中知道太多对方的细节。将进行重构，运用更合理的设计模式。需要开发更完善的辅助工具。272024/5/10总结与展望目前HTML5还相当不成熟，但仍值得期待。缺少成熟的开发框架和环境。仍然存在较大