HTML and CSS Reference
In-Depth Information
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 ele-
ments 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 topic 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 topic.
Defining Asset Types
To know how to load a specific file, the engine needs to have a list of file extensions it can convert into specific
asset types. This is actually a small list because the engine cares only about images and audio files at this point.
Quintus should also return the asset type given a filename, which means the engine needs a method to pull off
the extension and look up the type in the asset type list.
Open up quintus.js again, and add the code in Listing 10-10 just before the final return to do just
Listing 10-10: Asset type functionality
// Augmentable list of asset types
Q.assetTypes = {
// Image Assets
png: 'Image', jpg: 'Image', gif: 'Image', jpeg: 'Image',
// Audio Assets
ogg: 'Audio', wav: 'Audio', m4a: 'Audio', mp3: 'Audio'
// Determine the type of an asset with a lookup table
Q.assetType = function(asset) {
// Determine the lowercase extension of the file
var fileExt = _(asset.split(".")).last().toLowerCase();
Search WWH ::

Custom Search