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()中所請求的所有內容。