December 02, 2013

What to Expect When Developing Cross-Platform Games Using HTML5

Chunk, an interactive entertainment company, has been developing cross-platform HTML5 games for broadcasters and brands for almost two years, including the creation of browser-based mobile games for clients such as the BBC and Disney. Its games run on everything from an HTC (NewsAlert) Desire to an iPad 4, from a Nexus 7 to an Xbox360. You will find out why this is meaningful shortly.

Recently, Brian McHarg, technical director of Chunk, shared some of his ideas and a few details of what you can expect when you are developing titles with HTML5. The beauty of using HTML5 is that it offers what can be considered true cross-platform development.

This is something that will allow a developer to build a title once and be able to deploy it on a variety of different platforms. It doesn’t matter if you are using a desktop PC, tablet or other mobile device—the game will function the same regardless. In addition, the technology can also run on Smart TVs, or consoles like the Xbox 360 or PlayStation 3.

While all of this makes it convenient to develop in HTML5, McHarg reminds us that while it is attractive, it still has some distinctive challenges. Developers like it because it is the collective term for dozens of different technologies. This includes using such familiar names as JavaScript, Web Sockets, Web Audio, Canvas, CSS3, WebGL. Each has its own standards, strengths and limitations from platform to platform.

One major problem that you will find is that Google (News Alert) is test running some games that run great on Chrome and have lots of future potential, the problem is the past. If you trying looking at some of these games on older Android (NewsAlert) devices running Gingerbread (V2.3) or any Apple device running iOS5 or lower, you may not even be able to see the demo.

Chunk found that while it has been developing HTML5 games for almost two years now, much of its target audience consists of children. These kids do not have the latest and greatest mobile devices. They usually have the “hand me down” devices that are generally not as functional or underpowered.

According to McHarg, there a couple of challenges that should be obvious. 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.

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.

The problems that you can encounter revolve around the changes and upgrades that companies such as Apple include when they come up with a new OS. For instance, iOS 7 broke a number of key features that were essential for HTML5 gaming.

McHarg suggests running one of the many JavaScript benchmarks to test device performance if you want to see just how much of an inconsistency there is between devices. If your project involves targeting mobile or tablet, and especially if that includes some of the older or lower powered devices it’s essential to test and benchmark early on.

Considering that the number of mobile devices is constantly growing on a global level, it is probably a wise idea to target smartphones and tablets. In a lot of emerging markets, smartphones are used in much the same way that a desktop PC is used in established markets. In many cases it is their only way to connect and browse.

Chunk is sharing a list of want can be considered the top ten tips for HTML5 games development. The following is that list:

  • 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.
  • 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 it’s unlikely to (read: not going to) work on tablet if that’s going to be one of your target platforms.
  • Become familiar with 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.
  • 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 that will give you access to a huge number of models. Scour places like eBay (News Alert) to find old handsets and add them to your test lab.
  • 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.
  • 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.
  • 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 (NewsAlert) those devices using user agents or media queries and deliver a tailored experience relative to each.
  • 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.
  • 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.
  • One last one? Oh yeah. Test on every device you can, as often as you can.

Companies like Chunk believe that HTML5 will be the development technology for cross-platform browser based gaming of choice. In order for it to be effective for you, it is necessary that developers become familiar will all the tools and website designed to check and test for compatibility.

A final comment from McHarg is to be pragmatic in your game design. This will help you in many ways. Not only will it reduce current anguish in developing but it will help to put you in a strong position when device support catches up.



HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More