HTML 5游戏开发的五个最佳实践
openkk 13年前
<p> 英文原文：<a href="/misc/goto?guid=4958334743574294523">Top 5 Best Practices for Building HTML5 Games…In Action!</a></p> <p> HTML5是伟大的，因为它多才多艺的 - 它没有具体针对单一的平台.更重要的是,HTML5是无所不在的. 就我所知的，它在你的 PC 上，你的手机上，你的平板设备上，甚至在你的厨房电器上. </p> <p> 就凭 HTML5-多才多艺和无所不在这两个特点 -- 不辩自明， 为什么众多的开发者们备受鼓舞. 然，众所周知，"一旦开发者们被激发了灵感，他们常常会编写游戏."(好吧，可能只是我做了.)</p> <p> 幸运的是，有关 HTML5 游戏开发的文章比比皆是. 然而， 在你打算使用 HTML5 编写游戏之前， 我不得不给你一些建议.</p> <p> 你能从本文中学习到什么? 我將提及 HTML5 游戏开发框架， 怎样通过支持智能手机和手持设备使受众更广泛， 怎样管理游戏状态， 怎样解决性能问题， 怎样支持大多数浏览器平台.</p> <p> 因此，直奔主题，这里有 5 个创建 HTML5 游戏的最佳实践，实战!("实战"增加了戏剧效果)</p> <p> <strong>最佳实践 #1:使用框架 </strong></p> <p> 编写简单游戏在 HTML5 中是很容易的，但是当你押宝在 HTML5 上，你就需要做更多的准备，确保游戏顺利运行.</p> <p> 例如，当你使用了很多的图片，声音效果，和其它的资源，它们会花费一些时间等待浏览器从服务器下载. 如果在编写游戏时， 你不把它放在心上， 你会焦头烂额. 因为图片和声音文件是异步加载的，你的 JavaScript 代码会在资源全部加载完成前执行.这常常导致"popping"(图片不可用)，声音效果在需要时不播放. 好的修正方法是创建一个预加载器，延后脚本代码的执行，直到所有的资源都下载完毕为止. </p> <p> 另一个问题是，你很可能想在不同的机器和/或不同的浏览器，以不同的速度运行你的游戏. 对此， 当你没有更多做为的时候，你仍要确保动画和移动速帧独立于游戏运行平台. </p> <p> 实际上， 每个游戏都很多功能性的样板代码. 幸运的是， 你不必自己从头编写. 有很多框架让你仅关注游戏逻辑， 而不是去担心这些琐碎(和大)的事， 确保你的游戏顺利运行. </p> <p> 使用框架唯一需要注意的是， 你有太多选择. 像 ImpactJS 框架， 皆在帮助开发游戏的方方面面， 而像 EaseJS 框架主要关注图形处理. 最后还是由你来挑选你认为最舒服的框架. 这些可能让人摸不着头脑， 但在 JavaScript 世界， 确定了框架往往意味着确定了编程风格.</p> <div class="cnblogs_code"> <pre> ig.module ( 'monster' ) .requires ( 'impact.game', ) .defines (<span style="color:#0000ff;">function</span>(){ Monster = ig.Entity.extend ({ eyes: 42 }); });</pre> </div> <p> 一个好例子是 ImpactJS, 它不仅提供图形显示的抽象或播放声音效果， 也织入了自定义对象和继承模型，如上所示.</p> <p style="text-align:center;"><a target="_blank"><img alt="HTML 5游戏开发的五个最佳实践" src="https://simg.open-open.com/show/6e40e3b8971638eb8fd9bede509793af.jpg" width="350" height="263" /></a></p> <p> <em> Ascend Arcade delivered three games in three months using the ImpactJS framework. </em></p> <p> 尽管有很多的 HTML5 游戏现在依赖于某种形式的框架， 很多开发者仍然坚持一路颠簸， 试图重新构建一切. 然而这可能是一个好的学习经验， 但如果你想在合理的时间完成， 使用框架是正确的方法. 一个好的例子是， Ascended Arcade 使用 ImpactJS 框架， 在三个月中发布了三款有意思的(有些受到好评)游戏.</p> <p> <strong>最佳实践 #2: 认真考虑小的和触摸屏的设备 </strong></p> <p> 可能 HTML5 的销售卖点之一是，它可以工作于桌面 PC, 手持电脑甚至智能手机.(如果你还没有看过 Windows Phone 7 Mango 上运行的 IE9, 看看这个<a href="/misc/goto?guid=4958334744389885496" rel="nofollow" target="_blank">视频</a>). </p> <p> 跨平台(take that,Webster's 字典!)特性是 HTML5 与身俱来的， 常常只需付出少量的额外工作便可做到. 然而， 有几个你需要认真考虑的事情... </p> <p> 首先也是最重要的， 屏幕尺寸可能在不同设备中区别很大. 如果想让你的 HTML5 游戏在移动设备上运行良好，你要么确保它们支持多个分辨率，要么不超过 WVGA 框架大小 800x480. </p> <p> 纵然这样，既然大多数移动设备缺乏一次渲染整个网页的能力， 采用先进的缩放和平移技术编写游戏可能会适得其反. 这可以通过 viewport 标记关闭.下面的代码片段將使游戏窗口占满可用的横向屏幕. 设置属性"user-scaleable"为"no"告知手机浏览器禁用平移， 否则常常会导致手指控制游戏的冲突.</p> <pre><meta name="Viewport" content="width=device-width; user-scaleable=no; initial-scale=1.0" /></pre> <p></p> <p> 就算游戏在小屏幕设备上渲染没问题， 你也应该停下来思考一下输入问题. 大多数仅支持触摸式的设备拥有个虚拟键盘，他们可能会占用太多屏幕空间来控制游戏角色. 如果严格的触摸式输入出了问题， 你应该创建一个受限的虚拟键盘，仅仅创建游戏需要的按钮(如方向键). 然而，最好的做法是控制你的游戏，不需要额外的屏幕元素. 一个很好的例子是 Spy Chase 游戏，你用一个手指控制自动车(一些你不可能在实际生活中尝试的东西). </p> <p> <strong>最佳实践 #3:自动保存玩家进度</strong></p> <p> 像 site pinning 特性， 试图给 web 浏览器 web 应用程序和常规的桌面应用同样的地位. 然而， 作为应用程序运行的网站想法太新了， 网页要维持客户端状态. 关闭 Microsoft Word 前，你可能会三思后行， 但是可能不会对于一个开放的网页谨慎行事.大部分时间， 它不是问题 --- 大多数网页要嘛是无状态的， 要嘛是在服务器上维护记录你的信息. </p> <p> 然而， 浏览器游戏， 是非常不同的小怪兽. 既然 JavaScript 代码运行在客户端， HTML5 游戏状态通常都保持在瞬时内存中(又称 RAM).关闭游戏器窗口，你辛苦赚取的积分就付之东流了. </p> <p> 现在， 你可能会认为， 一个明智的用户会足够谨慎， 他们连续玩了 8 小时， 不关闭游戏. 但事故常有发生， 特别是当打开了多个选项卡或突然断电.</p> <p> 一言蔽之: 当编写 HTML5 游戏的时候， 绝对的最佳实践是定期保持玩家进度， 允许玩家恢复上一次关闭网页时的状态.</p> <p> 现在，你应在哪保存玩家的进度呢?过去，显而易见的地方是服务器端或浏览器 cookie. 两个解决方案都不是特别有吸引力. 服务器端方案， HTTP 请求不得不每次构造需要存储或取回的信息. 使用 cookie 的方案， 你的空间就非常有限了， cookie 的可用空间大大依赖于浏览器配置.</p> <p> 更好的可行方案是使用 HTML5 DOM storage. DOM storage 通过一个接口， 让你为每个网站保存几兆的数据， 它类似于一个 key-value 存储(或者一个 JavaScript expando 对象). 这非常方便，但在 HTML5 游戏上下文中， 你也可能需要记住复杂的数据结构 --- 一些 DOM storage 非原生支持的结构. </p> <p> 幸运的是，现代的 JavaScript 引擎都有内建的机制， 將对象序列化成紧凑的结构，如 JSON. 使用这种方案， DOM storage 也可以记住复杂信息.接下来的两个助手函数， 使用 HTML5 DOM storage 和 ECMAScript5 的内建 JSON 特性， 解决了游戏状态的存储和取回.</p> <p> ECMAScript5:</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;">function</span> saveState (state) { window.localStorage.setItem ("gameState", JSON.stringify (state)); } <span style="color:#0000ff;">function</span> restoreState () { <span style="color:#0000ff;">var</span> state = window.localStorage.getItem ("gameState"); <span style="color:#0000ff;">if</span> (state) { <span style="color:#0000ff;">return</span> JSON.parse (state); } <span style="color:#0000ff;">else</span> { <span style="color:#0000ff;">return</span> <span style="color:#0000ff;">null</span>; } }</pre> </div> <p> <strong>最佳实践 #4: 使用监控器</strong></p> <p> 开发游戏的一个最大挑战是加入越来越多的游戏特性的同时能保持高帧率.</p> <p> 好消息是， 浏览器比过去几年快了很多,HTML5游戏运行在恒定的 60fps 已经成为现实.</p> <p> 这实属不易. 对于 IE9,意味着要编写一个全新的 JavaScript 引擎， 使用多 CPU 内核和基于 Direct2D 的完全的硬件加速渲染管道.</p> <p style="text-align:center;"><a target="_blank"><img alt="HTML 5游戏开发的五个最佳实践" src="https://simg.open-open.com/show/2625b4f89761798d23d0560de2fbdf58.jpg" width="335" height="252" /></a></p> <p style="text-align:center;"> IE9的内置监控器能帮助你定位性能漏洞.</p> <p> 对于简单游戏，你不需要担心性能问题.但既然 HTML5 是平台无关的，你很可能会针对大量的设备和浏览器开发， 有些不像你想像的那么快速. 即使你只针对高性能电脑， 性能仍然会成为一个问题.</p> <p> 如果你想游戏运行在 60fps, 单个帧渲染不能超过 16 毫秒. 这可能看起来像是个艰巨的任务， 但这是可以做到的.</p> <p> 很幸运，有一些工具可以帮助你. 在 IE9 中(或者 10)，单击 F12,打开开发者工具，选择"Profiler"选项卡并单击 "Start profiling".</p> <p> 现在导航到你感觉性能应被改善的地方，给监控器大概 30 秒的时间收集数据，然后单击"Stop profiling." 將给你展现一个关于每个游戏函数累计执行时间的概览. 大多数时候， 你会发现， 少数几个函数占用了大部分执行时间.优化这些函数將给你超值回报， 分析这些代码， 拖后腿的子程序將原型毕露.</p> <p> 不要盲目的相信直觉， 在当今的 JavaScript 引擎中， 看起来慢可能实际上运行得很快. 最佳优化方案是时常监控和判断代码的改变是否对性能有负面影响.</p> <p style="text-align:center;"><a target="_blank"><img alt="HTML 5游戏开发的五个最佳实践" src="https://simg.open-open.com/show/5d106023cdc7ce14fd36970dff4bacce.jpg" width="388" height="267" /></a></p> <p style="text-align:center;"> 社会化游戏: Warimals 基于 HTML5 而允许你身边的 非死book 好友一起玩游戏. </p> <p> <strong>最佳实践 #5 创意!</strong></p> <p> HTML5不光在技术上是有趣的， 浏览器本身也是一个完美的游戏平台.</p> <p> 感谢浏览器... 它存在于很多不同的设备中，他们常常(总是)在线的，它们是人们彼此交流的工具， 通过 email,聊天室和社交网络.做为一个浏览器的游戏开发者， 你可以创建游戏， 让世界各地的人聚集在一起， 带给他们快乐.</p> <p> 如果你是一个 HTML5 游戏的开发新手，可能编写你曾经玩过的线下游戏的克隆会很诱人. 这种做法没有错误. 但是，如果你想让做线上游戏， 现在是一个好的机会， 请拿出全新的， 极具创意的游戏理念. 一个有趣的例子是 Warimals, 第一个基于 HTML5 的 非死book 游戏.在 Warimals 中，你可以扮演小狗或小鸡，还能让你的 非死book 好友和你一起玩. 何乐不为呢?</p> <p><strong> 总结: </strong></p> <p> 感谢框架开发者的工作和 JavaScript 开拓者， HTML5 已经成为一个相当成熟的游戏开发平台. 这是好消息， 因为 web 是个普适的应用环境，只要有合适的工具（很多已经集成到 IE9 和 IE10 或者可以免费下载）和合适的框架，HTML5的开发体验会充满愉悦并令人振奋，尤其是在分享有趣的和创造性的经验的时候。</p>