Building a level editor for a shoot em up – JSON issue

We have a number of in-house tools written through a combination of Javascript and PHP. The data from the editors is written to a MySQL database and much of the workflow is handled within a single page – i.e. AJAX requests firing off to the back end to retrieve and update data.

Something that we hurl around a fair bit is JSON.

Currently the focus is on building an interface for designing levels for our forthcoming shoot ’em up; Akari: Battle Star.

What we’re after is precision. That is, we want to place entities within the game to be triggered at specific times during the game’s progress.

We call this tool Neo.

The Neo data is stored in a database table that is pretty straight forward in its design.

Within the editor we select the game and level to work on and an AJAX request pulls the data from the database. The result of which is a PHP array.

We then encode the array into a JSON format via PHP’s json_encode() method. This presents us with the Javascript that we can then use to write the front end.

Manipulating the JSON within the Neo front end is straight forward and we use jQuery for much of this.

Once we’re happy with the data we then fire off another AJAX call to post the data to the back end. This is were we ran into problems.

In short we were struggling to decode the JSON into a PHP array.

The JSON format we pass in looks something like this:

    {"gameid":1,"level":1,"trigger":100,"entityType":"formation",alienRow:1}

There’s much more to the data than that but essentially this is the format. The trigger value is the stage of the game (in ticks) at which point the entity data is triggered.

When we attempt to decode this JSON string and form the PHP array it’s successful.

But when we add another object to the string, it fails.

Something like this:

    {"gameid":1,"level":1,"trigger":100,"entityType":"formation",alienRow:1},
    {"gameid":1,"level":1,"trigger":150,"entityType":"island",alienRow:0}

We couldn’t for the life of us figure out why this wouldn’t work. So we employed PHP’s json_last_error() method which captures the last attempt at decoding JSON.

    json_decode($string);

    switch (json_last_error()) {
        case JSON_ERROR_NONE:
            echo ' - No errors';
        break;
        case JSON_ERROR_DEPTH:
            echo ' - Maximum stack depth exceeded';
        break;
        case JSON_ERROR_STATE_MISMATCH:
            echo ' - Underflow or the modes mismatch';
        break;
        case JSON_ERROR_CTRL_CHAR:
            echo ' - Unexpected control character found';
        break;
        case JSON_ERROR_SYNTAX:
            echo ' - Syntax error, malformed JSON';
        break;
        case JSON_ERROR_UTF8:
            echo ' - Malformed UTF-8 characters, possibly incorrectly encoded';
        break;
        default:
            echo ' - Unknown error';
        break;
    }

We received the error

 - Syntax error, malformed JSON

Some of you seasoned eagle-eyed Javascript gurus will have already noticed the problem.

We were trying to construct a Javascript array by formatting it badly.

The JSON we should have been passing looks something like this:

    {"data":[{"gameid":1,"level":1,"trigger":100,"entityType":"formation",alienRow:1},
    {"gameid":1,"level":1,"trigger":150,"entityType":"island",alienRow:0}]}

Once we’d defined the Javascript properly in an array format the decoding worked.

Neo development is now moving forward at pace and we’re having a huge amount of fun designing the levels and graphics.

 

 

Leave a reply