开发者应该关注的五项Web新兴技术

澳门新葡亰网址 5

当你开发基于HTML5的游戏时,你有很多选择。使用什么样的编辑器?是否用到Canvas
2d、WebGL?采用什么样的呈现框架和游戏引擎?这些选择大部分由开发者的个人经验和游戏将要发布的平台决定。

澳门新葡亰网址 1

幸运的是,有关HTML5游戏开发的指南现在已经有很多了。而这篇文章则是要告诉开发者在开发HTML5游戏以前应该具备的一些全局概念。你能从这篇
文章中学到什么?这里会介绍HTML5游戏开发的一些框架,你将知道如何使你设计的游戏能够在更多的平台上运行,了解如何管理在线游戏的状态,如何处理性
能问题。

本文作者Bruce
Lowson是Opera开放web标准的撰写人员之一,他希望通过本文与大家分享值得每个开发者关注的新兴Web技术。1.
WebGL
WebGL是一种基于Web的Graphic库,由非盈利组织Khronos运营,目前结合HTML5canvas元素广泛应用在3D图形开发中。学习WebGL比较困难,因为它是底层开发——运行在GPU上面,而且它实际上是一个OpenGL的JavaScript
port,是一种游戏开发者使用的已经长期建立的API集。WebGL的主要受众是哪些已经拥有丰富OpenGL经验的游戏开发者,他们可以通过WebGL为web平台编写游戏。好在有很多资源可以帮助您学习WebGL,这些资源不仅仅是关于游戏开发的,还有很多关于奇幻的图形、视觉和音乐视频等方面的内容。作者推荐:Introduction
to WebGL,作者Luz Caballero,可以获得各种库的简介。Raw WebGL
101,适合不使用库的用户。Learning WebGL,一个非常好的引导网站。WebGL
101,一个由Erik Moller制作的介绍视频。See Emberwind,一个由Erik
Moller做的WebGL游戏port,您可以深入Github或看代码。目前除了IE10的桌面浏览器都支持WebGL。对于移动产品来说,它已经在Opera
Mobile 12中发布了,最终会出现在Android、BlackBerry Playbook 2.0、Nokia
N900、SonyEricsson Xpertia Android Phones等以及Firefox移动浏览器中。2.
SVG
SVG已经在Opera,Firefox,Chrome中存在多年了,但是直到IE9开始支持它之后才渐渐变得主流。它在HTML5Canvas的光环下显得有点暗淡,尽管SVG和HTML5canvas是面向不用应用的不同工具。Canvas2D可以迅速paint图形到屏幕上面,但是其全部功能就是paint了,没有内存来做位置,顶层或其他的功能。如果您需要那种book-keeping工作,就只能自己用JavaScript实现,因为Canvas2D不会把DOM保存到内存中,也正因为如此Canvas2D速度快,十分适合第一人称射击类应用。与Canvas2D不同,SVG在您需要保存DOM的时候就给力了。使用JavaScript,所有的Objects都可以移动并且与动画无关。您可以试试Daniel
Davis做的复古类SVG游戏Inbox
Attack来体验一下,并且看看源代码来了解如何完成动画效果。因为shape和path是用Markup来描述的,所以他们可以用CSS来定型。与canvas不同,text在SVG中保持text格式并且更加的灵活,更加可扩展,更加易于访问。在Canvas中,text变成了像素,就像Photoshop中的图形text。SVG最强大的特性是它基于矢量,这样您的插图,图形和UI图标等都是矢量图了,这样无论是在50英寸的电视屏还是手机屏幕桌面上,看上去感觉都是一样的清晰。在当今这样一个web应用无处不在的时代,SVG图形甚至可以包括媒体查询,可以是响应式的,也可以根据不同的目标设备做尺寸的调整。综上所述,在最新的桌面浏览器中SVG已经能被广泛支持了。在移动产品方面的支持总体上来说也很好,以及预期在Android
3.0版本之前原生浏览器也会支持它了。Daniel
Davis有一些SVG的介绍性资源,作者也推荐一本免费的电子书《Learn
SVG》,您也可以看看《SVG or Canvas?Choosing Between the
Two》来了解二者的区别。3.
getUserMedia
不像那些被错误地称为HTML5的API,getUserMeida有个相对正当的理由:起初它是HTML5device元素,之后它改名了然后离开了W3C
WebRTC规范集合。gUM允许访问用户的摄像头和麦克风,本来是在WebRTC规范中在浏览器中进行P2P视频会议的,当gUM拥有了其他的用途,就离开了WebRTC。摄像头的访问最终在Opera12安卓版、Opera桌面实验室和Google
Chrome
Canary里面实现了,不过Opera和Chrome都还没有实现麦克风的接入。W3C规范依然在用,所以Opera和Webkit有不同的语法规范,这样的麻烦被一个叫做The
gUM
Shield的小JavaScript片段搞定了。如果您想更深入地了解这方面请看作者的另一篇文章:It’s
Curtains for Marital Strife Thanks to
getUserMedia当视频从设备开始流传输的时候,源数据可以被做成变成了video元素,如果需要的话还可以被定为到屏幕外面,然后拷贝到canvas里面进行所需要的操作。Paul
Neave写的《HTML5 变成玩具!》方便把流媒体数据拷贝到WebGL中。作者在.net
杂志的226话有采访他的报导。如果想把web app的功能做得像native
app,gUM需要做很多的工作。试了一下Neaver的gum和WebGL 在Opera Mobile
12上面的demo,感觉和平台独有的app一样富有响应式并且很时髦。当在浏览器产品中其功能被广泛应用的时候,作者语言会有很多基于web的QR代码阅读者以及很多增强现实的应用。4.
File APIs
W3C File
APIs允许JavaScript访问本地文件,其中最常用的API是FileReader,可以从Opera,FireFox,IE10平台等的预览版看到。这一份W3C规范“为了在web应用中提供API来代表文件对象,以及编程选择和访问数据”。例如:你可以上传文件到浏览器中,并本地查找相关信息而不需要到服务器端。您也可以打开文件,操作内容,这样可以加强基于浏览器的应用的交互性,用起来更像是本地应用。另一个常用的用途是使传统的图像上传更具有Web2.0特色:通过允许在浏览器内部的Drag
and Drop,而不是本地文件系统中改变。您可以通过使用一个普通的input
type=”file”开始,然后循序渐进地提高。HTML5
DragDrop支持特征检测,如果存在的话就使用div替换input,那就是您的drag图像目标了。当图像被drag到目标的时候,使用File
Reader API来显示一个指甲盖大小的图像。您可以看一下Remy
Sharp的demo。还有很多写文件和操作文件系统的规范,不过这些对目前的跨浏览器应用来说还不太够:W3C文件API,非常基础的介绍。开发文件系统API,HTML5
Rocks文章。5. Feature-detecting, progressive enhancement and upgrade
messages
诚然,在没有那些奇幻的API的时候,大家总是试图使用渐进式增强和HTML语义的方法让网站照常工作。然而有时候却不能这样,例如Paul
Neaver的《HTML5变成玩具》中,如果gUM和WebGL现在不存在的话,其网站不能有什么补救措施了,整个网站的核心都没了。在这样的情况下有两种典型的惯例:要么是显示一条消息说“你需要升级浏览器”或者说“你必须用Chrome6/Firefox
4/Opera10等[插入能支持你应用的浏览器]才能访问”。第一种方法又没用又粗鲁,没有建议和补救措施;第二种方法是个临时办法,因为六个月之内所有浏览器可能都能支持你现在使用的技术了,让你在网站上留下过时信息。例如您写的解决方案是建议使用Firefox4来访问,可是半年后用户安装着Firefox7回来访问你的页面了,这可就真的没救了。如果您真的不能使用渐进式增强,那么就用新型的HTML
5 Please API吧。这是Jon Neal、Divya
Manian和其他几位专家创作的。使用它,可以先查询caniuse.com然后返回一个最新的浏览器版本列表。如果您已经做了一个需要Canvas或WebSQL
DB技术的DEMO或者网站,恐怕你已经处在一个这样的尴尬境地了:您只是在告诉访问者们他们的浏览器版本太低,但是您不能只推荐他们使用一个能支持这些特性的浏览器来补救,例如“找个支持WebRTC性能的浏览器再来吧”,这样对于大家都没啥效果。HTML5
Please
API把开发人员的语言翻译成用户能理解的语言。通过调用这个API你就可以得到一些HTML返回值来告诉访问者,或者返回一个带有相关数据的JSON对象。这样您可以根据不同的客户来显示不同的补救信息了。使用这种方式最令人欣慰的是:如果所有新特性在客户当前浏览器的升级版都能支持的情况下,Please
API值建议访客对浏览器升级,而不是让访客单纯为了访问你这个页面而更换浏览器。效果图如下:最后正如您所看到的,大量的令人惊喜的新技术正在接踵而至,在着手研究上述某项技术的时候恐怕又要担心更新鲜的技术到来了。希望你的开发过程愉快,并尽量让开发的应用在尽可能多的浏览器上进行测试。Via
netmagazine

