Phaser缓存加载问题(Phaser cache loading problems)

 我正在用相位进行游戏。 我正在加载背景图片，其信息（文件位置）存储在JSON文件中。 当我尝试加载它时，背景是黑色和空白的，并在控制台中获得： 
 
 
 
 Phaser.Cache.getImage：在缓存中未找到密钥“background0”。 
 
 
 以下是我的代码中的相关摘录： 
 
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)
        }
    });
}
 
 这里是JSON文件： 
 
{"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
            }
        ]
    }
]}
 
 使用Chrome，Firefox和Opera进行测试，每次打开页面时，它都会随机出现错误，或者加载背景并正常工作。 我正在使用WAMP在本地托管该页面。 

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.

原文：https://stackoverflow.com/questions/41408766