吧里有没有人研究（过）html5游戏开发引擎的

来源：蜘蛛抓取(WebSpider) 时间：2017-01-08 22:55 标签： html5游戏开发教程
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。HTML5游戏技术开发难点分析_博看文思吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：719贴子：
HTML5游戏技术开发难点分析
（转自英特尔）HTML5的优劣势最近微信公众平台讨论得如火如荼，HTML5游戏的热度也一波高过一波，那么开发HTML5游戏和传统游戏相比有什么优劣势呢？首先看优势，当属跨平台最受欢迎，开发一套即可在PC，平板、手机中无缝切换，而且统一标准的API也极大地方便开发者。其次，HTML5原生浏览器支持，无需任何插件支持，这对用户来说也是很大的一个优点。最后当属各大公司的鼎力支持，，，Tecent, UC web等等然而目前来看，HTML5的劣势主要体现在性能不足和开发特殊API的缺失等，这篇文章将和大家分享在HTML5游戏开发中，常见的技术瓶颈以及如何解决。输入事件响应总所周知，玩家点击频率是相当高的，能够达到120次每秒，而一款游戏显示达到30 FPS 即相当流畅，人眼基本感受不出间隔了。那么在HTML5中如何去处理这些输入事件呢？ 由于JavaScript的单线程特性，如果原封不动地去处理这些输入事件，那么可想而知，UI现成将完全被阻塞掉。解决方法分为三步：1.
在缓存中记录每个输入事件，并非立刻处理事件2.
在每次渲染时处理缓存3.
自动清空缓存中已经处理过的事件
达内it软件培训,美国上市出品公司,成立14年,已培育超40万毕业学员,合作企业超70000家,开设:java/ios/android/web前端/html5/C/C++/php/嵌入式/软件测试等课程—免费试听!
示例程序如下，我们分别通过buffer和no buffer情况下，一直按按钮来观察瞬时的变化，通过在IE上面测试有buffer的情况下，性能要高于no buffer情况下20%左右，当点击频率高时，性能提升更加明显。可以下载App在本机进行测试。 开发过的朋友肯定对很有感情，用来做关键帧动画等非常方便。那么在HTML5中有没有时间轴可以用呢？如何精确控制帧动画。解决方案有两个：1.
使用setInterval动画可以达到目的，但是setInterval的精度比较低，在空闲状态下setInterval()的精度量级为10ms，setInterval的示例代码如下：2.
更好的方案是在每一秒里面计算已渲染的帧数，同时设置很小的回调间隔，仅在正确的时间进行渲染，这样可以方便的得到信息， 示例代码如下：
图层图层是开发中，非常重要的概念，使用图层可以将活动物体和背景静止物体相分离，分开渲染和绘制，仅仅重绘必要部分并缓存以固定模式变化的帧动画来提高性能，通过图层，还可以由Play/Stop/Show/等封装游戏逻辑。在事件处理上，图层同样很重要，通过只处理落在图层上的事件，可以提升游戏体验。但是在HTML5中并没有图层工具，这给游戏开发者增加开发难度。第一个解决方案是通过共享canvas的逻辑图层，具体步骤为：使用同一个canvas将绘图代码按逻辑关系封装成“图层”。这种方法难点在于如何尽可能缩小重绘区域。它的优点是可最大化绘图性能，方便实现timing function；缺点是图层间无法完全独立，需要反复重绘同样内容。这种方法比较适合于存在大量动态图元的场景。第二个解决是基于DOM元素层级关系来将Canvas分级创建多个canvas结点，每一个独立渲染，用zIndex管理层级关系。这样来处理的优点是图层互相不干扰，业务逻辑可完全独立；缺点在于动态渲染效率较低。适用场景是背景动画/菜单/独立的动画元件等。其结构如下：
贴吧热议榜
使用签名档&&
保存至快速回贴HTML5游戏开发必备资源
查看: 10089|
摘要: 当你开发基于HTML5的游戏时，你有很多选择。使用什么样的编辑器？是否用到Canvas 2d、WebGL？采用什么样的呈现框架和游戏引擎？
一个月前火狐发布了最新版本Firefox 31，新增了很多关于帮助游戏开发者开发和调试HTML5游戏的功能。除了Mozilla基金会目前依靠asm.js开发HTML5游戏外，其它游戏制作公司比如Dungeon Defenders Eternity和Cloud Raiders都在javascript中使用交叉编译器Emscripten编写游戏。总而言之，到目前为止HTML5已经是一个很成熟的游戏平台了。如果你对Emscripten感兴趣，你可以在Emscripten的wiki中了解到更多信息，MDN也提供了Emscripten的教程。如果你想用asm.js开发，可以看一下这篇教程。在这篇文章中，我们会向你介绍由Mozilla基金会创建的一些开发和调试HTML5游戏的资源。我们会以介绍为主，如果有什么问题，希望你可以在评论中给我们反馈。开始当你开发基于HTML5的游戏时，你有很多选择。使用什么样的编辑器？是否用到Canvas 2d、WebGL？采用什么样的呈现框架和游戏引擎？这些选择大部分由开发者的个人经验和游戏将要发布的平台决定。没有一篇文章能回答所有的问题，但我们希望这篇文章能为你提供一条捷径。工具作为一个HTML5游戏开发者，你必须了解很多很酷的开发工具，在Mozilla社区中我们已经介绍了很多为Firefox开发者提供的开发工具，包括JavaScript Debugger, Style Editor, Page Inspector, Scratchpad, Profiler, Network Monitorand Web Console.下面我们会介绍一引起最近更新的工具。Canvas Debugger在最新版本的firefox中，我们在浏览器中添加了Canvas调试。Canvas Debugger允许你跟踪所有的canvas上下文调用， 像绘制元素和使用特定的调色器一样，它会根据具体的要求调用颜色编码。它不仅在开发基于WebGL的游戏时有用，它同时也可以用来测试基于Canvas 2D的游戏。 在下面的游戏中，你可以看到动画被分解成很多个静态图，你可以点击任意一行直接查看那一部分的响应。想要了解更多Canvas Debugger的信息可以看一看。Shader Editor当你创建一个基于WebGL的游戏时，如果能在游戏运行时测试和修改着色器程序将是非常酷的一件事。使用Shader Editor就可以做到这么酷的事情。你不需要重新加载界面就可以修改顶点和片段着色器，还可以查看其对输出结果的影响。想要了解更多Shader Editor的信息可以看一看。&Web Audio Editor在最新的Firefox Aurora(32)版本中有一个Web Audio Editor，这个编辑器通过图表展示了所有的音频结点和当前AudioContext的连接。你可以通过它查看每个结点的特定属性。Web Audio API提供了更多混音的创建，对音频的操作和处理比HTML5的Audio标签强大很多。你可以通过了解如何使用Web Audio API。Network Monitor对于HTML5游戏开发者来说，需要花费昂贵的代码来对游戏进行繁琐的测试。如果游戏是在手机设备中运行，可以使用Network Monitor直观地看到所有的网络请求，系统耗时和类型大小等属性。&除此之外，你还可以通过Network Monitor直观地看到游戏的性能分析。想要了解更多Shader Editor的信息可以看一看。Web IDE开发游戏之前你必须先选择一个开发环境，同样，你有很多种选择(Sublime,Eclipse,Dreamweaver,vi等等)，重要的是你肯定已经有一款常用的开发环境了。如果你对浏览器端的开发环境感兴趣，你可以试一下Web IDE，它已经在Firefox的最新版本中上线了。总结如果你对上面的资源感兴趣，可以进行深入的学习，有什么收获可以拿出来和大家一起分享。英文原文地址：https://hacks.mozilla.org/2014/07/resources-for-html5-game-developers/#content-main
本站文章均由 HTML5中国 编辑从其他媒体精选HTML5相关文章转载，仅供网友学习和交流，如果我们的工作有侵犯到您的权益，请及时联系站长QQ：，我们会在第一时间进行处理！投稿： admin@html5cn.org
扫一扫 HTML5中国官方微信
Powered by

我要回帖

更多关于 html5游戏开发教程 的文章

 

随机推荐