Brian McHarg's strategies for successful cross-browser, cross-platform games development with HTML5.
HTML5: the rightful heir to Flash's gaming throne. True cross-platform development that allows you to build once and deploy to desktop, tablet and mobile; that will run on Smart TVs; can be wrapped up in a native application for desktop and mobile devices - and can even run on consoles like the Xbox360 or PlayStation 3 via their built in browsers. It's an understandably attractive option for anyone looking to develop games for a large number of devices and platforms.
The term HTML5 itself, much like the specification that it represents, has a different meaning depending on who's describing it. For clients, it's a development technology that promises the Holy Grail of simple - and therefore cost-effective - cross-platform delivery.
For developers, it's the collective noun for myriad different technologies; JavaScript, Web Sockets, Web Audio, Canvas, CSS3 and WebGL to name a few - each with their own standards, strengths and limitations from platform to platform.
Lastly, and perhaps most importantly, for users: it's irrelevant - they just want the same experiences and performance that they've become accustomed to. And as developers, that's where our main challenge lies, especially if your aim is to deliver your game across a range of platforms.
Desktop vs mobile vs cross platform
By now we're all familiar with the fantastic examples of HTML5 games that run within desktop browsers. They're often created by browser manufacturers themselves to showcase particular strengths in their own software, or to make the case for particular APIs that they would like to see ratified into the HTML5 specification.
Games such as Cut the Rope or Contre Jour for Internet Explorer, or some of the excellent Chrome Experiments like Jam or Racer are great examples. 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.
Technologies like WebGL show the future potential, but are beyond the capabilities of today's mobile devices
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 almost three years old, but it still represents almost a third of the installed Android base, a figure that could skew even higher depending on your target demographic. And it's not just older versions of Android. You'll see a similar experience on Apple devices running iOS5, or lower powered devices like the Kindle Fire. In actual fact, you currently won't find a single mobile device that will run every one of the above demos well.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
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, resulting in fragmented feature support - not just from device to device, but from browser to browser on each of those devices. The second, and more challenging as a developer, is the massive variation in mobile handset performance and capabilities, meaning that even when using a consistent feature set, how your game runs on one device will vary massively from the next.
To get a feel for how much of a variance exists, just 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 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 important to test and benchmark early on to understand the limitations of your device range and tune both your technical approach and your game design to work within them.
At Chunk, we've been developing cross-platform HTML5 games for broadcasters and brands for almost two years, and have 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.
CBBC's Young Dracula game runs on a huge range of devices from the HTC Desire to iPad4 to 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 will 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, but with careful design and a lot of optimization we believe that it is still possible to produce engaging games on the mobile web.
What have we learnt from those experiences? Well, if we had to produce a list of the top 10 tips for HTML5 games development, it would be as follows:
01. Consider your audience
Look at the demographic and what devices they're using. If you have web metrics, use them to determine the core range of devices your visitors are using and target your solution at those devices.
02. Design with your technology in mind
Yes, this should always be the case, but the limitations and fragmentation in 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.
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.
04. Use devices not just simulators
Get your hands on 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 have to be running on device. There are some great community-led device testing labs like Open Device Lab that will give you access to a huge range of devices. Otherwise scour places like eBay to find old handsets and add them to your test lab.
05. Keep abreast of the landscape
The HTML5 specification is constantly shifting, as is device support, so you need to keep on top of these developments as they happen. This is especially relevant to areas like sound, where features like the WebAudio API can radically change the capabilities.
06. Stay agile throughout development
What works today, may not work tomorrow. What isn't available to you today, may be tomorrow. Allow yourself the flexibility to adapt to these changes as they happen throughout your build.
07. Scale your 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.
By all means test the limits and try to push the capabilities, but remember that you're working with a technology that's in its infancy, and an overcomplicated or overambitious project is only going to cause you pain down the line.
09. Consider your content's lifespan
Capabilities are changing all the time, and your content can become dated very 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 is going to be the de facto development technology for cross-platform browser-based gaming, of that there is no doubt. At the moment it's a painful space, but that's the case with most technologies in their infancy. Become familiar with sites like caniuse.com to check browser compatibilities. Test regularly on the biggest range of devices you can, and be pragmatic in your game design. Not only will you reduce your pain for now, but you'll put yourself in a strong position when device support catches up, which it inevitably will.
