Faster Map Rendering - HTML5 Game Development Insights - page 255

this.imgLoadCount=0; //we may be loading many loose images, as such keep a count of how many
have been loaded
this.fullyLoaded=false; //don't start rendering until everything is loaded
//.....important functions go here
}
var gMap = new TILEDmap();
Note that it's important to create a global gMap object here, as you'll need to reference it from a few callbacks
as well as code inside this file.
Fetch the Data from the Server
Your map data have to come from somewhere, and chances are that you'll need to save your content in JavaScript
Object Notation (JSON) and upload it to your web server to be loaded into your game. If you're unfamiliar with
the process of grabbing blobs of data from a URL, you can use the handy application programming interface (API)
XMLHttpRequest ( XHR) to do just that. XHR has many uses, features, and settings that are beyond the scope of this
chapter; here, you need it simply to fetch your text-based map data file.
One thing worth noting about this load function is that the response function will call a parse operation on the
JSON, and this is where the real magic happens:
//from TILEDmap.js
//---------------------------
this.load= function ()
{
var xhr = new XMLHttpRequest();
//this is a hard-coded URL to where the map file is sitting
xhr.open("GET", "./data/map.json", true);
//note that the data is standard text, so you need to set the mime type accordingly
xhr.overrideMimeType('text/plain; charset=x-user-defined');
//here we define what happens when the data-fetch attempts to complete; this callback will be executed
xhr.onreadystatechange = function()
{
//did we successfully get the data?
if (xhr.readyState != 4 || xhr.responseText =="")
return;
//go ahead and pass the fetched content to the parsing system
gMap.parseMapJSON(xhr.response);
};
//execute the XHR
xhr.send();
};