作者：Brian McHarg

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等平台上运行各种内容的客户创造过许多基于浏览器的手机游戏。

Agent Alert Field Missions（from develop-online）

作为开发者，能够决定想要怎样程度的分裂是件好事，但是我们的目标用户以及他们所使用的设备才是最重要的决定要素。通过与孩童品牌合作，我们经常能够发现自己受制于早前“传下来的”手机或廉价且低功率设备。

然而，基于谨慎的设计以及大量的优化，我们仍有可能在手机网页上创造出吸引人的游戏体验。

我们从这些体验总学到了什么？以下是关于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能够帮助你检查能力，定期且持续地对更大范围的设备进行测试。在游戏设计中你必须保持实事求是，如此不仅能够帮助你缓解现在的问题，同时当设备支持更加强大时，你才能拥有一个强大的立足点。

（本文为游戏邦/gamerboom.com编译，拒绝任何不保留版权的转载，如需转载请联系：游戏邦）

HTML5 – Game on?

By Brian McHarg

HTML5 is often (rightly!) lauded as the heir to Flash’s gaming throne. It offers true cross-platform development that allows you to build once and deploy to desktop, tablet and mobile. It’s a technology that can run on Smart TVs, or wrapped in a native application for desktop and devices. It can even run on consoles like the Xbox 360 or PlayStation 3 via their built in browsers.

HTML5 is an understandably attractive prospect for anyone looking to develop games across a large number of devices and platforms. But there remain some distinctive challenges.

The term itself, much like the specification that it represents, has a different meaning depending on who’s describing it. For clients, HTML5 is a technology that promises the Holy Grail of simple, cost effective, cross-platform delivery.

For developers, it’s the collective term for dozens of different technologies; JavaScript, Web Sockets, Web Audio, Canvas, CSS3, WebGL to name a few – each with their own standards, strengths and limitations from platform to platform.

But for users: it’s irrelevant – they just want the same experiences and performance they’ve become accustomed to, whatever they’re using. And as developers, that’s where our main challenge lies, especially if your aim is to deliver your game across a range of devices.

Desktop vs Mobile vs Cross Platform

By now we’ll all be familiar with the fantastic examples of HTML5 games that run within desktop browsers. They’re often created or funded by browser manufacturers themselves to showcase particular strengths in their own software, or to make the case for particular APIs they’d like to see ratified into the HTML5 specification.

Games such as HelloRun, or some of the excellent Chrome Experiments such as Racer or Arcade Fire’s Reflektor are great examples of what can be achieved in-browser using HTML5. If you want to see the future potential, look to libraries like three.js, the recently open-sourced Turbulenz or Epic’s HTML5 port of their Unreal Engine.

However, try looking at some of these examples on an Android device running OS2.3 (Gingerbread) and you’ll have a very different experience, or in some cases no experience at all.

Yes, that’s an operating system that’s nearly three years old, but it still represents almost a third of the installed Android base, a figure that could be even higher depending on your target demographic.

It’s not just older versions of Android. You’ll see a similar experience on Apple devices running iOS 5, or lower powered devices like the Kindle Fire. In actual fact, there isn’t currently a single mobile device that will run every one of the above demos well.

As mentioned earlier, for most clients the reason for choosing HTML5 is to ensure that their browser-based game is truly cross-platform. If you’re developing for desktop only, Unity and Flash are both strong options that should always be considered. They both have good browser support and the ability to export to devices as a native application, giving you a route to mobile and tablet from the same code should you require it.

There are two obvious challenges when developing cross platform games in HTML5. The first is the fluid nature of the HTML5 specification. This can result in fragmented feature support not just from device to device, but from browser to browser on each of those devices. Not just that, you’re developing against a constantly moving set of capabilities and support.

Just look at the recent launch of iOS 7, which broke a number of key features essential for HTML5 gaming, or the launch of Firefox 25 which finally added Web Audio support but at the same time broke the audio implementation of a large number of HTML5 games. Not quite ‘the foolish man built his house upon the sand’, but indicative of the problems that can happen overnight and are out with your control as a developer.

The second, and more challenging as a developer, is the massive variation in mobile handset performance and capabilities. Even when using a consistent feature set, how your game runs will vary massively between devices.

