它们吃的都是官粮，有的动物伙食标准比我们高得多。
从村民家借来梯子，司机才拿着手机爬了出来。
声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
　　当你开发基于HTML5的游戏时，你有很多选择。使用什么样的编辑器?是否用到Canvas2d、WebGL?采用什么样的呈现框架和游戏引擎?这些选择大部分由开发者的个人经验和游戏将要发布的平台决定。
　　幸运的是，有关HTML5游戏开发的指南现在已经有很多了。而这篇文章则是要告诉开发者在开发HTML5游戏以前应该具备的一些全局概念。你能从这篇文章中学到什么?这里会介绍HTML5游戏开发的一些框架，你将知道如何使你设计的游戏能够在更多的平台上运行，了解如何管理在线游戏的状态，如何处理性能问题。
　　话不多说，现在就开始介绍HTML5游戏开发的几条实用建议
　　建议1：使用框架
　　如果只是用HTML5编写一些小程序其实非常简单，但如果想往你的游戏中加入更丰富的功能，那么就有许多其他的事情需要处理了。
　　比如，如果你的游戏中有大量的图片、音效或是其他的资源，那么浏览器需要从你的游戏服务器上下载这些资源，这往往需要花费很多的时间。如果你在编写程序的时候没有考虑这些问题，那么你也许会对最后的结果感到意外。由于图形和声音文件都是异步下载的，也许在你的资源下载好以前你的Java脚步已经开始运行了。这就是所谓的“爆音”现象(图像显示异常)，而声音也可能在错误的时间播放。一个好的解决方法就是创建一个预先下载机制，保证所有的资源下载完以后才允许脚本执行。
　　另一个你可能碰到的问题就是你的游戏在不同的机器甚至是浏览器中运行的速度有所不同。虽然这也许在你的控制范围以外，但你还是可以尽量使得你的动画或是动作的速度不依赖于游戏运行框架的速度。
　　其实，现在有许多的游戏模板代码，里面实现了大多数游戏需要的功能。这样，开发者不需要从头到尾编写一个完整的游戏程序。现在有许多框架可以帮助开发者设计游戏，开发者只用关注具体的游戏逻辑，而不用担心如何使游戏顺畅运行这些细节问题。
　　使用框架时唯一需要注意的一点就是如何从众多的框架中挑选一个合适的框架。像ImpactJS这样的框架功能非常强大，几乎可以在各个方面为开发者提供帮助;而像EaselJS的框架则主要是处理图形方面的工作。最后，还是需要由开发者决定使用哪种框架更加合适。这看起来似乎很简单，但在Java的世界里面，选择一个框架时也意味着你选择了一种特定的编程风格。
　　Monster=ig.Entity.extend({eyes:42});});ImpactJS就是一个很好的例子，它不仅提供了图像显示和音效处理的方法，还在实现中插入了自己的对象和模型。
　　Ascended Arcade三个月内发开了三款游戏，全部使用的是Impact JS的框架
　　虽然现在已经有很多HTML5游戏使用了一些框架，但是还是有很多开发者不嫌麻烦地选择不依赖任何框架完全自己开发。如果你想在合理的时间内完成任务，使用框架当然是最有效的方法。AscendedArcade就是一个很好的例子，在短短三个月的时间里，他们就开发出了三个游戏，全部使用了ImpactJS框架。
　　建议2：将小屏幕和触屏设备考虑在内
　　HTML5最大的卖点之一就是它既能在桌面PC上使用，也能在笔记本电脑、平板设备甚至是智能手机上运行。(这里有IE9在WindowsPhone7Mango上的运行效果演示)。
　　HTML5与生俱来就具备了跨平台的特性，通常为开发者节省了很多工作。然而，有些事情是需要开发者考虑的…
　　Spy Chase在Windows Phone7 Mango上的运行效果
　　首先也是最重要的一点，不同的设备屏幕的尺寸也有所不同，屏幕的宽高比以及分辨率可能有很大的差别。如果想让你的HTML5在移动设备上拥有良好的效果，确保它支持多种分辨率并且不超过WVGA的800&480框架大小。此外，由于大多数的移动设备无法在一个屏幕上显示所有的页面内容，他们常常采用精确的缩放和平移技术，而这些技术通常并不适用于游戏的编写。可以在编程的时候使用view portmeta标志禁用这些功能。下面的代码片段可以用来使你的游戏视图根据屏幕的实际水平宽度自动调节。移动浏览器上的缩放功能常常与触控游戏控制功能产生冲突，可以将“user-scaleable”参数设置为“no”，从而禁用浏览器的缩放功能。
　　现在你已经能够将你的游戏视图很好地呈现在小屏幕设备上了，接下来就该考虑如何处理用户输入的问题了。大多数触屏设备都有一个虚拟键盘，但是在玩游戏的时候显示一个虚拟键盘实在太浪费空间了。你应该开发一个有限的虚拟键盘，只提供游戏中使用到的按键(比如箭头)。当然，最好是尽可能在游戏中不需要使用额外的元素。Spy Chase在这方面做得很好，用户只用一个手指就能控制游戏中的汽车了。
　　建议3：自动保存用户的记录
　　使用sitepinning,web浏览器试图让Web Apps可以像桌面apps一样工作。但是，让网站像Apps一样运行的想法还比较新鲜，同样的，让Web页面保存客户端的状态也尚未成熟。用户在关闭Microsoft Word的文档时可能会思考一下内容是否已经保存，而在关闭Web页面时往往不会这么仔细了。通常这并不会带来什么问题――大多数的Web页面是没有状态的，或者是将用户的记录保存在了服务器上。
　　但如果是处理浏览器游戏，情况就完全不同了。通常在客户端执行的是Java代码，HTML5游戏通常将游戏的状态缓存在内存中(RAM)。一旦关闭浏览器窗口，用户辛辛苦苦赢得的高分就永远地丢失了。
　　你可以要求用户小心一点，不要将正在进行的游戏窗口关闭，但是意外总是会发生的，尤其是当用户开了多个窗口或是电池没电的时候。
　　长话短说：在编写HTML5游戏时，最好是经常将游戏玩家的进度状态保存一下，当用户重新打开关闭的web页面时，应该让用户可以继续之前没有结束的游戏而不是重头来过。
　　你应该将用户的记录保存在哪里呢?过去，答案往往是服务器端的数据库或是客户端的cookie。但是这两个都不是最佳的选择。如果是在服务器端，则会产生额外的HTTP请求开销。如果是cookie的话，则可以保存记录的空间非常有限，并且cookie的寿命取决于浏览器的配置。
　　一个更有效的方法是使用HTML5 DOM storage。DOM Storage提供了一个key-value存储(或是Java定义的对象)的接口，可以为每个网站保存几兆的数据。使用起来非常方便，但是在HTML5游戏中，你可能想要记录一些更加复杂的数据结构――这些DOM storage本身可能并不支持。幸运的是，现在的Java 提供了一套机制帮助开发者将一组对象压缩成一些紧凑的符号，这就是JSON机制。使用这套机制，DOM storage可以保存任何格式的信息。下面的两个函数展示了如何使用HTML5 DOM storage保存游戏状态以及ECMA 5中的JSON功能：
　　建议4：使用profiler
　　游戏开发中最大的挑战是在加入许多功能以后，如何保证游戏仍然具有高的帧显示频率。
　　好的消息是近几年来，浏览器的速度越来越快了，基于HTML5的游戏已经可以达到每秒60帧了。
　　这是非常了不起的。对IE9来说，这意味着开发了一个全新的Java引擎，能够利用多CPU内核以及基于Direct 2D的硬件渲染管道。换言之，如果你配备了高配置的游戏平台，IE9就能充分地利用这些硬件平台。
　　IE9整合了Java 分析器，能够发现性能瓶颈
　　对于简单的游戏，这意味着你不必担心它的性能问题。但由于HTML5可以运行在任何平台上，这意味着你发开的HTML5游戏应该能够运行在任何一个设备或是浏览器上，其中有些设备或浏览器的处理能力可能并没有你希望的那么快。即使你的应用只针对高性能的PC，游戏的性能也是一个不得不考虑的问题。
　　如果你要求你的游戏达到每秒60帧，这意味着每一帧的渲染时间不能超过16毫秒。也就是说，在你一眨眼的时间里面，你需要完成至少6帧的渲染工作。现在听起来可能有点难以想象…但是有些非凡的游戏确实能够做到。
　　幸运的是，这里有些工具可能能够帮助你。在IE9(或是IE10)上，通过按下F12按键可以打开开发工具面板。选择“Profile”选项然后选中“Start profiling”。
　　现在在你觉得性能需要提升的地方停留30秒，profiler将收集相关数据，然后选择“stop profiling”。你将看到你的游戏中的每个功能的累积执行时间。通常，你会发现某些功能占用了大部分的时间。这样你就能有针对性地优化那些特别耗时的功能了。
　　不要过分相信自己的直觉――有些代码可能看起来效率很低，但在某些Java 引擎上执行起来速度却很快。最好的办法就是时常地反复分析程序，对于修改过的代码，需要反复进行测试确保你的修改确实能够提升程序的性能。
　　游戏变得越来越社会化：Warimals是基于HTML5的游戏，用户可以与Face book上的好友一起参与游戏
　　建议5：要有创造性!
　　能够开发出在浏览器中运行的游戏是一件很棒的事情，而更酷的是可以使用HTML5在浏览器上开发游戏应用!从技术的角度看，HTML5是非常棒的，而浏览器也是非常理想的游戏平台。
　　想想看…各种不同的设备上都有浏览器，它们通常是时时在线的，它是人们接收邮件、聊天和社交网络的工具。浏览器游戏的开发者，可以利用自己开发的游戏将来自世界各地的人们联系在一起。
　　作为一个HTML5游戏开发者，你必须了解很多很酷的开发工具，在Mozilla社区中我们已经介绍了很多为Firefox开发者提供的开发工具，包括Java Debugger,Style Editor,PageIn spector,Scrat chpad,Profiler,Network Monitorand Web Console.
　　下面继续介绍一些HTML游戏开发的工具。
　　Canvas Debugger
　　在最新版本的firefox中，我们在浏览器中添加了Canvas调试。Canvas Debugger允许你跟踪所有的canvas上下文调用，像绘制元素和使用特定的调色器一样，它会根据具体的要求调用颜色编码。它不仅在开发基于WebGL的游戏时有用，它同时也可以用来测试基于Canvas 2D的游戏。在下面的游戏中，你可以看到动画被分解成很多个静态图，你可以点击任意一行直接查看那一部分的响应。
　　Shader Editor
　　当你创建一个基于Web GL的游戏时，如果能在游戏运行时测试和修改着色器程序将是非常酷的一件事。使用Shader Editor就可以做到这么酷的事情。你不需要重新加载界面就可以修改顶点和片段着色器，还可以查看其对输出结果的影响。
　　Web Audio Editor
　　在Firefox Aurora(32)版本中有一个Web Audio Editor，这个编辑器通过图表展示了所有的音频结点和当前Audio Context的连接。你可以通过它查看每个结点的特定属性。Web Audio API提供了更多混音的创建，对音频的操作和处理比HTML5的Audio标签强大很多。
　　Network Monitor
　　对于HTML5游戏开发者来说，需要花费昂贵的代码来对游戏进行繁琐的测试。如果游戏是在手机设备中运行，可以使用Network Monitor直观地看到所有的网络请求，系统耗时和类型大小等属性。
　　除此之外，你还可以通过Network Monitor直观地看到游戏的性能分析。
　　Web IDE
　　开发游戏之前你必须先选择一个开发环境，同样，你有很多种选择(Sublime,Eclipse,Dreamweaver,vi等等)，重要的是你肯定已经有一款常用的开发环境了。如果你对浏览器端的开发环境感兴趣，你可以试一下WebIDE，它已经在Firefox的最新版本中上线了。
　　Web IDE不仅提供开发者进行正常的编码，还可以远程发布、调试、框架管理等。
　　原文链接：
　　游戏陀螺：关注“泛游戏”产业，为游戏创业者服务是游戏陀螺的理念和口号，内容已涉及移动游戏，H5游戏，电视游戏、AR/VR游戏，智能硬件和第三方服务等游戏相关领域。
　　欢迎关注游戏陀螺旗下官方微信号
　　游戏陀螺：shouyoushouce
　　游戏陀螺海外：youxituoluo
欢迎举报抄袭、转载、暴力色情及含有欺诈和虚假信息的不良文章。
请先登录再操作
请先登录再操作
微信扫一扫分享至朋友圈
搜狐公众平台官方账号
生活时尚&搭配博主 /生活时尚自媒体 /时尚类书籍作者
搜狐网教育频道官方账号
全球最大华文占星网站-专业研究星座命理及测算服务机构
游戏陀螺坚持关注“泛游戏”产业，为游戏创业者服务。内容已涉...
1084文章数
主演：黄晓明/陈乔恩/乔任梁/谢君豪/吕佳容/戚迹
主演：陈晓/陈妍希/张馨予/杨明娜/毛晓彤/孙耀琦
主演：陈键锋/李依晓/张迪/郑亦桐/张明明/何彦霓
主演：尚格?云顿/乔?弗拉尼甘/Bianca Bree
主演：艾斯?库珀/ 查宁?塔图姆/ 乔纳?希尔
baby14岁写真曝光
李冰冰向成龙撒娇争宠
李湘遭闺蜜曝光旧爱
美女模特教老板走秀
曝搬砖男神奇葩择偶观
柳岩被迫成赚钱工具
大屁小P虐心恋
匆匆那年大结局
乔杉遭粉丝骚扰
男闺蜜的尴尬初夜
客服热线：86-10-
客服邮箱：业界技术大牛答：html5游戏开发前景如何？_游戏频道_新浪网
业界技术大牛答：html5游戏开发前景如何？
　　编者按：作为2014年游戏业界现象级事件之一，《围住神经猫》的蹿红也为Egret(白鹭)这款游戏引擎博来了关注。Egret(白鹭)是一款可以一次开发，分别部署在Android、IOS和WP原生平台或者Html版本的游戏引擎，最大的优势就是可以直接将Flash网页游戏转换成手机游戏，因性能高效，简单易用而得名。不过，由于HTML5游戏的商业化道路一直不甚明晰，业界对这款引擎前景的看法也是喜忧参半。
　　在这种前提下，有网友在知乎上提出了“如何看待html5开源游戏引擎Egret，html5游戏开发的前景如何？”的问题，作为白鹭时代的联合创始人――马鉴从Egret(白鹭)的技术背景、商业模式、发展前景等多个方面对该问题进行了解答。以下内容为马鉴回复全文，新浪游戏获得授权发布。
　　本来一直都在知乎潜水，但是看到楼上各位华山论剑点到了Egret，而且各持己见。我觉得我作为操盘Egret产品和技术的人，总归要回复几句，但是在诸位看官进入正文前，我先澄清一下，我的回复不会就以下几个问题展开讨论(为什么不讨论，相信各位资深看官都懂)：
　　1. HTML5有没有未来
　　2.开源好还是闭源好
　　3.Web，Hybrid和Native哪家好
　　4.2D没3D牛B
　　我想单就Egret本身而言，给出我关于以下几个问题的想法。
　　1. Egret为何用TypeScript？为何不用Dart,AtScript或者其他？
　　TypeScript(TS)是一个严格意义上JavaScript超集，而且它目前的1.4版本的语言设计更接近于ES6，如果只是单纯认为TypeScript是微软出的一个开源语言的，请认真去http://TypeScriptLang.org深入了解一下这个开源项目，了解以下微软的首席架构师为何会针对JavaScript做了这么个玩意。
　　那么为何Egret会选用TS呢？
　　首先，我们认为Dart的形式针对很多会使用JS或AS3的开发者而言(尤其是初学者这个最大的群体)，学习的成本曲线较陡，而谷歌又是一个在技术上“太过”创新的公司，跟随一个有可能“朝令夕改”的技术去制作一款产品，而且将整个Egret的工具和服务的体系都悬于它之上，实在有些让我坐卧难寝。谷歌的AtScript的目标又过于宏大，瞄准了ES7，但是就目前的H5的技术推进而言，下一个JS的标准是看齐ES6。我们想做一款创新好用的产品，但是首先我考虑的是先要创作一个能用的产品。
　　回到TS，它目前版本是1.4，即将在2015出现2.0，语言的结构设计无限趋近与ES6的标准，有了module，有了Proxy，还会有很多更类似于ActionScript3.0的语法。微软还提供了一个TS的编译器，可以在编译时为开发者提供很多帮助，而且我相信以微软的实力，做个编译器的水平还是很高的。目前的JavaScript恰恰有很多设计层面和开发层面的缺陷，TS都能或多或少的弥补这些问题。选用TS这个开源项目，能再现阶段很好的帮助JS开发者创作更有规模，更成熟，更有质量的游戏项目。
　　其次，我们可以用TS基于Canvas来封装跟Flash ActionScript3.0的API结构设计，而且，我们仅仅封装对于游戏有帮助的部分。我在Adobe的10多年，全部铺在了Flash产品和技术上，Flash是个庞然大物，当初Flash团队之所以放弃AS3到AS4，AVM2到AVM3的项目，很大程度上是Core的部分太复杂了，经历了几代架构师和开发的调整，升级重构的成本已经无法估量。简单的说，就是当时没人改的了，所以，我们也不可能投入研发去自己做一个complier或者virtual machine去让AS3交叉编译为JS。(君不见Adobe曾经宣布的AS3到JS的Falcon交叉编译项目，3年了都没动静，最后随同Flex一起捐给了Apache基金会)。
　　Egret的API设计只是借鉴模仿了Flash AS3里跟游戏有关的API部分，做了减法，因为Egret Engine的定位不是想让开发者拿去既可以做广告，又可以做minisite，又可以做Video，又可以做游戏。我们只想在core上保持精简，如果开发者对不同的游戏类型有需求，比如状态机，物理，粒子等等，都做到了core之外的game library里。我2014年初离开Adobe时候，中国还有接近30万的Flash开发者，其中90%是游戏相关，这是一个宝贵的开发者社区群体，他们对于Web页游的开发和理解远远超过了任何使用其他web前端技术做网页游戏的群体。Egret使用TS，一方面是为了让JS游戏开发人员更舒服些，另一方面是考虑到Flash AS3这个开发群体，不争取的话，慢慢都流失掉了，很可惜。下图是我们Egret Engine在API设计上与Flash AS3 API上的对比。
　　第三，我们使用TS，还有一个想法。将来的JS也是迟早会跟ES6看齐的，等将来所有浏览器都统一支持下一代JS的时候，现在使用Egret的开发者都已经熟悉了ES6那套做法，而Egret几乎可以0成本的直接将TS换为下一代JS的代码，平滑过渡所有开发者，比JS现有体系过渡到下一代的体系成本都低，更顺滑，何乐而不为？
　　2.我们2014年一口气做了一堆工具，而没有一上来就做个集成的开发环境呢？
　　我在这里要回答的有2点。在技术和产品的进化上，第一条真理是：天下武功，唯快不破；第二条是，长鞭理论无处不在；第三条是：工作流是工作效率提升的根本。以上三条重要性依次降低，当一个CTO和CIO做了产品形态和研发的决策时，请倒推。
　　说一说Egret的做法，Egret里我带的这帮人以前是做Flash Pro，Flash Builder，Flex GUI和众多工具及框架的技术，很有经验。但是经验不能完全当做生产力，经验不能当饭吃。经验告诉我们的是，要想在市场立足，在最短时间内做出来的产品的“核”也就是中心思想很重要。它不必拘泥于是否先要有个IDE来承载这种形态，市场需要的是最有效率的工作流，其次才是一招打遍天下的IDE集成开发环境，工作流的形态可以先出现在最初的若干款产品里，他们之间独立，小巧且专注，之间的数据通用且可以协作，对于研发而言，成本和风险均可控制。
　　而IDE，功能强大且齐全，开发者需要的功能都具备，但是研发成本高，风险大，周期长。按照Egret Engine的双周迭代速度，团队潜心于一上来就要打造一个IDE的节奏是不对的。就好像你希望快走，但是又总有一条腿迈不出去的情况一样，这个节奏的结果就是容易扯着蛋。但是2015年，我们也会做出一个第一版的IDE，叫Egret Builder。
　　3.说了引擎和工具，Egret想怎样商业化？
　　商业化的问题其实在这里我不想说太多，我只想说，我们除了引擎，工具，我还让团队做了个运行时。也就是将来Egret的技术体系就是三位一体，Engine，Tools，Runtime。关于Runtime的细节，我也不想多谈，大家可以去http://egret-labs.org上看看Egret Runtime的产品介绍页，就明白我们为啥要针对H5做个Runtime。很多明眼人一看就会说，这不就是个Flash Player么？！答案是Yes，也是No。
　　Yes的部分是我们的团队原来都是做Flash的，受Flash影响颇深。Flash Player里具备很多优秀的Web游戏设计思想都是很赞的，我们就想我们可以用C/C++和OpenGL围绕着这些设计思想，再做一个取代webview的游戏加速器，让开发者基于Egret引擎开发的H5游戏，可以直接通过这个Runtime加速。No的部分是Flash Player是to C的，要让用户去装，而Egret Runtime是to B的，集成到平台app里，作为一个库，当用户在平台里玩游戏时候激活，玩家是不知道Egret Runtime存在的，我们也不打算对玩家去刷什么存在感。Egret Runtime是为了解决H5游戏性能，适配，系统底层调用和碎片化的问题而生的一个产品。
　　在Egret Runtime上，我们跟各大平台的合作关系也很融洽，为什么？因为我们就是他们平台内部的一个组件，生命周期受平台app的控管，你激活我，我就干活，你移除了我，我就进入sleep模式，丝毫不影响人家平台业务，还能提高H5游戏的用户体验，也不骚扰用户，何乐而不为？尤其在Android上，一个activity级别的控件是让平台恐惧的，而一个view模式下的控件，平台是喜欢的。下图是Egret Runtime的HighLevel架构图：
Egret Runtime的HighLevel架构图
　　看了这张架构图，我想诸位看官应该知道商业机会在哪里了。
　　4.Egret现在就是个2D的，木有竞争力啊！
　　近一年内，Egret Engine的确是2D的，但是大伙不都是以进步的眼光看待事物么？Egret也一样，秉着天下武功，唯快不破的思路，我们规划了一下2015年的Egret Next，我们也在预研3D的部分，code name是HummingBird(请原谅我们团队就是喜欢鸟)，更细节一点的计划图在这里：
HummingBird计划图
　　5.说了半天，你们的套路到底是啥？
　　来看这张图，我们想为H5或者叫做使用H5(JS/TS)技术的web游戏开发者打造这么一套环境：
当然，随着时间推移，这图里面的每个环节可能都会过期
　　所以，说H5移动游戏也好，说Web移动游戏也好，说用脚本开发native也好，工作流齐全了，这些还算是问题么？
　　我自己作为Egret的技术管理人，在我10多年的职业生涯里，信奉这么几句话：
　　1. 永远不要基于现在去假设未来。
　　2. 永远不要尝试用一个成功打败另一个成功。
　　3. 预测未来的最好方式就是创造未来。
　　4. 就是干！
&&|&&&&|&&html5游戏开发的五个最佳实践
HTML5是伟大的,因为它多才多艺的 - 它没有具体针对单一的平台.更重要的是,HTML5是无所不在的. 就我所知的,它在你的PC上,你的手机上,你的平板设备上,甚至在你的厨房电器上.&
就凭HTML5-多才多艺和无所不在这两个特点 -- 不辩自明, 为什么众多的开发者们备受鼓舞. 然,众所周知,&一旦开发者们被激发了灵感,他们常常会编写游戏.&(好吧,可能只是我做了.)
幸运的是,有关HTML5游戏开发的文章比比皆是. 然而, 在你打算使用HTML5编写游戏之前, 我不得不给你一些建议.
&你能从本文中学习到什么? 我將提及HTML5游戏开发框架, 怎样通过支持智能手机和手持设备使受众更广泛, 怎样管理游戏状态, 怎样解决性能问题, 怎样支持大多数浏览器平台.
因此,直奔主题,这里有5个创建HTML5游戏的最佳实践,实战!(&实战&增加了戏剧效果)
最佳实践 #1:使用框架&
编写简单游戏在HTML5中是很容易的,但是当你押宝在HTML5上,你就需要做更多的准备,确保游戏顺利运行.
例如,当你使用了很多的图片,声音效果,和其它的资源,它们会花费一些时间等待浏览器从服务器下载. 如果在编写游戏时, 你不把它放在心上, 你会焦头烂额. 因为图片和声音文件是异步加载的,你的JavaScript代码会在资源全部加载完成前执行.这常常导致&popping&(图片不可用),声音效果在需要时不播放. 好的修正方法是创建一个预加载器,延后脚本代码的执行,直到所有的资源都下载完毕为止.&
另一个问题是,你很可能想在不同的机器和/或不同的浏览器,以不同的速度运行你的游戏. 对此, 当你没有更多做为的时候,你仍要确保动画和移动速帧独立于游戏运行平台.&
实际上, 每个游戏都很多功能性的样板代码. 幸运的是, 你不必自己从头编写. 有很多框架让你仅关注游戏逻辑, 而不是去担心这些琐碎(和大)的事, 确保你的游戏顺利运行.&
使用框架唯一需要注意的是, 你有太多选择. 像框架, 皆在帮助开发游戏的方方面面, 而像框架主要关注图形处理. 最后还是由你来挑选你认为最舒服的框架. 这些可能让人摸不着头脑, 但在JavaScript世界, 确定了框架往往意味着确定了编程风格.
ig.module(
.requires(
'impact.game',
.defines(function(){
Monster = ig.Entity.extend({
一个好例子是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.&
纵然这样,既然大多数移动设备缺乏一次渲染整个网页的能力, 采用先进的缩放和平移技术编写游戏可能会适得其反. 这可以通过viewport标记关闭.下面的代码片段將使游戏窗口占满可用的横向屏幕. 设置属性&user-scaleable&为&no&告知手机浏览器禁用平移, 否则常常会导致手指控制游戏的冲突.&
&meta name=&Viewport&
content=&width=device- user-scaleable= initial-scale=1.0&
就算游戏在小屏幕设备上渲染没问题, 你也应该停下来思考一下输入问题. 大多数仅支持触摸式的设备拥有个虚拟键盘,他们可能会占用太多屏幕空间来控制游戏角色. 如果严格的触摸式输入出了问题, 你应该创建一个受限的虚拟键盘,仅仅创建游戏需要的按钮(如方向键). 然而,最好的做法是控制你的游戏,不需要额外的屏幕元素. 一个很好的例子是Spy Chase游戏,你用一个手指控制自动车(一些你不可能在实际生活中尝试的东西).&
最佳实践 #3:自动保存玩家进度
像site pinning特性, 试图给web浏览器web应用程序和常规的桌面应用同样的地位. 然而, 作为应用程序运行的网站想法太新了, 网页要维持客户端状态. 关闭Microsoft Word前,你可能会三思后行, 但是可能不会对于一个开放的网页谨慎行事.大部分时间, 它不是问题 --- 大多数网页要嘛是无状态的, 要嘛是在服务器上维护记录你的信息.&
然而, 浏览器游戏, 是非常不同的小怪兽. 既然JavaScript代码运行在客户端, HTML5游戏状态通常都保持在瞬时内存中(又称RAM).关闭游戏器窗口,你辛苦赚取的积分就付之东流了.&
现在, 你可能会认为, 一个明智的用户会足够谨慎, 他们连续玩了8小时, 不关闭游戏. 但事故常有发生, 特别是当打开了多个选项卡或突然断电.
一言蔽之: 当编写HTML5游戏的时候, 绝对的最佳实践是定期保持玩家进度, &允许玩家恢复上一次关闭网页时的状态.
现在,你应在哪保存玩家的进度呢?过去,显而易见的地方是服务器端或浏览器cookie. 两个解决方案都不是特别有吸引力. 服务器端方案, HTTP请求不得不每次构造需要存储或取回的信息. 使用cookie的方案, 你的空间就非常有限了, cookie的可用空间大大依赖于浏览器配置.
更好的可行方案是使用HTML5 DOM storage. DOM storage 通过一个接口, 让你为每个网站保存几兆的数据, 它类似于一个key-value存储(或者一个JavaScript expando对象). 这非常方便,但在HTML5游戏上下文中, 你也可能需要记住复杂的数据结构 --- 一些DOM storage非原生支持的结构.&
幸运的是,现代的JavaScript引擎都有内建的机制, 將对象序列化成紧凑的结构,如JSON. 使用这种方案, DOM storage也可以记住复杂信息.接下来的两个助手函数, 使用HTML5 DOM storage和ECMAScript5的内建JSON特性, 解决了游戏状态的存储和取回.
ECMAScript5:&
function saveState(state) {
window.localStorage.setItem(&gameState&, JSON.stringify(state));
function restoreState() {
var state = window.localStorage.getItem(&gameState&);
if (state) {
return JSON.parse(state);
最佳实践 #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,聊天室和社交网络.做为一个浏览器的游戏开发者, 你可以创建游戏, 让世界各地的人聚集在一起, 带给他们快乐.
如果你是一个HTML5游戏的开发新手,可能编写你曾经玩过的线下游戏的克隆会很诱人. 这种做法没有错误. 但是,如果你想让做线上游戏, 现在是一个好的机会, 请拿出全新的, 极具创意的游戏理念. 一个有趣的例子是 Warimals, 第一个基于HTML5的Facebook游戏.在 Warimals 中,你可以扮演小狗或小鸡,还能让你的Facebook好友和你一起玩. 何乐不为呢?
感谢框架开发者的工作和JavaScript开拓者, HTML5已经成为一个相当成熟的游戏开发平台. 这是好消息, 因为web是个普适的应用环境，只要有合适的工具（很多已经集成到IE9和IE10或者可以免费下载）和合适的框架，HTML5的开发体验会充满愉悦并令人振奋，尤其是在分享有趣的和创造性的经验的时候。
，OSCHINA原创翻译，转载请注明出处&
尼玛，HTML5 现在越来越强大了，是否该介入研究研究呢
EaseJS&----》
easejs,&easyjs
以后移动web肯定都是html5的了，必须要介入
就是不知道移动app会不会被移动web干掉
--- 共有 2 条评论 ---
: 4G都出来了，在中国最大问题还是资费太高。
移动web好处是不用考虑平台，开发一次，到处运行。跟移动app比就是用户体验不够好，但是这随着技术发展都不是事。
一直在听说，从来没介入
webapp和app 各有优势，谈不上一个吃一个。
和现在的应用程序和网站 同一个道理。
对于HTML5，各大浏览器厂商还没有一个统一的标准。呵呵。要达到统一，还要一段时间呢。
APP显示部份也是可以用HTML5来实现的
移动互联网也要进入web的时代，得抓住这个机会呀
开始介入！