Episode 7: JSON

admin Episodes

In the last couple episodes I talked about how I separated my code into different components. First I broke it down into states, then into factories. I was feeling really good about how I was organizing things, and I had an idea about how I could make it even better: JSON.

What Is It?

If you don’t know what JSON is, it’s basically a way of storing data in a format that JavaScript can understand. JSON stands for JavaScript Object Notation, and that’s exactly what it is: the code for a JavaScript object. As an example, let’s say we wanted to create an object in our JavaScript file. There’s two ways we can do it:

First, we can use a constructor…

1
2
3
4
5
6
// Define the constructor for a person object
function Person(age, sex)  {
  // Set the age and sex of the object
  this.age = age;
  this.sex = sex;
}

And then create an instance of the object…

1
2
// Create an object called Bob and pass the values for age and sex into the constructor
var Bob = new Person(37, "male");

The second way we can do this is by describing the object literally…

1
2
3
4
5
6
// Define an object called Bob
var Bob = {
  // Define Bob's properties
  age: 37,
  sex: "male"
}

This is how JSON works. You just describe a literal JavaScript object and save it in a file. Then you just load the JSON file into memory. No parsing, no reading lines, no need to define delimiters and special characters. A number of libraries even simplify the process of loading the file, including Phaser…

1
2
3
4
5
6
7
8
9
// Read the JSON file
var preload = function() {
  GameSystem.game.load.json('Bob', 'Bob.json');
}
 
// Save the JSON data to a variable
var create = function() {
  GameSystem.data.settings = GameSystem.game.cache.getJSON('Bob');
}

The reason this takes two steps is that the JSON file is loaded asynchronously, which just means that the computer keeps doing other stuff instead of waiting for the file to load.

Magic Numbers

So how could JSON help make my code better? Well any time I encounter a magic number, I can move it to a JSON file. If you don’t know what magic numbers are, they’re these nasty critters that make your code confusing and difficult to maintain…

1
2
// Create the player's sprite in a specific location
var player = GameSystem.game.add.sprite(400, 300, 'ship');

In the code above, our x and y values for the sprite’s location are magic numbers. They’re magic because they aren’t based on any logic or conditions. They’re just hard-wired into the code.

It would be better to set the x and y values based on the game’s resolution…

1
2
3
4
// Create the player's sprite in the center of the screen
var x = GameSystem.game.world.width / 2;
var y = GameSystem.game.world.height / 2;
var player = Game.add.sprite(x, y, 'ship');

This works fine, but it would probably be even more smarter to move the starting location to a JSON file called something like settings.json and store it in an appropriately-named object…

1
2
3
4
5
6
{
  "playerStartingLocation": {
    "x": 0.5,
    "y": 0.5
  }
}

Once we’ve loaded the JSON file into a variable (like GameSystem.settings), we can then create the player’s sprite without using any magic numbers…

1
2
3
4
// Create the player's sprite based on settings in JSON file
var x = GameSystem.game.world.width * GameSystem.settings.playerStartingLocation.x;
var y = GameSystem.game.world.height * GameSystem.settings.playerStartingLocation.y;
var player = Game.add.sprite(x, y, 'ship');

As I kept exporting more and more magic numbers out of my code, I found that my settings.json file was pretty big and difficult to read, so I decided to create a number of JSON files and store relevant stuff in each of them. Here’s what I ended up with:

  • settings.json
  • assets.json
  • items.json
  • entities.json
  • factions.json
  • menu.json
  • worlds.json
  • missions.json

I know I said this in the last episode, but I’ll talk more about these things in the future.

Anyway, JSON is awesome. I don’t know what a professional game programmer would think of this approach, but it works for me!

Leave a Reply