In order to understand just how much of a variance exists, you can run one of the many JavaScript benchmarks to test device performance. As an example, rendering 100 sprites via Canvas will perform at a relatively solid 60 frames per second on devices like the iPhone 4S or 5, Galaxy S3, Nexus 7 or Lumia 820. But if you try the exact same code on other devices like the HTC Desire (19fps), Galaxy Ace (7fps) or iPad 1 (9fps) and you’ll struggle to get anything representative of a playable game.

If your project involves targeting mobile or tablet, and especially if that includes these older or lower powered devices it’s essential to test and benchmark early on. This way, you understand the limitations of your device range and can tune both your technical approach and your game design to work within them.

And if your project isn’t targeting mobile or tablet, it probably should. Nearly a third of UK page views are from mobiles and tablets, with that growth climbing at such a rapid rate it’s expected to overtake desktop views in 2014.

While PCs still dominate during working hours, mobile devices are prevalent in the mornings and tablets in the evenings – both ideal times for browsing the web and playing games.

Choose your battles

At Chunk, we’ve been developing cross-platform HTML5 games for broadcasters and brands for almost two years. We’ve created browser-based mobile games for clients like the BBC and Disney that run on everything from an HTC Desire to an iPad4, from a Nexus 7 to an Xbox360.

As developers, it would be great to determine how deep into this fragmentation we want to dive, but our target audience and the devices they use largely dictate this. Working with children’s brands, we have often found ourselves working within the constraints of older ‘hand-me-down’ phones, or cheaper, underpowered devices.

However, with careful design and a lot of optimisation, it is still possible to produce engaging gaming experiences on the mobile web.

What have we learnt from those experiences? Well, if we had to produce a list of the top ten tips for HTML5 games development, it would be as follows:

1. Consider your audience. What’s your demographic, and what devices are they using? If you have web metrics, look at them to understand the core range of devices your visitors use and target your solution at those devices.

2. Design your game with your technology in mind. Yes, this should always be the case, but the limitations and fragmentation of HTML5 make it even more pertinent. WebGL will let you make a great 3D first person shooter, but its unlikely to (read: not going to) work on tablet if that’s going to be one of your target platforms.

3. Become familiar with caniuse.com. It’s a great way to quickly check the support for any HTML5 feature that you would like to use across practically every browser or device.

4. Fill your studio with as many devices as possible, running as many different OS versions as you can. Simulators will help during development, but to get an accurate picture of how your code is performing you must be testing on the devices themselves. There are some great community-led device testing labs like opendevicelab.com that will give you access to a huge number of models. Scour places like eBay to find old handsets and add them to your test lab.

5. Keep ahead of the curve. The HTML5 specification is constantly changing, as is device support and you need to keep on top of these developments. This is especially relevant to areas like sound, where features like the WebAudio API can radically change the capabilities.

6. Stay agile throughout development. What isn’t available to you today may be tomorrow. What works this week may not work the next. Allow yourself the flexibility to adapt to these changes as they happen throughout your build.

7. Think about ways to scale functionality. A mobile first approach isn’t just for traditional web design. Look at ways that you can create a good experience on mobile and then layer on functionality and effects for other platforms as they permit. Target those devices using user agents or media queries and deliver a tailored experience relative to each.

8. KISS. By all means test limits and try to push capabilities, but remember you’re working with a technology that’s in its infancy, and an overcomplicated or overambitious project will be likely to cause you pain down the line.

9. Consider the lifespan of your content. Capabilities change all the time, and content can become dated quickly as new features are enabled on devices. If your game is going to be live for a reasonable length of time, allow yourself time to go back and both bug fix and update it.

10. One last one? Oh yeah. Test on every device you can, as often as you can.

Gladiator, you will go on my second whistle

HTML5 will be the go-to development technology for cross-platform browser based gaming, of that there’s no doubt. At the moment it can be a painful space, but that’s the case with most technologies in their infancy.

Tools such as the CreateJS framework or WebGL exporters are really going to help smooth out the bumps in your development workflow. And you’re going to want to get that as smooth as possible, as pretty much every connected device will have some form of HTML5 capability in the future, including consoles such as the Xbox One and PlayStation 4.

Become familiar with sites like caniuse.com to check compatibility, test regularly and continually on the biggest range of devices you can. Be pragmatic in your game design and not only will you reduce your pain for now, but you’ll put yourself in a strong position when device support catches up, which is going to do very, very soon.(source:develop-online)