Professional HTML5 Mobile Game Development

Taking Mobile Performance into Consideration

Desktop browsers have reached the point in which building any type of simple game using HTML5 is an achievable objective. You don’t need to jump through many hoops to get a 2-D platformer or top-down shooter game running smoothly.

On mobile, performance is a different story. You need to consider performance from the beginning if you want to give users a smooth experience. To get a sense of the performance limitations of desktop, now look at the comparison between MacBook pro, iPhone, and iPad for various simple rendering tests (see Figure 6-1).

Figure 6-1: Comparison of HTML5 rendering methods on mobile.

You can run the tests by going to http://cykod.github.com/mobile-html5-tests. The tests consist of creating various numbers of image sprites and moving them vertically down a 320 × 320 board. The graph in Figure 6-1 shows the results for rendering 50 sprites. The tests run through five ways to do the rendering. The first uses <img> tag-based sprites. The second uses CSS background-image-based sprites. The third uses CSS sprites but uses -webkit-transform instead of just setting the left and top. The fourth and fifth ways both use Canvas, with the fifth foregoing the full-Canvas clear.

On the desktop, it doesn’t matter how you render the sprites or how many you render; the frame rate hovers around 60 frames per second. On mobile it’s ...