Jump to content

Load resources on ajax success callback


piedrahitac
 Share

Recommended Posts

Hello,

 

Probably this question is more related to javascript than Phaser, but I'm stuck so any help would be appreciated.

 

In my new game I have a preload state defined like this:

myGame.preload = function(game) {    // define width and height of the game    myGame.GAME_WIDTH = 960;    myGame.GAME_HEIGHT = 540;};myGame.preload.prototype = {    preload: function() {        // set background color        this.stage.backgroundColor = '#B4D9E7';        // load images        this.load.image('background', 'img/background.jpg');        this.load.image('score-background', 'img/score-background.png');        this.load.image('question-background', 'img/question-background.png');    },    create: function() {        // start the menu state        this.state.start('menu');    }};

Everything works as expected with that code. However, I need to load some JSON data that contains some other custom images to load, so I'm using jQuery to fetch the file and I expected to do it by making the next ajax call inside the preload function:

// WARNING: This code is bogus$.when($.getJSON('data1.json'), $.getJSON('data2.json')).then(function(data) {        // success        this.load.image('customImg1', 'img/' + data[0].img);        this.load.image('customImg2', 'img/' + data[1].img);    }, function(data) {        // failure});

Clearly the this keyword is not referencing my game in that context and I get an exception. So how would I work around this issue?

 

Excuse me if I'm not being clear enough, and feel free to ask questions if you need more background... Thanks in advance.

Link to comment
Share on other sites

To be more specific - you'd probably want to set up states too, so you can preload the JSON files (in a 'Boot' state for example) then advance to the next state where you can then make use of the preloaded JSON to load your next set of assets in the preload function again. Here's a great simple example of a project with multiple states: https://github.com/photonstorm/phaser/tree/dev/resources/Project%20Templates/Basic

Link to comment
Share on other sites

To be more specific - you'd probably want to set up states too, so you can preload the JSON files (in a 'Boot' state for example) then advance to the next state where you can then make use of the preloaded JSON to load your next set of assets in the preload function again. Here's a great simple example of a project with multiple states: https://github.com/photonstorm/phaser/tree/dev/resources/Project%20Templates/Basic

Thanks for the insight lewster...

 

I'm actually using states in my game, I have a boot, preload, menu and game states just like the ones in the example.

 

Now that you mention it, I think using Phaser's own method seems like the best way to go, and I will try to load the json in the boot state instead of the preload state.

 

Just one question, though... Just in case I need it someday, is there a way to have an onComplete handler on the game.load.json method?

 

EDIT: Now I don't know what post should I mark as the best answer, hahaha...

Link to comment
Share on other sites

Something like this should work for checking if a specific file is complete:

function preload() {  game.load.onFileComplete.add(function(key) {    if (key === 'data') {      var data = game.cache.getJSON(key);      // data is now populated with the contents of the JSON file    }  }, this);  game.load.json('data', 'assets/data.json');}
Link to comment
Share on other sites

 

Something like this should work for checking if a specific file is complete:

function preload() {  game.load.onFileComplete.add(function(key) {    if (key === 'data') {      var data = game.cache.getJSON(key);      // data is now populated with the contents of the JSON file    }  }, this);  game.load.json('data', 'assets/data.json');}

Sweet, thanks!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...