Professional HTML5 Mobile Game Development

Loading Assets

Unless you’re building a game entirely out of squares, at some point you need to load some assets into the game. Assets include images, audio, sprite and level data, and anything else that your game needs to run stored in a separate file.

In one sense HTML5 handles asset loading for you automatically. If you create an Image object, set the source, and then draw it, the browser can happily comply without throwing an error message. It won’t, however, actually draw the image on the screen until it’s been fully downloaded. This means that you'll have game elements that just “pop” into the page. A better strategy is to preload any assets during a loading screen and wait to start the game until everything is ready to go. The following code is an example of how the asset loading functionality should work:

      var Q = Quintus().setup();
      Q.load(['sprites.png','correct.ogg'],function() {
        alert('Everything loaded!');
      });

To make the loading method more flexible, Q.load will be designed to be flexible in what it accepts for arguments, accepting either a single asset name string, an array of assets, or an object that maps asset names to filenames to load.

This book has dealt with image loading a of couple times, first in Chapter 1 and then in Chapter 8, “Running JavaScript on the Command Line.” This will be the last time. You’ll build a general-purpose asset loader into Quintus, which will be reused in the rest of the book.

Defining Asset Types

To know how to load a specific file, ...