首页 > H5资讯 > HTML5资讯 >分享给HTML5游戏开发者的5条建议

分享给HTML5游戏开发者的5条建议

2016-02-04 12:13 来源:伍游网 编辑:未知 0人参与评论
【摘要】今天,伍游网为大家带来的这篇文章就是要告诉各位HTML5游戏开发者在开发之前应该具备的一些全局概念,一起来看看吧!

  作为一个HTML5游戏的开发者,你会使用什么样的编辑器?是否用到Canvas 2d、WebGL?会采用什么样的呈现框架和游戏引擎?今天,伍游网为大家带来的这篇文章就是要告诉各位HTML5游戏开发者在开发之前应该具备的一些全局概念,一起来看看吧!


01.jpg


建议1:使用框架


  如果只是用HTML5编写一些小程序其实非常简单,但如果你想往游戏中加入更丰富的功能,那么就有许多其他的事情需要处理了。


  比如,如果你的游戏中有大量的图片、音效或是其他的资源,那么浏览器需要从你的游戏服务器上下载这些资源,这往往需要花费很多的时间。如果你在编写程序的时候没有考虑到这些问题,那么你就会对最后的结果感到意外。由于图形和声音文件都是异步下载的,也许在资源下载好以前你的JavaScript脚步已经开始运行了。这就是所谓的“爆音”现象(图像显示异常),而声音也可能在错误的时间播放。一个好的解决方法就是创建一个预先下载机制,保证所有的资源下载完以后才允许脚本执行。


  另一个你可能碰到的问题就是你的游戏在不同的机器甚至是浏览器中运行的速度有所不同。虽然这在你的控制范围以外,但你还是可以尽量使得你的动画或是动作的速度不依赖于游戏运行框架的速度。


  其实,现在有许多的游戏模板代码,里面实现了大多数游戏需要的功能。这样,开发者不需要从头到尾编写一个完整的游戏程序。现在有许多框架可以帮助开发者设计游戏,开发者只用关注具体的游戏逻辑,而不用担心如何使游戏顺畅运行这些细节问题。


  使用框架时唯一需要注意的一点就是如何从众多的框架中挑选一个合适的框架。像ImpactJS这样的框架功能非常强大,几乎可以在各个方面为开发者提供帮助;而像EaselJS的框架则主要是处理图形方面的工作。最后,还是需要由开发者决定使用哪种框架更加合适。


0933422.png


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


  HTML5最大的卖点之一就是它既能在桌面PC上使用,也能在笔记本电脑、平板设备甚至是智能手机上运行。HTML5与生俱来的跨平台特性通常为开发者节省了很多工作。然而,有些事情还是需要开发者考虑的…


  首先也是最重要的一点,不同设备屏幕的尺寸也有所不同,屏幕的宽高比以及分辨率可能有很大的差别。如果想让你的HTML5在移动设备上拥有良 好的效果,确保它支持多种分辨率并且不超过WVGA的800×480框架大小。此外,由于大多数的移动设备无法在一个屏幕上显示所有的页面内容,他们常常采用精确的缩放和平移技术,而这些技术通常并不适用于游戏的编写。可以在编程的时候使用viewport meta标志禁用这些功能。移动浏览器上的缩放功能常常与触控游戏控制功能产生冲突,可以将“userscaleable”参数设置为“no”,从而禁用浏览器的缩放功能。


  现在你已经能够将你的游戏视图很好地呈现在小屏幕设备上了,接下来就该考虑如何处理用户输入的问题。大多数触屏设备都有一个虚拟键盘,但是在玩游戏的时候显示一个虚拟键盘实在太浪费空间了。你应该开发一个有限的虚拟键盘,只提供游戏中使用到的按键(比如箭头)。当然,最好是尽可能在游戏中不需要使用额外的元素。Spy Chase在这方面做得很好,用户只用一个手指就能控制游戏中的汽车了。


