html5游戏开发的五个最佳实践

HTML5是伟大的,因为它多才多艺的- 它没有具体针对单一的平台.更重要的是,HTML5是无所不在的. 就我所知的,它在你的PC上,你的手机上,你的平板设备上,甚至在你的厨房电器上.

就凭HTML5-多才多艺和无所不在这两个特点-- 不辩自明, 为什么众多的开发者们备受鼓舞. 然,众所周知,"一旦开发者们被激发了灵感,他们常常会编写游戏."(好吧,可能只是我做了.)

幸运的是,有关HTML5游戏开发的文章比比皆是. 然而, 在你打算使用HTML5编写游戏之前, 我不得不给你一些建议.

你能从本文中学习到什么? 我將提及HTML5游戏开发框架, 怎样通过支持智能手机和手持设备使受众更广泛, 怎样管理游戏状态, 怎样解决性能问题, 怎样支持大多数浏览器平台. 因此,直奔主题,这里有5个创建HTML5游戏的最佳实践,实战!("实战"增加了戏剧效果) 最佳实践#1:使用框架

编写简单游戏在HTML5中是很容易的,但是当你押宝在HTML5上,你就需要做更多的准备,确保游戏顺利运行.

例如,当你使用了很多的图片,声音效果,和其它的资源,它们会花费一些时间等待浏览器从服务器下载. 如果在编写游戏时, 你不把它放在心上, 你会焦头烂额. 因为图片和声音文件是异步加载的,你的JavaScript代码会在资源全部加载完成前执行.这常常导致"popping"(图片不可用),声音效果在需要时不播放. 好的修正方法是创建一个预加载器,延后脚本代码的执行,直到所有的资源都下载完毕为止.

一个好例子是ImpactJS, 它不仅提供图形显示的抽象或播放声音效果, 也织入了自定义对象和继承模型,如上所示.

Ascend Arcade delivered three games in three months using the ImpactJS framework.

尽管有很多的HTML5游戏现在依赖于某种形式的框架, 很多开发者仍然坚持一路颠簸, 试图重新构建一切. 然而这可能是一个好的学习经验, 但如果你想在合理的时间完成, 使用框架是正确的方法. 一个好的例子是, Ascended Arcade 使用ImpactJS框架, 在三个月中发布了三款有意思的(有些受到好评)游戏.

最佳实践#2: 认真考虑小的和触摸屏的设备

可能HTML5的销售卖点之一是,它可以工作于桌面PC, 手持电脑甚至智能手机.(如果你还没有看过Windows Phone 7 Mango上运行的IE9, 看看这个视频).

跨平台(take that,Webster's 字典!)特性是HTML5与身俱来的, 常常只需付出少量的额外工作便可做到. 然而, 有几个你需要认真考虑的事情...

首先也是最重要的, 屏幕尺寸可能在不同设备中区别很大. 如果想让你的HTML5游戏在移动设备上运行良好,你要么确保它们支持多个分辨率,要么不超过WVGA框架大小

800x480.

就算游戏在小屏幕设备上渲染没问题, 你也应该停下来思考一下输入问题. 大多数仅支持触摸式的设备拥有个虚拟键盘,他们可能会占用太多屏幕空间来控制游戏角色. 如果严格的触摸式输入出了问题, 你应该创建一个受限的虚拟键盘,仅仅创建游戏需要的按钮(如方向键). 然而,最好的做法是控制你的游戏,不需要额外的屏幕元素. 一个很好的例子是Spy Chase游戏,你用一个手指控制自动车(一些你不可能在实际生活中尝试的东西).

最佳实践#3:自动保存玩家进度

像site pinning特性, 试图给web浏览器web应用程序和常规的桌面应用同样的地位. 然而, 作为应用程序运行的网站想法太新了, 网页要维持客户端状态. 关闭Microsoft Word 前,你可能会三思后行, 但是可能不会对于一个开放的网页谨慎行事.大部分时间, 它不是问题--- 大多数网页要嘛是无状态的, 要嘛是在服务器上维护记录你的信息.

然而, 浏览器游戏, 是非常不同的小怪兽. 既然JavaScript代码运行在客户端, HTML5游戏状态通常都保持在瞬时内存中(又称RAM).关闭游戏器窗口,你辛苦赚取的积分就付之东流了.

最佳实践#4: 使用监控器

开发游戏的一个最大挑战是加入越来越多的游戏特性的同时能保持高帧率.

好消息是, 浏览器比过去几年快了很多,HTML5游戏运行在恒定的60fps已经成为现实. 这实属不易. 对于IE9,意味着要编写一个全新的JavaScript引擎, 使用多CPU内核和基于Direct2D的完全的硬件加速渲染管道.

IE9的内置监控器能帮助你定位性能漏洞.

对于简单游戏,你不需要担心性能问题.但既然HTML5是平台无关的,你很可能会针对大量的设备和浏览器开发, 有些不像你想像的那么快速. 即使你只针对高性能电脑, 性能仍然会成为一个问题.

如果你想游戏运行在60fps, 单个帧渲染不能超过16毫秒. 这可能看起来像是个艰巨的任务, 但这是可以做到的.

很幸运,有一些工具可以帮助你. 在IE9中(或者10),单击F12,打开开发者工具,选择"Profiler"选项卡并单击"Start profiling".

现在导航到你感觉性能应被改善的地方,给监控器大概30秒的时间收集数据,然后单击"Stop profiling." 將给你展现一个关于每个游戏函数累计执行时间的概览. 大多数时候, 你会发现, 少数几个函数占用了大部分执行时间.优化这些函数將给你超值回报, 分析这些代码, 拖后腿的子程序將原型毕露.

不要盲目的相信直觉, 在当今的JavaScript引擎中, 看起来慢可能实际上运行得很快. 最佳优化方案是时常监控和判断代码的改变是否对性能有负面影响.

社会化游戏: Warimals 基于HTML5而允许你身边的Facebook好友一起玩游戏.

最佳实践#5 创意!

HTML5不光在技术上是有趣的, 浏览器本身也是一个完美的游戏平台.

感谢浏览器... 它存在于很多不同的设备中,他们常常(总是)在线的,它们是人们彼此交流的工具, 通过email,聊天室和社交网络.做为一个浏览器的游戏开发者, 你可以创建游戏, 让世界各地的人聚集在一起, 带给他们快乐.