The Panzerkrieg Project. The Image Loading Conundrum

This is the third article in the Panzerkrieg Series. And the project extends on what I learned from Chris DeLeon’s excellent courses on Udemy. The code for this project can be downloaded or forked from the Panzerkrieg GitHub Repository.

A Resource Loading Conundrum

In the last post I introduced this snippet of code which is used to initialise our resources and then execute the game loop. This is all done in our anonymous function which is called by window.onload.

window.onload = function() {

    canvas = document.getElementById('gameCanvas');
    
    canvasContext = canvas.getContext('2d');
    
    framesPerSecond = 30;

    initInput();
   
    setInterval(function() {
        moveEverything();
        drawEverything();
    }, 1000/framesPerSecond);
}

You may recall that the window.onload function is called when the windows load event is fired. And the load event is fired once all of the documents objects are in the DOM, and all images, scripts, links and sub-frames have finished loading.

Unfortunately for us, the above loading process doesn’t include game specific images so we have to find a way to load these resources in our code.

At this point, our anonymous load event function, seems like the perfect place to load our images. And to an extent, this is true. However, there is a potential coding pitfall to be aware of here. And that pitfall is called asynchronicity.

Asynchronous Programming

We programmers love synchronicity. When we produce synchronous code, we can safely predict the order of its execution. For example…

console.log('statement 1');
console.log('statement 2');
console.log('statement 3');

There is no surprises in the above code. We know that each line will be executed in a descending order. Our life is a synchronous utopia.

But if we do the following…

console.log('statement 1');
var img = document.createElement('img');
img.src = 'assets/images/' + fileName;
console.log('statement 2');
console.log('statement 3');

Our lovely little synchronous utopia becomes an asynchronous dystopian nightmare.

Why? Because line three – img.src – is an asynchronous function that runs in the background whilst our program proceeds with the executions of line four and five. And thus, we can not accurately predict at which point in our code our image will be loaded.

That may seem a tad irrelevant in the above code but consider the following…

window.onload = function() {

    canvas = document.getElementById('gameCanvas');
    
    canvasContext = canvas.getContext('2d');
    
    framesPerSecond = 30;

    initInput();

    loadImages() // a function containing asynchronous excutions
   
    setInterval(function() {
        moveEverything();
        drawEverything();
    }, 1000/framesPerSecond);
}

In the above code we have a function called loadImages() that contains a series of asynchronous executions that surprise surprise, load our images.

If we ran this code it is highly likely that our game loop will execute before our images are loaded. Which in turn, will find us in the precarious situation where we draw our images before they’re accessible.

In short, our game is going to fall over before we’ve started which I’m sure you will agree is FUBAR.

Conclusion

There you have it. Because image loading is an asynchronous process, we cant rely on good old fashioned synchronicity to load game images. Doing so would most likely result in our game falling over.

Therefore, we need to find a smarter solution to this problem which we will discuss in the next post.

More to follow…

Author: David Reid

This is where I'm supposed to tell you that I'm a special little snow flake. But unfortunately, I'm not special.

In the grand scheme of things, I'm one of trillions of multi-cellular organisms that are pinned by gravity to a tiny rock which orbits a tiny little ball of gas.

That ball of gas is indistinguishable from the trillions of other little gas balls that populate this galaxy.

And, that galaxy is indistinguishable from the trillions of galaxies that are scattered around this massive universe which incidentally, may just be one of many.

But don't panic. You might be special. :-)