14265610239834.jpg


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


  使用site pinning、web浏览器试图让Web Apps可以像桌面apps一样工作。但是,让网站像Apps一样运行的想法还比较新鲜,同样的,让Web页面保存客户端的状态也尚未成熟。用户在关闭Microsoft Word的文档时可能会思考一下内容是否已经保存,而在关闭Web页面时往往不会这么仔细了。通常这并不会带来什么问题,大多数的Web页面是没有状态的,或者是将用户的记录保存在了服务器上。


  但如果是处理浏览器游戏,情况就完全不同了。通常在客户端执行的是JavaScript代码,HTML5游戏通常将游戏的状态缓存在内存中(RAM)。一旦关闭浏览器窗口,用户辛辛苦苦赢得的高分就永远地丢失了。你可以要求用户小心一点,不要将正在进行的游戏窗口关闭,但是意外总是会发生的,尤其是当用户开了多个窗口或是电池没电的时候。


  在编写HTML5游戏时,最好是经常将游戏玩家的进度状态保存一下,当用户重新打开关闭的web页面时,应该让用户可以继续之前没有结束的游戏而不是重头来过。你应该将用户的记录保存在哪里呢?过去,答案往往是服务器端的数据库或是客户端的cookie。但是这两个都不是最佳的选择。如果是在服务器端,则会产生额外的HTTP请求开销。如果是cookie的话,则可以保存记录的空间非常有限,并且cookie的寿命取决于浏览器的配置。


  一个更有效的方法是使用HTML5 DOM storage。DOM Storage提供了一个key-value存储(或是JavaScript定义的对象)的接口,可以为每个网站保存几兆的数据。使用起来非常方便,但是,在HTML5游戏中,你可能想要记录一些更加复杂的数据结构,这些DOM storage本身可能并不支持。幸运的是,现在的JavaScript提供了一套机制帮助开发者将一组对象压缩成一些紧凑的符号,这就是JSON机制。使用这套机制,DOM storage可以保存任何格式的信息。


1454300395855043.jpg


建议4:使用profiler


  游戏开发中最大的挑战是在加入许多功能以后,如何保证游戏仍然具有高的帧显示频率。


  好的消息是近几年来,浏览器的速度越来越快了,基于HTML5的游戏已经可以达到每秒60帧了,这是非常了不起的。对IE9来说,这意味着开发了一个全新的JavaScript引擎,能够利用多CPU内核以及基于Direct2D的硬件渲染管道。换言之,如果你配备了高配置的游戏平台,IE9就能充分地利用这些硬件平台。


  对于简单的游戏,这意味着你不必担心它的性能问题。但由于HTML5可以运行在任何平台上,这意味着你发开的HTML5游戏应该能够运行在任何一个设备或是浏览器上,其中有些设备或浏览器的处理能力可能并没有你希望的那么快。即使你的应用只针对高性能的PC,游戏的性能也是一个不得不考虑的问题。


  如果你要求你的游戏达到每秒60帧,这意味着每一帧的渲染时间不能超过16毫秒。也就是说,在你一眨眼的时间里面,你需要完成至少6帧的渲染工作。现在听起来可能有点难以想象…但是有些非凡的游戏确实能够做到。


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


  不要过分相信自己的直觉,有些代码可能看起来效率很低,但在某些JavaScript引擎上执行起来速度却很快。最好的办法就是时常反复分析程序,对于修改过的代码,需要反复进行测试确保你的修改确实能够提升程序的性能。


1454034779560493.png


建议5:要有创造性


  能够开发出在浏览器中运行的游戏是一件很棒的事情,而更酷的是可以使用HTML5在浏览器上开发游戏应用!从技术的角度看,HTML5是非常棒的,而浏览器也是非常理想的游戏平台。


  想想看…各种不同的设备上都有浏览器,它们通常是时时在线的,它是人们接收邮件、聊天和社交网络的工具。浏览器游戏的开发者,可以利用自己开发的游戏将来自世界各地的人们联系在一起。


  作为一个HTML5游戏开发者,你必须了解很多很酷的开发工具,包括JavaScript Debugger、Style Editor、Page Inspector、Scratchpad、Profiler、Network Monitorand Web Console等。


  分享给HTML5游戏开发者的5条建议到此就结束了,不知道各位开发者从这 篇文章中学到了什么?也许你学到了如何使你设计的游戏能够在更多的平台上运行!了解了如何管理在线游戏的状态!如何处理性能问题等。不管你学到了什么,都让我们明白了HTML5游戏的前景是非常好的。


  更多游戏资讯请关注伍游手机页游媒体平台

版权声明:凡注明伍游网原创的文章版权归伍游网所有,未经允许不得转载。投稿与合作,请发至邮箱:news@5you.cc
0
发表评论
评论(0人参与,0条评论)
发 布
注册
最新评论
亲,还没有评论哦!