canvas教程

HTML5游戏技术开发难点分析

字号+ 作者:H5之家 来源:H5之家 2016-09-21 17:00 我要评论( )

HTML5游戏的优劣势 最近微信公众游戏平台讨论得如火如荼,HTML5游戏的热度也一波高过一波,那么开发HTML5游戏和传统游戏相比有什么优劣势呢? 首先看优势,当属

游戏的优劣势

最近微信公众游戏平台讨论得如火如荼,HTML5游戏的热度也一波高过一波,那么开发HTML5游戏和传统游戏相比有什么优劣势呢?

首先看优势,当属跨平台最受欢迎,开发一套游戏即可在PC,平板、手机中无缝切换,而且统一标准的API也极大地方便开发者。其次,HTML5原生浏览器支持,无需任何插件支持,这对用户来说也是很大的一个优点。最后当属各大公司的鼎力支持,Google,Microsoft,Tecent, UC web等等

然而目前来看,HTML5的劣势主要体现在性能不足和游戏开发特殊API的缺失等,这篇文章将和大家分享在HTML5游戏开发中,常见的技术瓶颈以及如何解决。

输入事件响应

总所周知,游戏玩家点击频率是相当高的,能够达到120次每秒,而一款游戏显示达到30 FPS 即相当流畅,人眼基本感受不出间隔了。那么在HTML5中如何去处理这些输入事件呢? 由于JavaScript的单线程特性,如果原封不动地去处理这些输入事件,那么可想而知,UI现成将完全被阻塞掉。

解决方法分为三步:

1.      在缓存中记录每个输入事件,并非立刻处理事件

2.      在每次渲染时处理缓存

3.      自动清空缓存中已经处理过的事件

示例程序如下,我们分别通过buffer和no buffer情况下,一直按按钮来观察瞬时FPS的变化,通过在IE上面测试有buffer的情况下,性能要高于no buffer情况下20%左右,当点击频率高时,性能提升更加明显。读者可以下载App在本机进行测试。下载地址在本文附件中: 。

 

时间轴

开发过Flash游戏的朋友肯定对时间轴很有感情,用来做关键帧动画等非常方便。那么在HTML5中有没有时间轴可以用呢?如何精确控制帧动画。

解决方案有两个:

1.    使用setInterval动画可以达到目的,但是setInterval的精度比较低,在空闲状态下setInterval()的精度量级为10ms,setInterval的示例代码如下:

2.    更好的方案是在每一秒里面计算已渲染的帧数,同时设置很小的回调间隔,仅在正确的时间进行渲染,这样可以方便的得到FPS信息, 示例代码如下:

图层

图层是游戏开发中,非常重要的概念,使用图层可以将活动物体和背景静止物体相分离,分开渲染和绘制,仅仅重绘必要部分并缓存以固定模式变化的帧动画来提高性能,通过图层,还可以由Play/Stop/Show/Hide等封装游戏逻辑。在事件处理上,图层同样很重要,通过只处理落在图层上的事件,可以提升游戏体验。但是在HTML5中并没有图层工具,这给游戏开发者增加开发难度。

第一个解决方案是通过共享canvas的逻辑图层,具体步骤为:使用同一个canvas将绘图代码按逻辑关系封装成“图层”。这种方法难点在于如何尽可能缩小重绘区域。它的优点是可最大化绘图性能,方便实现timing function;缺点是图层间无法完全独立,需要反复重绘同样内容。这种方法比较适合于存在大量动态图元的场景。

第二个解决是基于DOM元素层级关系来将Canvas分级创建多个canvas结点,每一个独立渲染,用zIndex管理层级关系。这样来处理的优点是图层互相不干扰,业务逻辑可完全独立;缺点在于动态渲染效率较低。适用场景是背景动画/游戏菜单/独立的动画元件等。

其结构如下:

Flash游戏开发中,通过设置关键帧可以快速创建出动画效果,那么在HTML5游戏中,关键帧可以通过以下方法来设置:

第一步,将关键帧事先绘制好,制作成图片,然后配置帧出现的时间点、帧与帧之间的间隔最后将将关键帧图片打包成整张图片。

这个方法对应于两个方案,分别是Canvas方案和CSS Animation的方案。Canvas方案用drawImage绘制图片,通过设置合适的clip区域来动态绘制的关键帧,可使用getImageData/putImageData来绘制。CSS Animation的方案keyframes 和Timing functions来操作。

音频效果

音频效果的处理详见另一篇文章的介绍:。

Canvas绘图性能

Canvas绘图是游戏开发最需要注意的点。下图是一款游戏的性能分析,可以看出,stroke占用了84.74%的性能。

我们可以通过以下几个方法来提升Canvas性能:

1.    预渲染场景中的部分物体, 最后一次性Stoke()/fill()

我们分别测试了上图中的直接渲染方案和预渲染方案,结果显示在Chrome中,有接近100%的性能提升。

2.    使用 水平/竖直的直线绘图性能比斜线性能要好,同时可以使用Rotate, Scale等避免多次绘图操作,如下图所示,斜线,四边形等都可以由左边的正方形通过变形得到。

3.    避免做重复的像素操作。在游戏中,经常出现一个角色有不同的配色方案,这时候,我们通过色彩和透明度的调节和叠加比直接像素操作更高效。如我们需要渲染下图中的黄忠,同时我们还需绿色,紫色等等。那么我们通过几种基本颜色进行叠加来获得所要的效果更好。

Canvas的绘图性能一直是游戏开发者最为繁琐的事情,那么下面列出三种替代Canvas的选择,但是也是各有各的有点和缺点:

1.       WebGL-2d使用webGL 渲染2d canvas,WebGL可以充分使用GPU来渲染,提高性能。但是目前浏览器对WebGL的支持度还不如Canvas,尤其在移动端浏览器上面。

2.    SVG + CSS3

Adobe Wallaby将Flash动画导出成 SVG + CSS3 Animation。

3.    简单动画采用DOM元素

通过Absolute positioning: 改变left/top/right/bottom和CSS translate来做动画

第二和第三个方案都仅适合于动画比较简单的场合。

参考

1.    Cocos2d-HTML5 

2.    Huan Du, HTML5 game challenges and solutions

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5中Canvas与SVG的画图原理比较 自学教程视频1qun.com

    HTML5中Canvas与SVG的画图原理比较 自学教程视频1qun.com

    2016-09-21 15:00

  • HTML5Canvas绘图详解drawImage()方法有图有真相!!!

    HTML5Canvas绘图详解drawImage()方法有图有真相!!!

    2016-09-20 11:00

  • HTML5 Canvas 图形绘制处理

    HTML5 Canvas 图形绘制处理

    2016-09-19 18:00

  • HTML5 Canvas创建及绘制图形图片视频教程

    HTML5 Canvas创建及绘制图形图片视频教程

    2016-09-19 11:00

网友点评