Question

I’m sure I’m not following correct game coding conventions here, but I’m very much learning as I go.

Reference URL: http://www.rustyeight.com/game

I have a JSON feed that I’m using as part of a sprite based map rendering engine. I’m using JQuery’s $.getJSON method to pull information from a feed (maps.js) and fill an array with its contents.

I’m then calling this function with a draw function.

function draw(ctx){
    map(ctx);
    makeMan(ctx);
}

I found it strange that I didn’t declare the array within the $.getJSON function, all of the array items would come up as undefined when I tried to access them. So I just moved the variable call and all other processes into the function and it seemed to work fine.

I also have a function that draws a character data from an object.

The issue I’m now having is that no matter where the makeMan() function call is places, the character always renders under the map. I have a feeling that this issue is based off of the fact that I couldn’t access the map array outside of the json call. I’m also guessing it’s really inefficient to have to force the context into the function every time I call a drawing function.

Please refer to the link above for the code. Please let me know if you need any clarification. I’m pulling my hair out here!

Answer 1

Since your map() function uses AJAX, it becomes asynchronous. So while the browser is off performing an HTTP request, it moves on and does the rest of the script. In this case, it renders the man.

So what’s happening is the entire script executes, renders the man, THEN the httpRequest completes and renders the map on top of him.

You should call makeMan() after the AJAX call, by either specifying a callback function to execute once it’s complete, or just by inlining it at the end of the map AJAX function.

And I just remembered jQuery.when, which is exactly what you need.