Game Development with JavaScript and the Canvas Element - Resource Loading

Page content

To this point any graphics or images used by the game have been created manually as new Image objects, referenced by global variables in the Main.,js file. This works, but is not very elegant, and doesn’t give us any control or feedback with regards to the image loading process.

To overcome this we will create a new class called ResourceManager that will serve as an image database, and also let us implement a loading screen.

The ResourceManager itself is quite simple. The startupResourceManager function takes an array of Objects, each Object having a name property and a src property.

We then set the global variable g_ResourceManager to point to the current instance of the ResourceManager. [code]

The imageProperties Array is used to contain a collection of all the names that have been associated with the images we are loading (the name property of the Objects supplied to the startupResourceManager function). This Array is initialised. [code]

Next we loop through the list of supplied image definitions. First we create a new Image object, and assign it to a new property that we create for the ResourceManager which has the same name as the supplied image definition. The name of the image definition is also stored in the imageProperties Array. Finally the src property of the new Image object is set to the src property of the supplied image definition. By defining the src property on the Image object it will begin loading. [code]

We need to make two changes to the GameObjectManager. The first is to create a new ResourceManager, and to call the startupResourceManager function, supplying a list of all the images that the game needs to load. You will see that we create a new Array directly in the function call, and inside the Array are a number of new Objects created like this:

var obj = {property1: ‘prop1’, property2: ‘prop2’};

Defining an Objects properties and initial values inside the curly braces is a shorthand way of saying:

var obj = new Object();

obj**.property1 = ‘prop1’;**

obj**.property2 = ‘prop2’;**


Next we need to wait for the images to load. This is done in the enterFrame function. The resourcesLoaded property (which is initially set to false) is checked. [code]

If resourcesLoaded is false then we loop through the image names, and then check to see if the Image objects that have been assigned to the properties of the ResourceManager (using the name in the imageProperties Array) have finished loading (by checking the completed property). [code]

If they have all finished loading the ApplicationManager is started, and the resourcesLoaded property is set to true. [code]

If the Images have not all finished loading the canvas element is cycled through a series of colours from black to white to indicate the game is loading. [code]

Any class that referenced the global Image variables directly now references a property of the ResourceManager. So, for example, var image = g_gem would now read var image = g_ResourceManager.gem.

The ResourceManager class provides a convenient way to implement a loading screen, and to initialise and access image resources with a minimum of code.

Check out the demo here, download the source code here, and browse the source code documentation here.

Read more in the Game Development with JavaScript and the Canvas element series.