Add a Game Loader for HTML5 game

Question

I am creating a simple game with HTML5 and JavaScript.

Initially when the Game starts it takes some time to load images and sound. During this time the user has to wait and the screen looks unpleasant.

So here's what i want to do

1. Check loading status of images and sound.

2. Increase % of loading as and when resources are loaded and respectively increase progress bar.

I really don't have any key from where to start. Please Guide me through.

Answer 1

Monitoring load status for all loading items can be daunting, but, in a nutshell, the best way to go about it is to do the following:

• First, add to a totalResources counter, so the game knows how many resources to expect.

• Add eventListeners to the loading resources, and add to a loadingResources counter. If it loads successfully or fails, add to the loadingResources counter.

• Once the counters are equal, either all the resources loaded, or there were some errors in loading certain files.

The catch with this method is, on rare occasions, the loadingResources can match the totalResources variable prematurely. You can fix this by making a flag that checks to see if all the resources that needed to load have started loading already.

Now, depending on how you make your game, a failed resource load shouldn't really stop the game from working. For example, if a sound doesn't load properly, it just won't play. You might want to retry or abort if a resource needs to load.

As for a % based loading, that's a bit iffy. The HTML5 spec includes a progress bar, but for multiple resources, your best bet might just be a bar that fills up as resources are loaded.

Addendum:

Sound files are a huge pain to load, and I've had little success perfecting it across all browsers. Here's how I went about it:

1. First, don't rely on the load() function to invoke loading an audio element. Instead, force it to play, like so:

   sound.channels[i].volume = 0;

   sound.channels[i].play();

   (Also, to replay a sound, set the duration to a near 0 value when the sound is paused.)

2. As to allow multiple sounds to play at the same time, it is good practice to have multiple audio elements (thus the channels array above). However, you don't need to wait for all the sound channels to load. Once one loads, clone the node and force a silent play again to avoid any delays.

3. It's anecdotally more reliable to use the canplaythrough event callback to see if a sound is ready. If a sound fails to load, use the error callback. The problem is that there are a number of errors that can cause a sound file to fail to load.

4. Don't forget to use <source> elements to allow for multiple audio formats.

Answer 2

Something like this:

var assetsToLoad = [],
    assetsLoaded = 0;

var image = new Image();
image.addEventListener("load", loadHandler, false);
image.src = "image.png";
assetsToLoad.push(image);

//...Load other assests, following the same format...

function loadHandler() {
    assetsLoaded++;
    //Display "Loading" in the console while assets are being loaded
    console.log("Loading...");
    //If everthing is loaded, do this:
    if (assetsLoaded === assetsToLoad.length) {
      //Make the game play, possibly by changing its state from "loading" to "playing"
      console.log("All assets loaded");
    }
}

Answer 3

Thought of adding my two cents worth. In addition to having a loadCounter, I suggest you have an errorCounter and increment each of these variables depending on whether the current file was a success or a failure. At the end of your loop, you can check if the sum of these two is equal to the totalCounter.