updated pixi to v2

app/Lib/Vendor/src/pixi/loaders/AssetLoader.js

@@ -0,0 +1,160 @@
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the
+ * assets have been loaded they are added to the PIXI Texture cache and can be accessed
+ * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()
+ * When all items have been loaded this class will dispatch a 'onLoaded' event
+ * As each individual item is loaded this class will dispatch a 'onProgress' event
+ *
+ * @class AssetLoader
+ * @constructor
+ * @uses EventTarget
+ * @param assetURLs {Array(String)} An array of image/sprite sheet urls that you would like loaded
+ *      supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported
+ *      sprite sheet data formats only include 'JSON' at this time. Supported bitmap font
+ *      data formats include 'xml' and 'fnt'.
+ * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
+ */
+PIXI.AssetLoader = function(assetURLs, crossorigin)
+{
+    /**
+     * The array of asset URLs that are going to be loaded
+     *
+     * @property assetURLs
+     * @type Array(String)
+     */
+    this.assetURLs = assetURLs;
+
+    /**
+     * Whether the requests should be treated as cross origin
+     *
+     * @property crossorigin
+     * @type Boolean
+     */
+    this.crossorigin = crossorigin;
+
+    /**
+     * Maps file extension to loader types
+     *
+     * @property loadersByType
+     * @type Object
+     */
+    this.loadersByType = {
+        'jpg':  PIXI.ImageLoader,
+        'jpeg': PIXI.ImageLoader,
+        'png':  PIXI.ImageLoader,
+        'gif':  PIXI.ImageLoader,
+        'webp': PIXI.ImageLoader,
+        'json': PIXI.JsonLoader,
+        'atlas': PIXI.AtlasLoader,
+        'anim': PIXI.SpineLoader,
+        'xml':  PIXI.BitmapFontLoader,
+        'fnt':  PIXI.BitmapFontLoader
+    };
+};
+
+PIXI.EventTarget.mixin(PIXI.AssetLoader.prototype);
+
+/**
+ * Fired when an item has loaded
+ * @event onProgress
+ */
+
+/**
+ * Fired when all the assets have loaded
+ * @event onComplete
+ */
+
+// constructor
+PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader;
+
+/**
+ * Given a filename, returns its extension.
+ *
+ * @method _getDataType
+ * @param str {String} the name of the asset
+ */
+PIXI.AssetLoader.prototype._getDataType = function(str)
+{
+    var test = 'data:';
+    //starts with 'data:'
+    var start = str.slice(0, test.length).toLowerCase();
+    if (start === test) {
+        var data = str.slice(test.length);
+
+        var sepIdx = data.indexOf(',');
+        if (sepIdx === -1) //malformed data URI scheme
+            return null;
+
+        //e.g. 'image/gif;base64' => 'image/gif'
+        var info = data.slice(0, sepIdx).split(';')[0];
+
+        //We might need to handle some special cases here...
+        //standardize text/plain to 'txt' file extension
+        if (!info || info.toLowerCase() === 'text/plain')
+            return 'txt';
+
+        //User specified mime type, try splitting it by '/'
+        return info.split('/').pop().toLowerCase();
+    }
+
+    return null;
+};
+
+/**
+ * Starts loading the assets sequentially
+ *
+ * @method load
+ */
+PIXI.AssetLoader.prototype.load = function()
+{
+    var scope = this;
+
+    function onLoad(evt) {
+        scope.onAssetLoaded(evt.data.content);
+    }
+
+    this.loadCount = this.assetURLs.length;
+
+    for (var i=0; i < this.assetURLs.length; i++)
+    {
+        var fileName = this.assetURLs[i];
+        //first see if we have a data URI scheme..
+        var fileType = this._getDataType(fileName);
+
+        //if not, assume it's a file URI
+        if (!fileType)
+            fileType = fileName.split('?').shift().split('.').pop().toLowerCase();
+
+        var Constructor = this.loadersByType[fileType];
+        if(!Constructor)
+            throw new Error(fileType + ' is an unsupported file type');
+
+        var loader = new Constructor(fileName, this.crossorigin);
+
+        loader.on('loaded', onLoad);
+        loader.load();
+    }
+};
+
+/**
+ * Invoked after each file is loaded
+ *
+ * @method onAssetLoaded
+ * @private
+ */
+PIXI.AssetLoader.prototype.onAssetLoaded = function(loader)
+{
+    this.loadCount--;
+    this.emit('onProgress', { content: this, loader: loader });
+    if (this.onProgress) this.onProgress(loader);
+
+    if (!this.loadCount)
+    {
+        this.emit('onComplete', { content: this });
+        if(this.onComplete) this.onComplete();
+    }
+};

