Resource Loader

When I was working on the switching the textures of the world blocks, I noticed that each resources, like images and music, are loaded one at a time. Because of this, the game takes some time to finish loading before the user can play it. Since I'm working on letting the user change/add/update the resources, like the textures of the blocks and the background music of the game, I decided to optimize how the initial resource loader works. Moreover, I figure that it will speed up the development time since I don't have to wait that much when testing the changes I made in the game.

Problem

The resource loader works syncronously, it loads each resource one at a time. As we add more resources into the game, the loading time keeps increasing at a fast rate which results in a poor user experience.

Demonstration of how the resource loader loads each resource one by one. — The resource loader before works syncronously.

Solution

I've re-written the resource loader to work asyncronously. Now it loads resources in parallel with a concurrency limit of 10.

Demonstration of how the resource loader loads resources three at a time. — Sample of the resource loader working asyncronously with a concurrency limit of 3.

Test Results

So check how much it improved, I did some tests to check its performance before and after using the code below:

const t0 = performance.now();
await Loaders.queue(this.assets, queue);
const t1 = performance.now();
console.log(`Call to load assets took ${t1 - t0} milliseconds. (No cached assets used)`);

In doing the tests, I also disabled the cache via the networks tab and I'm using my local setup.

Resource Loader Before

The following are the results of the tests of the original resource loader which loads syncronously.

In the debug console, it says 'Call to load assets took 4007 milliseconds' — Loading of assets took 4007 milliseconds.

In the debug console, it says 'Call to load assets took 3918 milliseconds' — Loading of assets took 3918 milliseconds.

Resource Loader After

The following are the results of the tests after using making it load async with a concurrency limit of 10.

In the debug console, it says 'Call to load assets took 2208 milliseconds' — Loading of assets took 2208 milliseconds.

In the debug console, it says 'Call to load assets took 2152 milliseconds' — Loading of assets took 2152 milliseconds.

Conclusion