话不多说,现在就开始介绍HTML5游戏开发的几条实用建议。

建议1:使用框架

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

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

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

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

使用框架时唯一需要注意的一点就是如何从众多的框架中挑选一个合适的框架。像ImpactJS这样的框架功能非常强大,几乎可以在各个
方面为开发者提供帮助;而像EaselJS的框架则主要是处理图形方面的工作。最后,还是需要由开发者决定使用哪种框架更加合适。这看起来似乎很简单,但
在JavaScript的世界里面,选择一个框架时也意味着你选择了一种特定的编程风格。

functionsaveState(state) { 
    window.localStorage.setItem("gameState", JSON.stringify(state)); 
} 
functionrestoreState() { 
    varstate =window.localStorage.getItem("gameState"); 
    if(state) { 
        returnJSON.parse(state); 
    }else{ 
        retrun null; 
    } 
}

Monster=ig.Entity.extend({eyes :
42});});ImpactJS就是一个很好的例子,它不仅提供了图像显示和音效处理的方法,还在实现中插入了自己的对象和模型。

澳门新葡亰网址 2

Ascended Arcade三个月内发开了三款游戏,全部使用的是ImpactJS的框架

虽然现在已经有很多HTML5游戏使用了一些框架,但是还是有很多开发者不嫌麻烦地选择不依赖任何框架完全自己开发。如果你想在合理的时间内完
成任务,使用框架当然是最有效的方法。Ascended
Arcade就是一个很好的例子,在短短三个月的时间里,他们就开发出了三个游戏,全部使用了ImpactJS框架。

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

