Проблемы с загрузкой кеша 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, Firefox и Opera, и каждый раз, когда я открываю на странице, кажется, случайная ошибка, или загрузить фон и работать нормально. Я использую WAMP для локального размещения страницы.

Answer 1

Путем загрузки активов (JSON, изображения и т. Д.) Phaser использует API game.load.* в пределах функции preload (или той, которую вы указали для этого). В вашем случае, код должен быть:

// 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()) вместо Phaser встроенного в систему для загрузки файла JSON.

Поскольку jQuery не связан с Phaser, они не синхронизируются (и не заказываются во время вызовов). Как следствие, иногда $.getJSON() загружает файл JSON достаточно быстро, чтобы он был готов, когда вызывается метод Phaser create(). В этом случае все работает так, как ожидалось. Когда $.getJSON() не будет достаточно быстрым, create() будет вызываться до был загружен файл JSON, что вызвало ошибку.

Answer 2

Загрузка активов в Phaser является асинхронной, и если вы попытаетесь получить доступ к чему-либо сразу после того, как вы попросите что-то загрузить, оно не удастся таким образом. Переместите логику предварительной загрузки на preload() (другой метод Phaser.State точно так же, как create()). Phaser гарантирует, что при вызове вашего метода create() все запрошенное в preload() будет загружено.