フェーザーキャッシュロードの問題

Question

私はフェイザーでゲームを作っています。私は背景イメージをロードしており、その情報（ファイルの場所）はJSONファイル内に保存されています。読み込みしようとすると、背景が黒く空になり、コンソールには次のように表示されます。

Phaser.Cache.getImage：キー "background0"がキャッシュに見つかりません。ここで

私のコードから関連の抜粋です：

{"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 
      } 
     ] 
    } 
]} 

クロム、Firefox、およびオペラとテスト、そして私が開くたび：

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ファイルですページ、それはランダムにエラーがあるようだ、または背景を読み込んで正常に動作します。私はWAMPを使ってページをローカルにホストしています。

Answer 1

アセットを読み込むPhaser（JSON、画像など）の方法は、preload関数（または指定したもの）内のgame.load.* APIを使用します。あなたのケースでは、コードは次のようになります。

// 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()は、Phaserのcreate()メソッドが呼び出されたときに準備が整うようにJSONファイルを読み込むことがあります。その場合、すべてが期待通りに機能します。 $.getJSON()が十分に速くない場合、create()がの前に呼び出され、の前にエラーが発生し、JSONファイルがロードされています。

Answer 2

アセットを読み込むのは非同期で、読み込みを要求した直後にアセットにアクセスしようとすると、この方法では失敗します。プリロードロジックをpreload()に移動してください（別の方法はのようにcreate()となります）。create()メソッドを呼び出すと、Phaserは確実にpreload()でリクエストされたものがロードされるようにします。