페이저 캐시 로딩 문제

Question

나는 페이저로 게임을 만들고 있습니다. 배경 이미지를로드하는 중이고 그 정보 (파일 위치)는 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 
      } 
     ] 
    } 
]} 

테스트, 나는 열 때마다 페이지, 무작위로 오류가있는 것, 또는 배경을로드하고 잘 작동하는 것 같습니다. WAMP를 사용하여 페이지를 로컬로 호스팅하고 있습니다.

Answer 1

자산을 페이징하는 방법 (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() 메서드를 호출 할 때 preload()에 요청 된 모든 항목이로드되도록합니다.