开发基于HTML5的游戏，你有很多选择。使用什么样的编辑器？是否使用Canvas2d、WebGL？使用什么样的渲染框架和游戏引擎？这些选择大多是由开发者的个人经验和游戏发布平台决定的。幸运的是，现在有很多HTML5游戏开发指南。而这篇文章就是要告诉开发者一些开发者在开发HTML5游戏之前应该具备的全局概念。你能从这篇文章中学到什么？这里会介绍一些HTML5游戏开发的框架，你会知道如何让你设计的游戏运行在更多的平台上，了解如何管理网络游戏的状态，以及如何处理性能问题。话不多说，下面介绍一些HTML5游戏开发的实用建议。建议一：使用框架。用HTML5写一些小程序是很简单的，但是如果你想给你的游戏添加更丰富的功能，那么你可以用很多其他的东西来处理。例如，如果你的游戏有很多图片、音效或其他资源，浏览器需要从你的游戏服务器下载这些资源，这往往会花费很多时间。如果您在编写程序时没有考虑这些问题，那么您可能会对最终结果感到惊讶。由于图形和声音文件是异步下载的，因此您的JavaScript脚本可能会在您的资产下载之前开始运行。这就是所谓的“爆音”现象（图像显示异常），声音也可能在错误的时间播放。一个好的解决方案是创建一个预下载机制，以确保在允许脚本执行之前下载所有资源。您可能遇到的另一个问题是您的游戏在不同的机器甚至浏览器上以不同的速度运行。虽然这可能不受您的控制，但您可以尝试让动画或动作的速度独立于游戏帧的速度。其实现在有很多游戏模板代码，实现了大部分游戏需要的功能。这样，开发者就不需要从头到尾编写一个完整的游戏程序。现在有很多框架可以帮助开发者设计游戏。开发者只需要关注具体的游戏逻辑，而不用担心如何让游戏流畅运行。使用相框唯一需要注意的就是如何从众多相框中选择合适的相框。ImpactJS等框架非常强大，几乎可以在各个方面帮助开发人员；而像EaselJS这样的框架主要处理图形。***，还是由开发者决定使用哪个框架更合适。这看似简单，但在JavaScript的世界里，当你选择了一个框架，你也就选择了某种编程风格。ig.module('monster').requires('impact.game',).defines(函数(){Monster=ig.Entity.extend({eyes:42});});Monster=ig.Entity.extend({eyes:42});});ImpactJS就是一个很好的例子。它不仅提供了图像显示和声音处理的方法，而且在实现中插入了自己的对象和模型。AscendedArcade在三个月内发布了三款游戏，都使用了ImpactJS框架。虽然已经有很多HTML5游戏使用了一些框架，但还是有很多开发者不厌其烦地选择不依赖任何框架，完全自己开发。.如果你想在合理的时间内完成事情，使用框架当然是最有效的方式。AscendedArcade就是一个很好的例子。在短短三个月内，他们开发了三款游戏，全部使用ImpactJS框架。技巧2：考虑小屏幕和触摸屏设备HTML5的最大卖点之一是它可以在台式PC以及笔记本电脑、平板电脑甚至智能手机上使用。（这里有一个在WindowsPhone7Mango上运行的IE9的演示）。HTML5本质上是跨平台的，这通常可以为开发人员节省大量工作。但是，开发人员需要考虑一些事项...SpyChase适用于WindowsPhone7Mango。首先，不同设备的屏幕尺寸也不同，屏幕的纵横比和分辨率可能相差很大。不同之处。如果您希望您的HTML5在移动设备上看起来不错，请确保它支持多种分辨率并且不超过800x480的WVGA帧大小。此外，由于大多数移动设备无法在一个屏幕上显示所有页面内容，因此它们通常采用通常不适合游戏编写的精确缩放和平移技术。可以使用视口元标志以编程方式禁用这些功能。以下代码片段可用于使您的游戏视图自动调整为屏幕的实际水平宽度。移动浏览器上的缩放通常与触摸游戏控制冲突，可以通过将“用户可缩放”参数设置为“否”来禁用。现在您已经在小屏幕上很好地呈现了您的游戏视图，是时候考虑如何处理用户输入了。大多数触摸屏设备都有虚拟键盘，但在玩游戏时显示虚拟键盘是一种浪费空间的行为。你应该开发一个有限的虚拟键盘，它只提供游戏中使用的键（比如箭头）。当然，游戏中最好不要使用额外的元素。SpyChase在这方面做得很好，用户只用一根手指就可以在游戏中控制汽车。建议3：自动保存用户记录使用站点固定，Web浏览器试图使Web应用程序像桌面应用程序一样工作。然而，让网站像应用程序一样运行的想法相对较新，同样，拥有存储客户端状态的网页也不成熟。用户在关闭MicrosoftWord文档时可能会想到内容是否已经保存，但在关闭网页时往往不会那么小心。通常这不会造成任何问题——大多数网页都是无状态的，或者将用户记录保存在服务器上。但是在处理页游时，情况就完全不同了。通常JavaScript代码在客户端执行，而HTML5游戏通常将游戏状态缓存在内存(RAM)中。一旦浏览器窗口关闭，用户辛苦得来的高分就永远丢失了。你可以要求用户注意不要关闭正在进行的游戏窗口，但是意外总会发生，尤其是当用户打开多个窗口或者电池没电时。长话短说：在编写HTML5游戏时，最好经常保存游戏玩家的进度状态。当用户重新打开关闭的网页时，应该允许用户继续之前未结束的游戏，而不是重新开始。你应该在哪里存储用户记录？过去，答案通常是服务器端数据库或客户端cookie。但这些都不是最好的选择。如果在服务器端，会产生额外的HTTP请求开销。如果是cookie，能够保存记录的空间非常有限，cookie的寿命取决于浏览器的配置。一种更有效的方法是使用HTML5DOM存储。DOMStorage提供了键值存储（或JavaScript定义的对象）的接口，可以为每个网站保存数兆字节的数据。使用起来非常方便，但是在HTML5游戏中，你可能想要记录一些比较复杂的数据结构——这些DOM存储可能不支持。幸运的是，JavaScript现在提供了一种机制来帮助开发者将一组对象压缩成一些紧凑的符号，这就是JSON机制。使用这种机制，DOM存储可以存储任何格式的信息。以下两个函数展示了如何使用ECMAScript5中的HTML5DOM存储和JSON功能保存游戏状态：window.localStorage.getItem("gameState");if(state){returnJSON.parse(state);}else{retrunnull;}}建议四：使用profiler游戏开发中最大的挑战是增加很多特性未来如何保证游戏依然有较高的帧显示频率。好消息是，近年来浏览器的速度越来越快，基于HTML5的游戏已经可以达到每秒60帧。这是非常了不起的。对于IE9，这意味着开发一个新的JavaScript引擎，可以利用多个CPU内核和基于Direct2D的硬件渲染管道。也就是说，如果你配备了一个高配置的游戏平台，IE9可以充分利用这些硬件平台。IE9集成了一个JavaScript分析器，可以发现简单游戏的性能瓶颈，这意味着您不必担心它的性能。但是由于HTML5可以在任何平台上运行，这意味着你开发的HTML5游戏应该可以在任何设备或浏览器上运行，其中一些可能没有你想要的那么快。即使你的应用只是针对高性能PC，游戏的性能也是不得不考虑的问题。如果你要求你的游戏达到每秒60帧，这意味着每一帧的渲染时间不能超过16毫秒。也就是说，在你眨眼的时间内，你至少需要完成6帧的渲染。这现在听起来可能难以想象……但有一些非凡的游戏可以做到。幸运的是，这里有一些工具可能会为您提供帮助。在IE9（或IE10）上，可以通过按F12键打开开发者工具面板。选择“配置文件”选项并选中“开始配置文件”。现在在你认为性能需要提升的地方停留30秒，profiler会收集相关数据，然后选择“stopprofiling”。您将看到游戏中每个函数的累计执行时间。通常，您会发现某些功能占用的时间最多。这样就可以有针对性地优化那些特别耗时的功能。不要太相信你的直觉——有些代码可能看起来效率低下，但在某些JavaScript引擎上执行速度非常快。最好的方法是不时地反复分析程序。对于修改后的代码，你需要反复测试，确保你的修改确实能提高程序的性能。游戏变得越来越社交化：Warimals是一款基于HTML5的游戏，用户可以在Facebook上与朋友一起玩提示5：要有创意！能够开发运行在浏览器中的游戏是一件很棒的事情，更酷的是你可以使用HTML5在浏览器中开发游戏应用程序！从技术角度来说，HTML5很棒，浏览器也是一个理想的游戏平台。想一想……各种不同的设备上都有浏览器，它们通常一直处于打开状态，它是人们接收邮件、聊天和社交网络的工具。将世界各地的人们与他们的游戏联系起来的浏览器游戏开发商。作为一个HTML5游戏开发者，你一定知道很多很酷的开发工具。在Mozilla社区，我们为Firefox开发者推出了很多开发工具，包括JavaScriptDebugger、StyleEditor、PageInspector、Scratchpad、Profiler、NetworkMonitor和WebConsole。#p#下面继续介绍一些HTML游戏开发工具。CanvasDebugger在最新版本的firefox中，我们添加了在浏览器中进行Canvas调试。CanvasDebugger允许您跟踪所有画布上下文调用，如绘图元素和使用特定调色板，它根据特定要求调用颜色编码。它不仅在开发基于WebGL的游戏时有用，还可以用于测试基于Canvas2D的游戏。在下面的游戏中，你可以看到动画被分解成许多静态图像，你可以点击任意一行直接查看该部分的响应。着色器编辑器当您创建基于WebGL的游戏时，能够在游戏运行时测试和修改着色器程序真的很酷。您可以使用着色器编辑器做这些很酷的事情。您可以在不重新加载界面的情况下修改顶点和片段着色器，并查看它们对输出的影响。WebAudioEditor在FirefoxAurora(32)版本中有一个WebAudioEditor。此编辑器通过图表显示所有音频节点和当前AudioContext连接。您可以使用它来查看每个节点的特定属性。WebAudioAPI提供了更多的混音创作，对音频的操作和处理比HTML5Audio标签强大的多。对于HTML5游戏开发者来说，NetworkMonitor需要昂贵的代码来繁琐地测试游戏。如果游戏运行在移动设备上，您可以使用网络监视器直观地查看所有网络请求、系统时间消耗、类型大小等属性。此外，您还可以通过网络监视器直观地看到游戏的性能分析。在使用WebIDE开发游戏之前，首先要选择一个开发环境。同样，你有很多选择（Sublime、Eclipse、Dreamweaver、vi等），重要的是你必须已经有一个通用的开发环境。如果你对浏览器端的开发环境感兴趣，可以试试WebIDE，它已经在最新版本的Firefox中可用。WebIDE不仅为开发者提供正常编码，还提供远程发布、调试、框架管理等功能。原文链接：http://www.cocoachina.com/game/20150906/13326.html?utm_source=tuicool
