Phaser cache loading problems

Question

I am making a game in phaser. I am loading a background image, and its information (file location) is stored within a JSON file. When I try to load it, the background is black and empty, and in the console I get:

Phaser.Cache.getImage: Key "background0" not found in Cache.

Here is the relevant extract from my code:

function create() {

    //>Load JSON file and background images found inside the file
    $.getJSON("levels.json", function(json) {
        for (var i = 0; i < json.levels.length; i++) {
            game.load.image('background' + i.toString(), json.levels[i].background);
        }
        game.load.start();
   });

    back_layer = game.add.group();
    var i = 0;
    var level_finished = 0;

    $.getJSON("levels.json", function(json) {
        if (i < json.levels.length) {
            console.log("Level " + (i + 1).toString());
            var current_background = back_layer.create(0, 0, 'background' + i.toString());

            check = setInterval(function() {
                if (level_finished == 1) {
                    i++;
                    current_background.destroy();
                    clearInterval(check);
                }
            }, 500)
        }
    });
}

And here is the JSON file:

{"levels":[
    {
        "background": "assets/img/Back.png",
        "portals": [
            {
                "locationX": 400,
                "locationY": 450,
                "toX": 100,
                "toY": 200,
                "spinSpeed": 1
            },
            {
                "locationX": 50,
                "locationY": 200,
                "toX": 100,
                "toY": 450,
                "spinSpeed": 2
            }
        ]
    }
]}

Testing with Chrome, Firefox, and Opera, and every time I open the page, it seems to randomly have the error, or load the background and work fine. I am using WAMP to locally host the page.

Answer 1

The Phaser way of loading assets (JSON, images, etc) is by using the game.load.* API within the preload function (or the one you specified for that). In your case, the code should be:

// Use your game instance here
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });

function preload() {
    // Load JSON file describing the level
    game.load.json('levels', 'levels.json');
}

// The function below will be automatically invoked by Phaser when
// the assets in the preload() function finished loading
function create() {
    var json = game.cache.getJSON('levels');

    // Enque the load of the background images found inside the level file
    for (var i = 0; i < json.levels.length; i++) {
        game.load.image('background' + i.toString(), json.levels[i].background);
    }

    // Specify loadComplete() as a callback to be called when all assets finished loading
    game.load.onLoadComplete.add(loadComplete, this);

    // Load the newly enqued assets
    game.load.start();
}

// The function below will be automatically invoked by Phaser when
// the assets in the create() function finished loading
function loadComplete() {
    var json = game.cache.getJSON('levels');

    back_layer = game.add.group();
    var i = 0;
    var level_finished = 0;

    if (i < json.levels.length) {
        console.log("Level " + (i + 1).toString());
        var current_background = back_layer.create(0, 0, 'background' + i.toString());

        check = setInterval(function() {
            if (level_finished == 1) {
                i++;
                current_background.destroy();
                clearInterval(check);
            }
        }, 500)
    }
}

The reason why you have a random behavior (sometimes it works fine, sometimes it doesn't) is because you are using jQuery ($.getJSON()) instead of Phaser built-in system to load the JSON file.

Since jQuery is not related to Phaser, they are not synchronized (nor ordered during invocations). As a consequence, sometimes $.getJSON() loads the JSON file fast enough for it to be ready when Phaser's create() method is invoked. In that case, everything works as expected. When $.getJSON() is not fast enough, create() will be invoked before the JSON file has been loaded, causing an error.

Answer 2

Loading assets in Phaser is asynchronous and if you try to access something right after you've requested something to load, it will fail this way. Move the preloading logic to preload() (another method of Phaser.State just like create()) - Phaser will ensure that upon calling your create() method, everything requested in preload() will have been loaded.