Newer
Older
pixi.js / src / loaders / JsonLoader.js
@Chad Engler Chad Engler on 27 Dec 2014 6 KB tons of jshint and typo fixes
var EventTarget = require('../utils/EventTarget'),
    ImageLoader = require('./ImageLoader'),
    SpineTextureLoader = require('../extras/spine/SpineTextureLoader'),
    Texture = require('../textures/Texture'),
    math = require('../math'),
    utils = require('../utils');

/**
 * The json file loader is used to load in JSON data and parse it
 * When loaded this class will dispatch a 'loaded' event
 * If loading fails this class will dispatch an 'error' event
 *
 * @class
 * @mixes EventTarget
 * @namespace PIXI
 * @param url {String} The url of the JSON file
 * @param crossorigin {boolean} Whether requests should be treated as crossorigin
 */
function JsonLoader(url, crossorigin) {
    /**
     * The url of the bitmap font data
     *
     * @member {String}
     */
    this.url = url;

    /**
     * Whether the requests should be treated as cross origin
     *
     * @member {boolean}
     */
    this.crossorigin = crossorigin;

    /**
     * The base url of the bitmap font data
     *
     * @member {String}
     * @readOnly
     */
    this.baseUrl = url.replace(/[^\/]*$/, '');

    /**
     * Whether the data has loaded yet
     *
     * @member {boolean}
     * @readOnly
     */
     this.loaded = false;
}

// constructor
JsonLoader.prototype.constructor = JsonLoader;
module.exports = JsonLoader;

EventTarget.mixin(JsonLoader.prototype);

/**
 * Loads the JSON data
 *
 */
JsonLoader.prototype.load = function () {
    if (window.XDomainRequest && this.crossorigin) {
        this.ajaxRequest = new window.XDomainRequest();

        // XDomainRequest has a few quirks. Occasionally it will abort requests
        // A way to avoid this is to make sure ALL callbacks are set even if not used
        // More info here: http://stackoverflow.com/questions/15786966/xdomainrequest-aborts-post-on-ie-9
        this.ajaxRequest.timeout = 3000;

        this.ajaxRequest.onerror = this.onError.bind(this);
        this.ajaxRequest.ontimeout = this.onError.bind(this);

        this.ajaxRequest.onprogress = function () {};

        this.ajaxRequest.onload = this.onJSONLoaded.bind(this);
    }
    else {
        if (window.XMLHttpRequest) {
            this.ajaxRequest = new window.XMLHttpRequest();
        }
        else {
            this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP');
        }

        this.ajaxRequest.onreadystatechange = this.onReadyStateChanged.bind(this);
    }

    this.ajaxRequest.open('GET',this.url,true);

    this.ajaxRequest.send();
};

/**
 * Bridge function to be able to use the more reliable onreadystatechange in XMLHttpRequest.
 *
 * @private
 */
JsonLoader.prototype.onReadyStateChanged = function () {
    if (this.ajaxRequest.readyState === 4 && (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1)) {
        this.onJSONLoaded();
    }
};

/**
 * Invoke when JSON file is loaded
 *
 * @private
 */
JsonLoader.prototype.onJSONLoaded = function () {
    if (!this.ajaxRequest.responseText) {
        this.onError();
        return;
    }

    this.json = JSON.parse(this.ajaxRequest.responseText);

    if (this.json.frames) {
        // sprite sheet
        var textureUrl = this.baseUrl + this.json.meta.image;
        var image = new ImageLoader(textureUrl, this.crossorigin);
        var frameData = this.json.frames;

        this.texture = image.texture.baseTexture;
        image.addEventListener('loaded', this.onLoaded.bind(this));

        for (var i in frameData) {
            var rect = frameData[i].frame;

            if (rect) {
                var textureSize = new math.Rectangle(rect.x, rect.y, rect.w, rect.h);
                var crop = textureSize.clone();
                var trim = null;

                //  Check to see if the sprite is trimmed
                if (frameData[i].trimmed) {
                    var actualSize = frameData[i].sourceSize;
                    var realSize = frameData[i].spriteSourceSize;
                    trim = new math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h);
                }
                utils.TextureCache[i] = new Texture(this.texture, textureSize, crop, trim);
            }
        }

        image.load();

    }
    else if (this.json.bones) {
		// check if the json was loaded before
		if (utils.AnimCache[this.url]) {
			this.onLoaded();
		}
		else {
			/**
             * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files
			 * that correspond to the spine file are in the same base URL and that the .json and .atlas files
			 * have the same name
			 */
			var atlasPath = this.url.substr(0, this.url.lastIndexOf('.')) + '.atlas';
			var atlasLoader = new JsonLoader(atlasPath, this.crossorigin);
			// save a copy of the current object for future reference //
			var originalLoader = this;
			// before loading the file, replace the "onJSONLoaded" function for our own //
			atlasLoader.onJSONLoaded = function () {
				// at this point "this" points at the atlasLoader (JsonLoader) instance //
				if (!this.ajaxRequest.responseText) {
					this.onError(); // FIXME: hmm, this is funny because we are not responding to errors yet
					return;
				}
				// create a new instance of a spine texture loader for this spine object //
				var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/')));
				// create a spine atlas using the loaded text and a spine texture loader instance //
				var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader);
				// now we use an atlas attachment loader //
				var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas);
				// spine animation
				var spineJsonParser = new spine.SkeletonJson(attachmentLoader);
				var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json);
				utils.AnimCache[originalLoader.url] = skeletonData;
				originalLoader.spine = skeletonData;
				originalLoader.spineAtlas = spineAtlas;
				originalLoader.spineAtlasLoader = atlasLoader;
				// wait for textures to finish loading if needed
				if (textureLoader.loadingCount > 0) {
					textureLoader.addEventListener('loadedBaseTexture', function (evt){
						if (evt.content.content.loadingCount <= 0) {
							originalLoader.onLoaded();
						}
					});
				}
				else {
					originalLoader.onLoaded();
				}
			};
			// start the loading //
			atlasLoader.load();
		}
    }
    else {
        this.onLoaded();
    }
};

/**
 * Invoke when json file loaded
 *
 * @private
 */
JsonLoader.prototype.onLoaded = function () {
    this.loaded = true;
    this.dispatchEvent({
        type: 'loaded',
        content: this
    });
};

/**
 * Invoke when error occured
 *
 * @private
 */
JsonLoader.prototype.onError = function () {

    this.dispatchEvent({
        type: 'error',
        content: this
    });
};