Loaded

The images in the game are being loaded by creating an Image element and using a .png file, stored as a Base 64 encoded string, to load the data:


Every time I need to change a sprite in the game the process is:

1. Edit the source .png image file in a paint program and save it
2. Convert the file to a Base 64 encoded string (I use https://www.base64-image.de/ for this)
3. Copy the encoded string
4. Paste it into the source code
5. Refresh the game in the browser

This works ok when there are only a few graphics, but it doesn't scale very well. The workflow that I really want is:

1. Edit the source .png image file in a paint program and save it
2. Refresh the game in the browser

Much better! So how do I do that? I'm going to add a resource manager that loads the .png files directly from the server.

Loading Files From The Server

I'm going to use XMLHttpRequests to load the files from the server. These requests are performed asynchronously, so I have to set up callback handlers to handle the response when the file is loaded. I also have to convert the binary data that gets loaded into an Image element. Some basic code for this would look like:

I don't want to limit myself to only being able to create Image elements - I could also create other object types. For example, this would create a Font object:

Resource Handlers

So now that we understand the concept of different handlers for different resource types, let's see how I use that in practice. In resourceHandlers.js you can see three different handlers for three different resource types. There's also a mapping table at the top that maps resource types to their handlers:

Resource List

Once I've got the resources into the Resource Manager, how do I retrieve them from other parts of the code? I need a get() function, and I need to pass in some sort of unique ID or name. I could just use the filename, but it's better to use something more human readable. It's also good to decouple the actual file from the code that references it. This means that I could change the path or filename of the resource later on and, because the ID would remain the same, I wouldn't have to change any code. This list goes in resourceList.js

The Resource Manager

Finally we get onto the Resource Manager itself. The code might look a little bit scary, but you've seen the basics already:

Most of the work in done in the constructor. On line 10 I loop through all of the resources listed in the resourceList and kick of a request for each one. When the request completes I call the appropriate handler on line 32. Once the handler is finished, I save it in the resource manager's availableResources list. I also decrement a loadsPening counter (which is incremented when the load starts). I use this counter to quickly tell whether all resources are loaded or if any are still in progress.

Down at line 56 you'll see the getResource() function that retrieves the resource data. There's also an isResourceAvailable() function that let's me test if a specific resource is loaded. I use this in the LoadingState to display a loading message as soon as the font is loaded. This message is shown (for a split second!) while the other resources are still loading:

Wrap Up

I added a Resource Manager that loads files directly from the server. This will make it quicker and easier to add new resources or edit existing ones. There was a lot of code this time, including some more changes in the codebase that I didn't cover here.

Check out the code in BitBucket, and the online playable version here.. and leave me a comment if you'd like me to clarify any of the work.

Next Time..

Continuing my promise to work on the gameplay side of things I'm going to work on improving the player control next time.