HTML5游戏开发经验及开发工具

在进行基于HTML5的游戏开发时，开发者会面临诸多选择，例如使用何种编辑器，是否运用Canvas 2D、WebGL，采用何种呈现框架和游戏引擎等。这些选择在很大程度上取决于开发者的个人经验以及游戏即将发布的平台。

幸运的是，目前已有大量关于HTML5游戏开发的指南。本文旨在为开发者介绍在开发HTML5游戏前应具备的一些全局概念，包括HTML5游戏开发的部分框架，如何让游戏在更多平台上运行，如何管理在线游戏状态以及如何处理性能问题等。

话不多说，下面为大家介绍HTML5游戏开发的几条实用建议。

建议1：使用框架

单纯使用HTML5编写小程序相对简单，但如果要为游戏添加更丰富的功能，就会面临诸多问题。

例如，若游戏包含大量图片、音效或其他资源，浏览器从游戏服务器下载这些资源会耗费大量时间。若在编写程序时未考虑这一问题，可能会出现意外情况。由于图形和声音文件是异步下载的，可能在资源下载完成前，JavaScript脚本就已开始运行，从而导致“爆音”现象（图像显示异常），声音也可能在错误的时间播放。一个有效的解决办法是创建预先下载机制，确保所有资源下载完成后再允许脚本执行。

另一个可能遇到的问题是，游戏在不同机器甚至不同浏览器中的运行速度存在差异。尽管这可能超出开发者的控制范围，但仍可尽量使动画或动作的速度不依赖于游戏运行框架的速度。

实际上，现在有许多游戏模板代码，实现了大多数游戏所需的功能。开发者无需从头编写完整的游戏程序，众多框架能帮助他们设计游戏，开发者只需关注具体的游戏逻辑，而无需担心游戏顺畅运行的细节问题。

使用框架时，关键在于从众多框架中挑选合适的框架。像ImpactJS这样的框架功能强大，能在多方面为开发者提供帮助；而EaselJS框架则主要用于处理图形方面的工作。最终，开发者需根据自身需求决定使用哪种框架。需要注意的是，在JavaScript领域，选择一个框架也意味着选择了一种特定的编程风格。

以ImpactJS为例，它不仅提供了图像显示和音效处理的方法，还在实现中插入了自己的对象和模型。Ascended Arcade在短短三个月内开发了三款游戏，均使用了ImpactJS框架。虽然已有很多HTML5游戏使用了框架，但仍有部分开发者选择不依赖任何框架，完全自行开发。若想在合理时间内完成任务，使用框架无疑是最有效的方法。

建议2：将小屏幕和触屏设备考虑在内

HTML5的一大卖点是它能在桌面PC、笔记本电脑、平板设备甚至智能手机上运行（这里有IE9在Windows Phone 7 Mango上的运行效果演示）。HTML5天生具备跨平台特性，为开发者节省了大量工作。然而，开发者仍需考虑一些问题。

首先，不同设备的屏幕尺寸、宽高比和分辨率可能存在较大差异。若想让HTML5游戏在移动设备上有良好表现，需确保其支持多种分辨率，且不超过WVGA的800×480框架大小。此外，大多数移动设备无法在一个屏幕上显示所有页面内容，常采用精确的缩放和平移技术，但这些技术通常不适用于游戏编写。可在编程时使用viewport meta标志禁用这些功能。以下代码片段可使游戏视图根据屏幕实际水平宽度自动调节：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

移动浏览器上的缩放功能常与触控游戏控制功能冲突，可将“user-scaleable”参数设置为“no”，以禁用浏览器的缩放功能：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

在解决游戏视图在小屏幕设备上的呈现问题后，还需考虑用户输入的处理。大多数触屏设备都有虚拟键盘，但在游戏中显示虚拟键盘会浪费空间。开发者应开发有限的虚拟键盘，仅提供游戏中使用的按键（如箭头）。最好在游戏中尽量减少使用额外元素。例如，Spy Chase游戏在这方面表现出色，用户只需用一个手指就能控制游戏中的汽车。

建议3：自动保存用户的记录

借助site pinning，Web浏览器试图让Web Apps像桌面apps一样工作。但让网站像Apps一样运行的想法尚不成熟，同样，让Web页面保存客户端状态也未完全实现。用户关闭Microsoft Word文档时可能会考虑内容是否保存，而关闭Web页面时往往不会如此谨慎。通常，这不会产生问题，因为大多数Web页面没有状态，或者将用户记录保存在服务器上。

但对于浏览器游戏而言，情况截然不同。HTML5游戏通常在客户端执行JavaScript代码，并将游戏状态缓存在内存（RAM）中。一旦关闭浏览器窗口，用户辛苦赢得的高分就会永久丢失。

虽然可以提醒用户小心关闭正在进行的游戏窗口，但意外情况仍可能发生，尤其是当用户打开多个窗口或电池没电时。

简而言之，编写HTML5游戏时，最好经常保存游戏玩家的进度状态，以便用户重新打开关闭的Web页面时，能够继续之前未完成的游戏，而非从头开始。