HTML5最大的卖点之一就是它既能在桌面PC上使用,也能在笔记本电脑、平板设备甚至是智能手机上运行。(这里有IE9在Windows
Phone 7 Mango上的运行效果演示)。

HTML5与生俱来就具备了跨平台的特性,通常为开发者节省了很多工作。然而,有些事情是需要开发者考虑的…

澳门新葡亰网址 3

SpyChase在Windows Phone 7 Mango上的运行效果

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

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

建议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可以保存任何格式的信息。下面的两个函数展示了如何使用HTML5 DOM
storage保存游戏状态以及ECMAScript5中的JSON功能:

functionsaveState(state) { 
    window.localStorage.setItem("gameState", JSON.stringify(state)); 
} 
functionrestoreState() { 
    varstate =window.localStorage.getItem("gameState"); 
    if(state) { 
        returnJSON.parse(state); 
    }else{ 
        retrun null; 
    } 
}

建议4:使用profiler

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

好的消息是近几年来,浏览器的速度越来越快了,基于HTML5的游戏已经可以达到每秒60帧了。

这是非常了不起的。对IE9来说,这意味着开发了一个全新的JavaScript引擎,能够利用多CPU内核以及基于Direct2D的硬件渲染管道。换言之,如果你配备了高配置的游戏平台,IE9就能充分地利用这些硬件平台。

澳门新葡亰网址 4

IE9整合了JavaScript分析器,能够发现性能瓶颈

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

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

幸运的是,这里有些工具可能能够帮助你。在IE9(或是IE10)上,通过按下F12按键可以打开开发工具面板。选择“Profile”选项然后选中“Start
profiling”。

现在在你觉得性能需要提升的地方停留30秒,profiler将收集相关数据,然后选择“stop
profiling”。你将看到你的游戏中的每个功能的累积执行时间。通常,你会发现某些功能占用了大部分的时间。这样你就能有针对性地优化那些特别耗时的功能了。

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

澳门新葡亰网址 5

游戏变得越来越社会化:Warimals是基于HTML5的游戏,用户可以与Facebook上的好友一起参与游戏

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图