Responding to Device Capabilities

One of the major challenges of game development on mobile devices is how to maximize screen real estate on small devices while supporting the great variety of screen resolutions and aspect ratios of these devices. Unlike single platform mobile devices such as the Apple App store, the DS, or the PSP, mobile HTML5 games not only need to deal with a plethora of different devices, each with their own resolution and aspect ratio, but also with the possibility that the play can be either in landscape or portrait mode.

Maximizing Real Estate

When a player plays your game on a tiny screen, such as those on mobile devices, one of the best things you can do is make sure the game takes up the full height and width of the available screen real estate.

Adding a Launcher
If the game is supposed to be embedded within other content on the page, you may want to add a “launcher” step to your game where you wait for an action from the user before you start loading the game.

Desktops, however, have different considerations. In general, you want to put a limit on the size of the game versus the size of screen. For example, maxing out the screen on a 24" desktop monitor is most likely too slow for the current generation of browsers and hardware and will also make your artwork too pixelated for bitmap-based games. The other alternative is to dramatically increase the viewable area of the game on the desktop, but this can cause additional problems. You also generally ...

Get Professional HTML5 Mobile Game Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.