那么，应将用户记录保存在何处呢？过去，常见的选择是服务器端的数据库或客户端的cookie，但这两者都并非最佳方案。若保存在服务器端，会产生额外的HTTP请求开销；若使用cookie，可保存记录的空间有限，且cookie的寿命取决于浏览器的配置。

更有效的方法是使用HTML5 DOM storage。DOM Storage提供了一个键值存储（或JavaScript定义的对象）的接口，可为每个网站保存几兆的数据，使用起来十分方便。但在HTML5游戏中，可能需要记录更复杂的数据结构，而DOM storage本身可能并不支持。幸运的是，现在的JavaScript提供了JSON机制，可帮助开发者将一组对象压缩成紧凑的符号。通过这套机制，DOM storage可以保存任何格式的信息。以下两个函数展示了如何使用HTML5 DOM storage保存游戏状态以及ECMAScript 5中的JSON功能：

function saveGameState() {
var gameState = {
score: 100,
level: 2
};
localStorage.setItem('gameState', JSON.stringify(gameState));
}

function loadGameState() {
var gameState = localStorage.getItem('gameState');
if (gameState) {
return JSON.parse(gameState);
}
return null;
}

建议4：使用profiler

在游戏开发中，加入众多功能后，保证游戏具有较高的帧显示频率是一大挑战。

好在近年来，浏览器的速度越来越快，基于HTML5的游戏已能达到每秒60帧。以IE9为例，它开发了全新的JavaScript引擎，能够利用多CPU内核以及基于Direct2D的硬件渲染管道，充分发挥高配置游戏平台的性能。

对于简单的游戏，可能无需担心性能问题。但由于HTML5可在任何平台上运行，这意味着开发的HTML5游戏需能在各种设备或浏览器上运行，其中部分设备或浏览器的处理能力可能不如预期。即使游戏仅针对高性能PC，性能问题也不容忽视。

若要求游戏达到每秒60帧，意味着每一帧的渲染时间不能超过16毫秒，即在眨眼间需完成至少6帧的渲染工作。虽然听起来难以想象，但有些优秀的游戏确实能够做到。

幸运的是，有一些工具可提供帮助。在IE9（或IE10）上，按下F12按键可打开开发工具面板，选择“Profile”选项并选中“Start profiling”。在觉得性能需要提升的地方停留30秒，profiler将收集相关数据，然后选择“stop profiling”，即可看到游戏中每个功能的累积执行时间。通常，会发现某些功能占用了大部分时间，从而有针对性地优化这些特别耗时的功能。

开发者不应过分依赖直觉，有些代码看似效率低下，但在某些JavaScript引擎上执行速度可能很快。因此，最好时常反复分析程序，对修改过的代码进行反复测试，确保修改能提升程序性能。

如今，游戏变得越来越社会化，例如Warimals这款基于HTML5的游戏，用户可与Facebook上的好友一起参与游戏。

建议5：要有创造性！

能够开发出在浏览器中运行的游戏已十分出色，而使用HTML5在浏览器上开发游戏应用则更酷！从技术角度看，HTML5非常优秀，浏览器也是理想的游戏平台。

要知道，各种设备上都有浏览器，且通常处于在线状态，它是人们接收邮件、聊天和使用社交网络的工具。浏览器游戏开发者可利用游戏将世界各地的人们联系在一起。

作为HTML5游戏开发者，需了解许多出色的开发工具。Mozilla社区已为Firefox开发者介绍了众多开发工具，包括JavaScript Debugger、Style Editor、Page Inspector、Scratchpad、Profiler、Network Monitor和Web Console等。下面介绍一些最近更新的工具。

Canvas Debugger

在最新版本的Firefox中，浏览器添加了Canvas调试功能。Canvas Debugger允许跟踪所有的canvas上下文调用，如绘制元素和使用特定的调色器，它会根据具体要求进行颜色编码。该工具不仅在开发基于WebGL的游戏时有用，也可用于测试基于Canvas 2D的游戏。在某些游戏中，可将动画分解成多个静态图，点击任意一行即可直接查看那一部分的响应。

Shader Editor

在创建基于WebGL的游戏时，若能在游戏运行时测试和修改着色器程序将非常酷。Shader Editor就能实现这一功能，无需重新加载界面即可修改顶点和片段着色器，并查看其对输出结果的影响。

Web Audio Editor

在最新的Firefox Aurora（32）版本中，有一个Web Audio Editor，它通过图表展示了所有的音频结点和当前AudioContext的连接，可查看每个结点的特定属性。Web Audio API提供了更多混音的创建方式，对音频的操作和处理比HTML5的Audio标签强大很多。

Network Monitor

对于HTML5游戏开发者来说，对游戏进行繁琐的测试需要耗费大量代码。若游戏在手机设备中运行，可使用Network Monitor直观地查看所有网络请求、系统耗时和类型大小等属性，还能直观地看到游戏的性能分析。

Web IDE

开发游戏前需选择开发环境，有多种选择可供开发者使用（如Sublime、Eclipse、Dreamweaver、vi等），相信开发者都有常用的开发环境。若对浏览器端的开发环境感兴趣，可尝试Firefox最新版本中上线的Web IDE。它不仅能让开发者进行正常的编码，还支持远程发布、调试、框架管理等功能。