app/Lib/Vendor/src/pixi/loaders/AtlasLoader.js

@@ -0,0 +1,190 @@
+/**
+ * @author Martin Kelm http://mkelm.github.com
+ */
+
+/**
+ * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event.
+ *
+ * To generate the data you can use http://www.codeandweb.com/texturepacker and publish in the 'JSON' format.
+ * 
+ * It is highly recommended to use texture atlases (also know as 'sprite sheets') as it allowed sprites to be batched and drawn together for highly increased rendering speed.
+ * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFrameId()
+ * 
+ * @class AtlasLoader
+ * @uses EventTarget
+ * @constructor
+ * @param url {String} The url of the JSON file
+ * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
+ */
+PIXI.AtlasLoader = function (url, crossorigin) {
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, '');
+    this.crossorigin = crossorigin;
+    this.loaded = false;
+
+};
+
+// constructor
+PIXI.AtlasLoader.constructor = PIXI.AtlasLoader;
+
+PIXI.EventTarget.mixin(PIXI.AtlasLoader.prototype);
+
+ /**
+ * Starts loading the JSON file
+ *
+ * @method load
+ */
+PIXI.AtlasLoader.prototype.load = function () {
+    this.ajaxRequest = new PIXI.AjaxRequest();
+    this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this);
+
+    this.ajaxRequest.open('GET', this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json');
+    this.ajaxRequest.send(null);
+};
+
+/**
+ * Invoked when the Atlas has fully loaded. Parses the JSON and builds the texture frames.
+ * 
+ * @method onAtlasLoaded
+ * @private
+ */
+PIXI.AtlasLoader.prototype.onAtlasLoaded = function () {
+    if (this.ajaxRequest.readyState === 4) {
+        if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) {
+            this.atlas = {
+                meta : {
+                    image : []
+                },
+                frames : []
+            };
+            var result = this.ajaxRequest.responseText.split(/\r?\n/);
+            var lineCount = -3;
+
+            var currentImageId = 0;
+            var currentFrame = null;
+            var nameInNextLine = false;
+
+            var i = 0,
+                j = 0,
+                selfOnLoaded = this.onLoaded.bind(this);
+
+            // parser without rotation support yet!
+            for (i = 0; i < result.length; i++) {
+                result[i] = result[i].replace(/^\s+|\s+$/g, '');
+                if (result[i] === '') {
+                    nameInNextLine = i+1;
+                }
+                if (result[i].length > 0) {
+                    if (nameInNextLine === i) {
+                        this.atlas.meta.image.push(result[i]);
+                        currentImageId = this.atlas.meta.image.length - 1;
+                        this.atlas.frames.push({});
+                        lineCount = -3;
+                    } else if (lineCount > 0) {
+                        if (lineCount % 7 === 1) { // frame name
+                            if (currentFrame != null) { //jshint ignore:line
+                                this.atlas.frames[currentImageId][currentFrame.name] = currentFrame;
+                            }
+                            currentFrame = { name: result[i], frame : {} };
+                        } else {
+                            var text = result[i].split(' ');
+                            if (lineCount % 7 === 3) { // position
+                                currentFrame.frame.x = Number(text[1].replace(',', ''));
+                                currentFrame.frame.y = Number(text[2]);
+                            } else if (lineCount % 7 === 4) { // size
+                                currentFrame.frame.w = Number(text[1].replace(',', ''));
+                                currentFrame.frame.h = Number(text[2]);
+                            } else if (lineCount % 7 === 5) { // real size
+                                var realSize = {
+                                    x : 0,
+                                    y : 0,
+                                    w : Number(text[1].replace(',', '')),
+                                    h : Number(text[2])
+                                };
+
+                                if (realSize.w > currentFrame.frame.w || realSize.h > currentFrame.frame.h) {
+                                    currentFrame.trimmed = true;
+                                    currentFrame.realSize = realSize;
+                                } else {
+                                    currentFrame.trimmed = false;
+                                }
+                            }
+                        }
+                    }
+                    lineCount++;
+                }
+            }
+
+            if (currentFrame != null) { //jshint ignore:line
+                this.atlas.frames[currentImageId][currentFrame.name] = currentFrame;
+            }
+
+            if (this.atlas.meta.image.length > 0) {
+                this.images = [];
+                for (j = 0; j < this.atlas.meta.image.length; j++) {
+                    // sprite sheet
+                    var textureUrl = this.baseUrl + this.atlas.meta.image[j];
+                    var frameData = this.atlas.frames[j];
+                    this.images.push(new PIXI.ImageLoader(textureUrl, this.crossorigin));
+
+                    for (i in frameData) {
+                        var rect = frameData[i].frame;
+                        if (rect) {
+                            PIXI.TextureCache[i] = new PIXI.Texture(this.images[j].texture.baseTexture, {
+                                x: rect.x,
+                                y: rect.y,
+                                width: rect.w,
+                                height: rect.h
+                            });
+                            if (frameData[i].trimmed) {
+                                PIXI.TextureCache[i].realSize = frameData[i].realSize;
+                                // trim in pixi not supported yet, todo update trim properties if it is done ...
+                                PIXI.TextureCache[i].trim.x = 0;
+                                PIXI.TextureCache[i].trim.y = 0;
+                            }
+                        }
+                    }
+                }
+
+                this.currentImageId = 0;
+                for (j = 0; j < this.images.length; j++) {
+                    this.images[j].on('loaded', selfOnLoaded);
+                }
+                this.images[this.currentImageId].load();
+
+            } else {
+                this.onLoaded();
+            }
+
+        } else {
+            this.onError();
+        }
+    }
+};
+
+/**
+ * Invoked when json file has loaded.
+ * 
+ * @method onLoaded
+ * @private
+ */
+PIXI.AtlasLoader.prototype.onLoaded = function () {
+    if (this.images.length - 1 > this.currentImageId) {
+        this.currentImageId++;
+        this.images[this.currentImageId].load();
+    } else {
+        this.loaded = true;
+        this.emit('loaded', { content: this });
+    }
+};
+
+/**
+ * Invoked when an error occurs.
+ * 
+ * @method onError
+ * @private
+ */
+PIXI.AtlasLoader.prototype.onError = function () {
+    this.emit('error', { content: this });
+};

