HTML and CSS Reference
In-Depth Information
}
};
The preloading code provides a simple interface consisting of a single method called
Q.preload
that either
takes a callback method or one or more assets to load. It looks at the argument and decides whether to add more
items to the preload list or to actually perform the loading by calling
Q.load
. Items are added to the preload
list by simply calling
Array.concat
, which either add an element to the end of the array, or if the passed in
argument is also an array, concatenate the two arrays into a single array.
Here's how the preload code might be used:
var Q = Quintus({ audioSupported: [ 'wav','ogg']}).setup();
Q.preload('sprites.png');
Q.preload(['fire.mp3','explosion.mp3']);
Q.preload(function() {
alert("All loaded!");
});
Separating calls to generate a list of resources to load from the loading call allows more flexibility in
which components are responsible for tracking the resources they require. You can take a look at the file
as-
set_test.html
in the chapter code for a working example of loading a couple of files.
Summary
You now have some of the additional pieces of glue necessary for an HTML5 game engine: setup, input, and
assets. Setting up the visual container for the game is important to get anything on the screen at all. Input on
mobile devices is a little trickier than on a desktop because any type of input requires a visual element to display
to the user, such as buttons or a joypad. Asset loading, although not a sexy topic, is an important one to get right.
Nothing destroys the professionalism of a game more than a bunch of elements popping onto the screen while
you play.
