Episode 19: Loading Assets & Settings

admin Episodes

In earlier episodes I talked about loading assets and storing magic numbers in JSON files. I’m going to expand on that a bit by showing how I chose to load assets.

I began by moving asset names into a JSON file and divided them by which state they would first be used in. There are a few reasons why I did this:

  1. I didn’t want any magic words in my code
  2. I wanted to keep a single list of the game’s assets, so it’s easy to update
  3. I only wanted to load assets when I need them

Magic Words

Here’s an example of the first issue:

1
2
3
4
5
6
7
// Fire a weapon
function fireWeapon(weapon) {
  // ProjectileFactory.createProjectile(weapon);
 
  // Play the weapon's firing sound
  SoundFactory.playSound("weapon");
}

Just like we don’t want to hard-code numbers into our game, we don’t really want the fireWeapon function to choose the sound to play when a weapon fires. What we want is to have the code to play whatever sound we’ve decided should play when a weapon fires, which should probably be stored in a JSON file. Here’s what that would look like:

1
SoundFactory.playSound(game.data.items.weaponFireSound);

It works, but what if we wanted to have different weapons make different sounds when they fire? Well then we simply store the fireSound in the weapon’s preset and attach it to the weapon object when it gets created by the Item Factory. Then we can do this:

1
SoundFactory.playSound(weapon.fireSound);

Assets.json

As for storing all of my assets in one place, I ended up putting them all in a JSON file called assets.json. This file contains an object with an object inside it for each state (or each state that requires assets). And each state object has an array for each type of asset. Here’s how it looks:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
  "intro": {
    "audio": [
      {
        "key": "introMusic",
        "file": "aud\introMusic.mp3"
      }
    ],
    "fonts": [
      {
        "key": "introFont",
        "pngFile": "fonts\pixelFont.png",
        "fntFile": "fonts\pixelFont."
      }
    ],
    "sprites": [
      {
        "key": "laser",
        "file": "img\laser.png"
      },
      {
<span class="name">        "key"</span>: <span class="object-value-string">"explosionAnimation"</span>,
<span class="name">        "file"</span>: <span class="object-value-string">"img/explosionAnimation.png"</span>,
<span class="name">        "sheet"</span>: <span class="object-value-boolean">true</span>,
<span class="name">        "width"</span>: <span class="object-value-number">25</span>,
<span class="name">        "height"</span>: <span class="object-value-number">21
</span>      }
    ]
  },
  "menu": {
    // Menu assets
  }
}

Now all of the keys I use to access the assets are in one place. This lets me easily refer to the list when choosing assets such as a weapon’s firing sound.

Loading

Part of the reason for the structure of the JSON file was to easily allow it to be traversed by a loading function. I wrote just such a function in the Load Factory. Here’s how it worked:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function loadStateAssets(stateKey) {
  var state = game.data.assets[stateKey];
  
  for (var data in state) {
    for (var key in state[data]) {
      if (state[data].hasOwnProperty(key)) {
        if (key == "sprites") {
          // We're loading sprites
          for (var i in state[data].sprites) {
            if (state[data].sprites[i].sheet == true) {
              // We have an animation
             game.load.spritesheet(state[data].sprites[i].key, state[data].sprites[i].file, state[data].sprites[i].width, state[data].sprites[i].height);
            } else {
              // We have a single image
              game.load.image(state[data].sprites[i].key, state[data].sprites[i].file);
            }
          }
        } else if (key == "audio") {
          // We're loading audio
          for (var i in state[data].audio) {
            game.load.audio(state[data].audio[i].key, state[data].audio[i].file);
          }
        } else if (key == "fonts") {
          // We're loading fonts
          for (var i in state[data].fonts) {
            game.load.bitmapFont(state[data].fonts[i].key, state[data].fonts[i].pngFile, state[data].fonts[i].fntFile);
          }
        }
      }
    }
  }
}

It’s a little ugly, but it does the trick.

States

The file structure and loading function allow me to choose which assets are loaded in a given state. So rather than having the player waiting around at the start of the game for all of the assets to lead, they just wait a shorter time between states.

Any asset loaded into the game stays there (as far as I know), so assets are only loaded once, and they remain in memory across states.

I probably could have done this more efficiently by loading smaller versions of assets when the full version isn’t required, but my game doesn’t take long to load, so it didn’t seem worth it.

Settings

I’m gonna take a bit of a turn and mention how I loaded the game’s settings. As I mentioned, I moved all of the magic numbers into settings files. But in addition to this, I also changed settings to be based on the game’s screen size (when applicable), so that the game could be easily scaled.

So rather than have a sprite’s width be 10 pixels, it would instead be 2% of the game width. I’m not sure if this was a good idea, but it made more sense to me than hard-coding sprite sizes, world boundaries, etc. into the settings.

Leave a Reply