Phaser缓存加载问题

Question

我正在用phaser进行游戏。我正在加载背景图片，其信息（文件位置）存储在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，火狐和Opera，我每次打开时间该页面，它似乎随机有错误，或加载的背景，并正常工作。我正在使用WAMP在本地托管该页面。

Answer 1

通过在preload函数（或为此指定的函数）内使用game.load.* API，装载资产（JSON，图像等）的Phaser方式。在你的情况下，代码应该是：

// 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) 
    } 
} 

为什么你有一个随机行为的原因（有时它工作正常，有时不）是因为你使用jQuery（$.getJSON()），而不是内置移相器在系统中加载JSON文件。

由于jQuery与Phaser无关，因此它们不会同步（也不会在调用过程中进行排序）。因此，有时$.getJSON()加载JSON文件足够快，以便在Phaser的create()方法被调用时准备就绪。在那种情况下，一切都按预期工作。当$.getJSON()速度不够快，create()将被调用之前 JSON文件已被加载，导致错误。

Answer 2

在Phaser中加载资产是异步的，如果您在请求加载某个内容后尝试访问某个内容，它将以此方式失败。将预加载逻辑移动到preload()（Phaser.State的另一种方法，就像create()） - Phaser将确保在调用您的create()方法后，将加载preload()中所请求的所有内容。