app/Lib/Vendor/src/pixi/loaders/BitmapFontLoader.js

@@ -0,0 +1,161 @@
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt')
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a 'loaded' event
+ *
+ * @class BitmapFontLoader
+ * @uses EventTarget
+ * @constructor
+ * @param url {String} The url of the sprite sheet JSON file
+ * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
+ */
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /**
+     * The url of the bitmap font data
+     *
+     * @property url
+     * @type String
+     */
+    this.url = url;
+
+    /**
+     * Whether the requests should be treated as cross origin
+     *
+     * @property crossorigin
+     * @type Boolean
+     */
+    this.crossorigin = crossorigin;
+
+    /**
+     * [read-only] The base url of the bitmap font data
+     *
+     * @property baseUrl
+     * @type String
+     * @readOnly
+     */
+    this.baseUrl = url.replace(/[^\/]*$/, '');
+
+    /**
+     * [read-only] The texture of the bitmap font
+     *
+     * @property texture
+     * @type Texture
+     */
+    this.texture = null;
+};
+
+// constructor
+PIXI.BitmapFontLoader.prototype.constructor = PIXI.BitmapFontLoader;
+PIXI.EventTarget.mixin(PIXI.BitmapFontLoader.prototype);
+
+/**
+ * Loads the XML font data
+ *
+ * @method load
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new PIXI.AjaxRequest();
+    this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this);
+
+    this.ajaxRequest.open('GET', this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml');
+    this.ajaxRequest.send(null);
+};
+
+/**
+ * Invoked when the XML file is loaded, parses the data.
+ *
+ * @method onXMLLoaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState === 4)
+    {
+        if (this.ajaxRequest.status === 200 || window.location.protocol.indexOf('http') === -1)
+        {
+            var responseXML = this.ajaxRequest.responseXML;
+            if(!responseXML || /MSIE 9/i.test(navigator.userAgent) || navigator.isCocoonJS) {
+                if(typeof(window.DOMParser) === 'function') {
+                    var domparser = new DOMParser();
+                    responseXML = domparser.parseFromString(this.ajaxRequest.responseText, 'text/xml');
+                } else {
+                    var div = document.createElement('div');
+                    div.innerHTML = this.ajaxRequest.responseText;
+                    responseXML = div;
+                }
+            }
+
+            var textureUrl = this.baseUrl + responseXML.getElementsByTagName('page')[0].getAttribute('file');
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = responseXML.getElementsByTagName('info')[0];
+            var common = responseXML.getElementsByTagName('common')[0];
+            data.font = info.getAttribute('face');
+            data.size = parseInt(info.getAttribute('size'), 10);
+            data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = responseXML.getElementsByTagName('char');
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].getAttribute('id'), 10);
+
+                var textureRect = new PIXI.Rectangle(
+                    parseInt(letters[i].getAttribute('x'), 10),
+                    parseInt(letters[i].getAttribute('y'), 10),
+                    parseInt(letters[i].getAttribute('width'), 10),
+                    parseInt(letters[i].getAttribute('height'), 10)
+                );
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].getAttribute('xoffset'), 10),
+                    yOffset: parseInt(letters[i].getAttribute('yoffset'), 10),
+                    xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10),
+                    kerning: {},
+                    texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect)
+
+                };
+            }
+
+            //parse kernings
+            var kernings = responseXML.getElementsByTagName('kerning');
+            for (i = 0; i < kernings.length; i++)
+            {
+                var first = parseInt(kernings[i].getAttribute('first'), 10);
+                var second = parseInt(kernings[i].getAttribute('second'), 10);
+                var amount = parseInt(kernings[i].getAttribute('amount'), 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            image.addEventListener('loaded', this.onLoaded.bind(this));
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ *
+ * @method onLoaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.emit('loaded', { content: this });
+};

app/Lib/Vendor/src/pixi/loaders/ImageLoader.js

@@ -0,0 +1,102 @@
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif')
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrame() and PIXI.Sprite.fromFrame()
+ * When loaded this class will dispatch a 'loaded' event
+ *
+ * @class ImageLoader
+ * @uses EventTarget
+ * @constructor
+ * @param url {String} The url of the image
+ * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    /**
+     * The texture being loaded
+     *
+     * @property texture
+     * @type Texture
+     */
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+
+    /**
+     * if the image is loaded with loadFramedSpriteSheet
+     * frames will contain the sprite sheet frames
+     *
+     * @property frames
+     * @type Array
+     * @readOnly
+     */
+    this.frames = [];
+};
+
+// constructor
+PIXI.ImageLoader.prototype.constructor = PIXI.ImageLoader;
+
+PIXI.EventTarget.mixin(PIXI.ImageLoader.prototype);
+
+/**
+ * Loads image or takes it from cache
+ *
+ * @method load
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        this.texture.baseTexture.on('loaded', this.onLoaded.bind(this));
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ *
+ * @method onLoaded
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.emit('loaded', { content: this });
+};
+
+/**
+ * Loads image and split it to uniform sized frames
+ *
+ * @method loadFramedSpriteSheet
+ * @param frameWidth {Number} width of each frame
+ * @param frameHeight {Number} height of each frame
+ * @param textureName {String} if given, the frames will be cached in <textureName>-<ord> format
+ */
+PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName)
+{
+    this.frames = [];
+    var cols = Math.floor(this.texture.width / frameWidth);
+    var rows = Math.floor(this.texture.height / frameHeight);
+
+    var i=0;
+    for (var y=0; y<rows; y++)
+    {
+        for (var x=0; x<cols; x++,i++)
+        {
+            var texture = new PIXI.Texture(this.texture.baseTexture, {
+                x: x*frameWidth,
+                y: y*frameHeight,
+                width: frameWidth,
+                height: frameHeight
+            });
+
+            this.frames.push(texture);
+            if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture;
+        }
+    }
+
+	this.load();
+};

