Native mobile applications from the App Store

Mobile-AppsNative mobile applications from the App Store or Google Play can lock device orientation to either portrait or landscape view, but this is not supported on the mobile web. Instead, when a user turns their mobile device to the side, the canvas rotates with it.

A demonstration of this default behaviour, and the optimal behaviour, is shown below. You should constantly check whether the canvas has been rotated. If it has, you need to ask the user to rotate their device back to the appropriate orientation. These instructions can be relayed by use of text or graphics, or both.

If you’re feeling particularly creative, you could utilise both orientations within your game. In portrait mode the player might see the normal game world, and in landscape mode they might see a map of their current level.

Games that handle orientation changes properly and maximise screen real estate tend to look more professional than those that don’t. I recommend that you address the display issues discussed in this chapter, although doing so is entirely optional.

HTML5 is far from perfect. Sometimes your games will run slowly on specific mobile devices, no matter what you do. Sometimes your graphics won’t display properly, no matter what you do. Sometimes audio won’t play, no matter what you do.

These issues are due to a lack of standardisation. iOS 6 introduced the Web Audio API to Safari, which greatly improves support for audio in the browser. However, until HTML5 audio is supported by more browsers it’s a safer bet to avoid including audio in your games.

By differentiating between problems that you can and can’t fix, you’ll find HTML5 game development much less frustrating. As with any new technology, there will be a few initial hiccups that you’ll have to deal with.

As a GameMaker Studio user, it was difficult for me to address some of the issues discussed in this chapter. I had little control over how my HTML5 games would be displayed, especially on mobile devices.

I contacted a capable JavaScript programmer and had the Mobility Engine created. This engine substantially extends GameMaker Studio’s functionality by introducing flexible scaling, orientation management, browser interface control, and more. Instead of waiting for the program’s developers to add the functionality I needed, I simply outsourced it.

If you want to add a professional touch to your games, you can outsource graphics, audio, or anything else you need. For a small HTML5 mobile game, budget between $500-$1500 for high quality artwork. You can also source assets from stock art websites for very low costs.

I recommend that you adopt this template as your own. That is: a 320 x 480 pixel canvas, with the bottom 64 pixels void of gameplay elements. Similar measures should be taken for games orientated in landscape.

Whether it is code, art, or whatever else, always acquire full ownership of the finished product when outsourcing. This allows you to monetise the outsourced work if others have an interest in it.

For example, I license the Mobility Engine to GameMaker Studio users who are interested in displaying their games properly across mobile phones, tablets, and computers. The market for this functionality represents just one potential source of HTML5 income.

Monetisation is one of the most interesting aspects of working with HTML5. The market is so new, so open to experimentation, and so full of opportunity. There is a lot of money to be made.