piedrahitac Posted August 5, 2014 Share Posted August 5, 2014 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 More sharing options...
cub Posted August 5, 2014 Share Posted August 5, 2014 You may store your "this" to a variable// my contextvar that = this;function AA(){ that.BB();}function BB(){}orUse the bind option ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind )function.bind(context, param1, param2, ...) Link to comment Share on other sites More sharing options...
piedrahitac Posted August 5, 2014 Author Share Posted August 5, 2014 Thanks a lot cub! I used the bind option to bind the success callback and it worked... Sometimes it breaks and doesn't load the sprites despite the successful callback but I think that's due to another issue... Link to comment Share on other sites More sharing options...
lewster32 Posted August 5, 2014 Share Posted August 5, 2014 I'd recommend using game.load.json over the jQuery method, as it ensures Phaser handles all the loading itself before progressing the state. Link to comment Share on other sites More sharing options...
lewster32 Posted August 5, 2014 Share Posted August 5, 2014 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 More sharing options...
piedrahitac Posted August 6, 2014 Author Share Posted August 6, 2014 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/BasicThanks 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 More sharing options...
lewster32 Posted August 6, 2014 Share Posted August 6, 2014 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');} phaserdragoon 1 Link to comment Share on other sites More sharing options...
piedrahitac Posted August 7, 2014 Author Share Posted August 7, 2014 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 More sharing options...
Recommended Posts