app/Lib/Vendor/src/pixi/loaders/JsonLoader.js

@@ -0,0 +1,252 @@
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * 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 JsonLoader
+ * @uses EventTarget
+ * @constructor
+ * @param url {String} The url of the JSON file
+ * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
+ */
+PIXI.JsonLoader = function (url, crossorigin) {
+    /**
+     * The url of the bitmap font data
+     *
+     * @property url
+     * @type String
+     */
+    this.url = url;
+
+    /**
+     * Whether the requests should be treated as cross origin
+     *
+     * @property crossorigin
+     * @type Boolean
+     */
+    this.crossorigin = crossorigin;
+
+    /**
+     * [read-only] The base url of the bitmap font data
+     *
+     * @property baseUrl
+     * @type String
+     * @readOnly
+     */
+    this.baseUrl = url.replace(/[^\/]*$/, '');
+
+    /**
+     * [read-only] Whether the data has loaded yet
+     *
+     * @property loaded
+     * @type Boolean
+     * @readOnly
+     */
+    this.loaded = false;
+
+};
+
+// constructor
+PIXI.JsonLoader.prototype.constructor = PIXI.JsonLoader;
+PIXI.EventTarget.mixin(PIXI.JsonLoader.prototype);
+
+/**
+ * Loads the JSON data
+ *
+ * @method load
+ */
+PIXI.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.
+ *
+ * @method onReadyStateChanged
+ * @private
+ */
+PIXI.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
+ *
+ * @method onJSONLoaded
+ * @private
+ */
+PIXI.JsonLoader.prototype.onJSONLoaded = function () {
+
+    if(!this.ajaxRequest.responseText )
+    {
+        this.onError();
+        return;
+    }
+
+    this.json = JSON.parse(this.ajaxRequest.responseText);
+
+    if(this.json.frames && this.json.meta && this.json.meta.image)
+    {
+        // sprite sheet
+        var textureUrl = this.baseUrl + this.json.meta.image;
+        var image = new PIXI.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 PIXI.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 PIXI.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h);
+                }
+                PIXI.TextureCache[i] = new PIXI.Texture(this.texture, textureSize, crop, trim);
+            }
+        }
+
+        image.load();
+
+    }
+    else if(this.json.bones)
+    {
+		/* check if the json was loaded before */
+		if (PIXI.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 PIXI.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 PIXI.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);
+				PIXI.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
+ *
+ * @method onLoaded
+ * @private
+ */
+PIXI.JsonLoader.prototype.onLoaded = function () {
+    this.loaded = true;
+    this.dispatchEvent({
+        type: 'loaded',
+        content: this
+    });
+};
+
+/**
+ * Invoke when error occured
+ *
+ * @method onError
+ * @private
+ */
+PIXI.JsonLoader.prototype.onError = function () {
+
+    this.dispatchEvent({
+        type: 'error',
+        content: this
+    });
+};

app/Lib/Vendor/src/pixi/loaders/SpineLoader.js

@@ -0,0 +1,81 @@
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi
+ *
+ * Awesome JS run time provided by EsotericSoftware
+ * https://github.com/EsotericSoftware/spine-runtimes
+ *
+ */
+
+/**
+ * The Spine loader is used to load in JSON spine data
+ * To generate the data you need to use http://esotericsoftware.com/ and export in the "JSON" format
+ * Due to a clash of names  You will need to change the extension of the spine file from *.json to *.anim for it to load
+ * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source
+ * You will need to generate a sprite sheet to accompany the spine data
+ * When loaded this class will dispatch a "loaded" event
+ *
+ * @class SpineLoader
+ * @uses EventTarget
+ * @constructor
+ * @param url {String} The url of the JSON file
+ * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
+ */
+PIXI.SpineLoader = function(url, crossorigin)
+{
+    /**
+     * The url of the bitmap font data
+     *
+     * @property url
+     * @type String
+     */
+    this.url = url;
+
+    /**
+     * Whether the requests should be treated as cross origin
+     *
+     * @property crossorigin
+     * @type Boolean
+     */
+    this.crossorigin = crossorigin;
+
+    /**
+     * [read-only] Whether the data has loaded yet
+     *
+     * @property loaded
+     * @type Boolean
+     * @readOnly
+     */
+    this.loaded = false;
+};
+
+PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader;
+
+PIXI.EventTarget.mixin(PIXI.SpineLoader.prototype);
+
+/**
+ * Loads the JSON data
+ *
+ * @method load
+ */
+PIXI.SpineLoader.prototype.load = function () {
+
+    var scope = this;
+    var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
+    jsonLoader.on('loaded', function (event) {
+        scope.json = event.data.content.json;
+        scope.onLoaded();
+    });
+    jsonLoader.load();
+};
+
+/**
+ * Invoked when JSON file is loaded.
+ *
+ * @method onLoaded
+ * @private
+ */
+PIXI.SpineLoader.prototype.onLoaded = function () {
+    this.loaded = true;
+    this.emit('loaded', { content: this });
+};

app/Lib/Vendor/src/pixi/loaders/SpriteSheetLoader.js

@@ -0,0 +1,94 @@
+/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The sprite sheet loader is used to load in JSON sprite sheet data
+ * To generate the data you can use http://www.codeandweb.com/texturepacker and publish in the 'JSON' format
+ * There is a free version so thats nice, although the paid version is great value for money.
+ * It is highly recommended to use Sprite sheets (also know as a 'texture atlas') as it means sprites can be batched and drawn together for highly increased rendering speed.
+ * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFrameId()
+ * This loader will load the image file that the Spritesheet points to as well as the data.
+ * When loaded this class will dispatch a 'loaded' event
+ *
+ * @class SpriteSheetLoader
+ * @uses EventTarget
+ * @constructor
+ * @param url {String} The url of the sprite sheet JSON file
+ * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
+ */
+PIXI.SpriteSheetLoader = function (url, crossorigin) {
+
+    /**
+     * The url of the atlas data
+     *
+     * @property url
+     * @type String
+     */
+    this.url = url;
+
+    /**
+     * Whether the requests should be treated as cross origin
+     *
+     * @property crossorigin
+     * @type Boolean
+     */
+    this.crossorigin = crossorigin;
+
+    /**
+     * [read-only] The base url of the bitmap font data
+     *
+     * @property baseUrl
+     * @type String
+     * @readOnly
+     */
+    this.baseUrl = url.replace(/[^\/]*$/, '');
+
+    /**
+     * The texture being loaded
+     *
+     * @property texture
+     * @type Texture
+     */
+    this.texture = null;
+
+    /**
+     * The frames of the sprite sheet
+     *
+     * @property frames
+     * @type Object
+     */
+    this.frames = {};
+};
+
+// constructor
+PIXI.SpriteSheetLoader.prototype.constructor = PIXI.SpriteSheetLoader;
+
+PIXI.EventTarget.mixin(PIXI.SpriteSheetLoader.prototype);
+
+/**
+ * This will begin loading the JSON file
+ *
+ * @method load
+ */
+PIXI.SpriteSheetLoader.prototype.load = function () {
+    var scope = this;
+    var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
+    jsonLoader.on('loaded', function (event) {
+        scope.json = event.data.content.json;
+        scope.onLoaded();
+    });
+    jsonLoader.load();
+};
+
+/**
+ * Invoke when all files are loaded (json and texture)
+ *
+ * @method onLoaded
+ * @private
+ */
+PIXI.SpriteSheetLoader.prototype.onLoaded = function () {
+    this.emit('loaded', {
+        content: this
+    });
+};