JSON and other data in java-script

A game needs to load a variety of items/data.  What you need of course depends on what your games does/is.  We've discussed loading images.  Now its time to look at some data-structures.

What is a data-structure?  Its literally - just a bunch of information organised in a certain manner.  It is the structure of the data.  Gravity Force has levels that consists of caves with tiles in them.  The Gravity Force 'caves' can be modified at game time.  They can be damaged or changed by the players.

Java-script's most natural data-structures is the hashmap.  Turns out there is a popular outside representation for java-script called JSON (Java-Script Object Notation).  JOSN looks just like java-script without any of the code.  Its raw data.  Its fairly succinct too.  It is one of my personal favourites at this moment in time.  I've moved away from using xml and started using JSON all over my professional and personal projects.

Lets have a look at some JSON and how to consume it.

{
  "player1":
    {
       "ship": "ship1",
       "base": 0,
       "maxSpeed": 4,
       "maxAmmo": 200,
       "numMissiles": 5,
       "guidedMissiles": true,
       "acceleration": 0.05,
       "fuelUsage": 0.05,
       "refuelSpeed": 0.1,
       "repairSpeed": 0.1,
       "rearmSpeed": 0.1,
       "exampleArray": [1,2,3,4],
       "rotationSpeed": 5,
       "bulletColour": "#ffffaa",
       "bulletShipDamage": 8,
       "bulletSpeed": 5,
       "keys": { "left": 37, "right": 39, "down": 40, "up": 38 }
    }
}

This is one of the player's definitions for one of the levels in the game.  What the exact fields mean isn't that important at this time.  You can see a mixture of arrays [], Boolean values (true/false), string, numbers etc.  The curly brackets { } indicate collections.  I've indented them so I can see what data goes where.

JSON is always of the format "name": value.  The "name" field can be any label you wish.  It is the hashmap's key.  The value field can be any of java-script's data-types (strings, numbers, Booleans, arrays, other collections in {}, null).

The important thing about JSON is that it starts and ends inside a set of curly brackets {} at the top level.

the JSON data can be really easily turned into actual java-script data using jQuery.

You can create whatever JSON you like and 'load' it (use HTTP-GET in java-script) from anywhere on the Internet you like as follows;

var urlStr = 'data/myjson.json';
var xmlhttp = new XMLHttpRequest();
xmlhttp.open( "GET", urlStr, false );
xmlhttp.send();
var jsonStr = xmlhttp.response;

// turn the json string into an actual
// java-script object
var result = jQuery.parseJSON(jsonStr);
if ( result )
{
  alert('got it!');
}

The thing I wanted to do with Gravity Force is turn images of levels (i.e. user designed caves) into java-script JSON.  I wrote a little Java program (as I am a professional commercial Java developer) to do just this.  The following java program loads an image from wherever you point it to.  (it assumes a black and white image, where white is a tile, and black is a space in the cave).  This is a screenshot of some of the output of the program and the original bitmap image I converted so you can see what I'm trying to achieve.

the original bitmap I created using the GIMP, a black and white 256 x 256 pixel PNG file

the top left corner the same image as a JSON data structure, created using the little Java program below

import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.awt.image.Raster;
import java.io.File;
import java.io.IOException;

/*
 * Created by Peter
 *
 * load a bitmap and convert it to a two dimensional javascript array
 *
 */
public class Main
{
    // runs with one cmd line parameter - the image to convert to JSON
    public static void main(String[] args)
    {
        BufferedImage img = null;
        try
        {
            img = ImageIO.read(new File( args[0] ));            if ( img != null )
            {
                StringBuffer sb = new StringBuffer();
                sb.append("{\n");
                sb.append("  \"data\": [\n");

                int[] array = new int[4];
                Raster raster = img.getData();
                for ( int y = 0; y < raster.getHeight(); y++ )
                {
                    sb.append("        [");
                    for ( int x = 0; x < raster.getWidth(); x++ )
                    {
                        raster.getPixel( x, y, array );                        if ( x > 0 )
                        {
                            sb.append(",");
                        }
                        if ( array[0] > 0 )
                        {
                            sb.append( "5" );
                        }
                        else
                        {
                            sb.append( "0" );
                        }                    }
                    sb.append("]");

                    if ( y + 1 < raster.getHeight() )
                    {
                        sb.append(",");
                    }                    sb.append("\n");
                }

                sb.append("    ]\n");
                sb.append("}\n");
                System.out.println( sb.toString() );               }
        }
        catch (IOException e)
        {
            System.out.println( e.toString() );
        }

    }
}