Fixing A Hole

In the last post I added fonts to the game. This worked.. but there was a small bug which meant that printed text sometimes didn't appear. Now I need to fix that. Welcome to gamedev!

To fix the defect I first need to be able to reliably reproduce it - how else will I know if I've fixed it? I'll be using the debugger in Google Chrome for my testing, and I've got the game code saved on my webserver. I've noticed that the first time I load this page the font is missing, but if I hit F5 to refresh the page then the font appears. My hypothesis is that this is related to caching of resources, so let's start investigating that. If I open Chrome's debug console (hit F12) and then right click on the reload button there's an option to "Empty Cache and Hard Reload". If I select that then the cache is emptied, the page reloads and.. the font is missing. Bingo! The bug is reproducible, and now I can start looking at what the problem is.

Now I'll go back to the debugger and start poking around..

Investigations

With the console still open, I'm going to look at the font object first:

OK, so straight away I can see that the font has character width and height both as 0. That's weird - the character size should be 16x16. So now my theory is that the font source image isn't loaded, let's look:

Well, that's annoying. The image has the correct size and it's definitely loaded - you can tell this because "complete" is set to true. But maybe the image wasn't loaded at the point the font was created? I can test this by printing the value of "complete" for the image at the moment the font class needs it by adding a console.log() at line 3:

Save that, empty the cache and hard reload and look at the console:

And there we are - the font source image was not loaded when we tried to create the font. When the page loads it must take a (small) amount of time for the font image to be created.

Now I know how to recreate the bug and I also know why the bug is happening.

A Possible Fix?

The bug is caused by the image resource not being loaded in time. The fix should be as simple as not creating the font until the resource is loaded. That's straightforward to do - I can easily check the value of "complete" and delay the creation of the font until it goes true. I'll create a global variable called waitingForResourcesToLoad and initailise that to true. I'll also stop creating the font object at the start of the code, instead I will create it later on in the mainLoop() function. Here's the code:

This is essentially a really simple state machine with two states: "waiting to load" and "running main game update". The transition between the two states is when the font image resource load is complete. It's ugly - but it works.

Wrapping Up

In this post I fixed a bug. To do that I first found a way to recreate it and then I was able to investigate what the problem was. Once I had found it, I came up with a possible fix. The fix was implemented and tested, and the bug went away.

The code for this post is on BitBucket, and the online playable version is here.

Next

So the fix for this bug was pretty ugly - I should improve on that. As I said earlier, what I wrote is basically a simple state manager. In the next post I'm going to make a proper state machine. This will solve the font problem in a much more elegant way as well as paving the way for different games states (think: main menu, game over screen, etc.) when we come to add them later on.