HTML5经常被称赞为是Flash的游戏皇冠的继承人。它提供了真正的跨平台开发,让你能够在完成游戏创造后便将其同时带向台式机,平板电脑与手机上。这一技术也能够运行于智能电视上,或安装于台式机和其它设备的原生应用中。它甚至能够通过内置于浏览器中而运行于像Xbox 360或PlayStation 3等主机上。
对于任何想要跨越不同设备和平台开发游戏的人来说,HTML5无疑是个最吸引人的前景。但这里也存在一些显著的挑战。
这一术语本身(就像它所呈现的说明)对于不同人的描述也具有不同的意义。对于客户而言,HTML5是承诺简单,划算的跨平台传递的神圣技术。
对于开发者,这是各种不同技术相结合的术语,这些技术包括JavaScript,Web Sockets, Web Audio, Canvas, CSS3, WebGL等等—-每个都带有自己在不同平台的标准,优势以及限制。
但是对于用户:这却是完全不相干的—-它们只是他们正在使用并变得习惯的体验和性能。作为开发者,这便是我们所面临的主要挑战,特别是当你的目标是将游戏带到更多设备上的时候。
台式机vs手机vs跨平台
现在,我们都很熟悉运行于台式机浏览器中的HTML5游戏的神奇例子。通常是浏览器制造商自己创造或资助这款游戏,并在自己的软件上呈现其特殊的优势,或为了让特殊的API转变成符合HTML5的规格。
像《HelloRun》等游戏,或一些出色的Chrome实验,如《Racer》或《Arcade Fire’s Reflektor》都是使用HTML5可以做到的优秀典例。如果你想要看到这一系统未来的潜能,着眼于像three.js等程序库,以及最近的开放源Turbulenz或Epic对于自己的Unreal引擎的HTML移植。
而如果你着眼于运行在基于OS2.3的Android设备的这些例子,你将获得完全不同的体验,或者在某些情况下甚至不会取得任何体验。
是的,这是一个已经问世将近3年的操作系统,但它仍只拥有1/3的Android安装基础,基于你的目标用户群体,这一数值还可以变得更高。
这不只针对于较早的Android版本。你将在运行于iOS 5的苹果设备上,或者像Kindle Fire等更低功率的设备上看到同样的情况。实际上,现在并没有哪一款手机设备将允许上述的任何一个演示。
就像之前所提到的,对于大多数客户而言,选择HTML5的理由是确保他们基于浏览器的游戏将真正是跨平台的游戏。如果你只是面向台式机开发游戏,那么Unity和Flash都会是你的首要选择。它们都拥有强大的浏览器支持,并且也能作为原生应用输出设备,带你基于同样的代码走向手机和平板电脑。
在HTML5上开发跨平台游戏存在两个明显的挑战。第一个便是HTML5规格的不固定性。这可能导致分裂的功能支持—-不只是源于设备与设备之间,同时还是关于每个设备上的浏览器。此外,你还要基于一个不断变化的功能和支持开发游戏。
着眼于最近发布的iOS 7,它便打破了许多对HTML5游戏来说所必要的功能,或者Firefox 25的发布添加了Web Audio支持,同时破坏了许多HTML5游戏的音频执行。如此我们可以看到任何问题都有可能在一夜间就发生,而不受你这个开发者的控制。
其次,也就是开发者所面临的更大挑战是手机性能与能力的巨大变化。甚至当使用一个一致的功能集时,你的游戏将如何在不同设备间运行着。
为了理解存在多少变化,你可以运行多个JavaScript基准中的一个以测试设备的性能。举个例子来说吧,通过Canvas渲染100个精灵将在设备上基于60帧/秒执行,就像iPhone 4S或5,Galaxy S3,Nexus7或Lumia 820。但如果你在像HTC Desire(19帧/秒),Galaxy Ace(7帧/秒)或iPad 1(9帧/秒)等设备上尝试同样的代码,你将努力获得一些可游戏内容的代表。
如果你的项目瞄准了手机或平台电脑,特别是如果其中还包含这些早前或低功率的设备,你就需要尽早地进行测试。基于这种方法,你将理解设备范围的限制,并有效地调整技术方法与游戏设计。
如果你的项目并未瞄准手机或平板电脑,它也应该这么做。有将近1/3的英国网页浏览数是来自手机和平板电脑,基于如此快的增长速度,如此看来在2014年它们将超越台式机的浏览数。
尽管在工作时间,PC仍然是主导,但是在早晨手机更受欢迎,而晚上则是平板电脑—-作为那时候最理想的网页浏览和游戏工具。
选择你的战斗
在Chunk,我们已经为广播公司和品牌开发了2年的跨平台HTML5游戏。我们已经为BBC和迪士尼等在HTC Desire,iPad 4,Nuxus 7以及Xbox360等平台上运行各种内容的客户创造过许多基于浏览器的手机游戏。
作为开发者,能够决定想要怎样程度的分裂是件好事,但是我们的目标用户以及他们所使用的设备才是最重要的决定要素。通过与孩童品牌合作,我们经常能够发现自己受制于早前“传下来的”手机或廉价且低功率设备。
然而,基于谨慎的设计以及大量的优化,我们仍有可能在手机网页上创造出吸引人的游戏体验。
我们从这些体验总学到了什么?以下是关于HTML5游戏开发的10大小秘诀:
1.考虑你的用户。你的目标用户群体是什么,他们使用怎样的设备?如果你拥有网页参数,着眼于这些参数去理解你的访客使用的设备的核心范围,并根据这些设备想出解决方法。
2.基于你脑中的技术设计游戏。是的,这一直都是事实,但HTML5的限制和分裂让它变得更加重要。WebGL将让你创造出一款优秀的3D第一人称射击游戏,但它却不能运行于平板电脑上—-如果那是你的唯一目标平台的话。
3.熟悉caniuse.com。这是快速检查你想要在每个浏览器或设备中使用的任何HTML5功能支持的最快捷的方法。
4.将更多设备“填满”你的工作室,尽可能在更多不同的OS版本上运行。模拟器将在开发过程中起到很大的帮助,但为了获得代码运行的准确图像,你必须在设备上进行测试。还有一些优秀的社区引导型设备测试实验室,如opendevicelab.com,这将帮助你访问更多的模式。像eBay这些地方也能够帮助你获得一些早前的手机,并将其带到测试实验室。
5.保持领先。HTML5规格总是不断变化着,设备支持也是如此,所以你需要在这些开发中保持优势。这对于音效等领域更加重要,即像WebAudio API等功能能够彻底改变能力。
6.在开发中保持灵活。在这一周可行的内容也许在下一周就失效了。所以你必须确保自己能够足够灵活地适应这些在创造过程中发生的改变。
7.想办法扩展功能。对于手机来说最有效的方法可能并不适用于传统的网页设计。着眼于能够帮助你在手机上创造出有趣体验的方法,然后延伸到可触及的其它平台的功能与效果。使用用户代理或媒体咨询瞄准这些设备并向每个设备传达定制的体验。
8.想尽一切办法测试限制然后尝试着推动能力,但记得你正致力于还处于幼儿期的技术,任何过分复杂或野心太大的项目都有可能彻底毁了你。
9.考虑内容的生命线。能力一直在改变着,随着设备上出现新功能,内容也将快速过时。如果你的游戏将依赖于合理的时间长度,那就运行你自己回头去修改漏洞并进行更新。
10.最后一个?尽可能且更频繁地测试每个设备。
总结
HTML5将成为一种面向跨平台浏览器游戏而持续发展的技术,这是毋庸置疑的。虽然现在它可能还具有种种缺陷,但这是大多数出于幼儿期的技术都具有的问题。
像CreateJS框架或WebGL等工具都将在开发流程中帮助你解决各种程序问题。你总是希望能够变得更加顺利,而在未来几乎每一款连接设备都会有HTML5功能,当然也包括像Xbox One以及PlayStation 4等主机。
熟悉caniuse.com能够帮助你检查能力,定期且持续地对更大范围的设备进行测试。在游戏设计中你必须保持实事求是,如此不仅能够帮助你缓解现在的问题,同时当设备支持更加强大时,你才能拥有一个强大的立足点。