diff --git a/Gruntfile.js b/Gruntfile.js index 1e6f0ff..21ab6ff 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -39,6 +39,7 @@ '<%= dirs.src %>/textures/Texture.js', '<%= dirs.src %>/textures/RenderTexture.js', '<%= dirs.src %>/loaders/AssetLoader.js', + '<%= dirs.src %>/loaders/JsonLoader.js', '<%= dirs.src %>/loaders/SpriteSheetLoader.js', '<%= dirs.src %>/loaders/ImageLoader.js', '<%= dirs.src %>/loaders/BitmapFontLoader.js', diff --git a/Gruntfile.js b/Gruntfile.js index 1e6f0ff..21ab6ff 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -39,6 +39,7 @@ '<%= dirs.src %>/textures/Texture.js', '<%= dirs.src %>/textures/RenderTexture.js', '<%= dirs.src %>/loaders/AssetLoader.js', + '<%= dirs.src %>/loaders/JsonLoader.js', '<%= dirs.src %>/loaders/SpriteSheetLoader.js', '<%= dirs.src %>/loaders/ImageLoader.js', '<%= dirs.src %>/loaders/BitmapFontLoader.js', diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js new file mode 100644 index 0000000..4e3c6fe --- /dev/null +++ b/src/pixi/loaders/JsonLoader.js @@ -0,0 +1,80 @@ +/** + * @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 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 texture atlas") as it means sprite"s 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.fromFromeId() + * This loader will also 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 + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.JsonLoader = function (url, crossorigin) { + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.JsonLoader.constructor = PIXI.JsonLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.JsonLoader.prototype.load = function () { + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function () { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.JsonLoader.prototype.onJSONLoaded = function () { + if (this.ajaxRequest.readyState == 4) { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + this.json = JSON.parse(this.ajaxRequest.responseText); + this.onLoaded(); + } else { + this.onError(); + } + } +}; + +/** + * Invoke when json file loaded + * @private + */ +PIXI.JsonLoader.prototype.onLoaded = function () { + this.dispatchEvent({ + type: "loaded", + content: this + }); +}; + +/** + * Invoke when error occured + * @private + */ +PIXI.JsonLoader.prototype.onError = function () { + this.dispatchEvent({ + type: "error", + content: this + }); +}; \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 1e6f0ff..21ab6ff 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -39,6 +39,7 @@ '<%= dirs.src %>/textures/Texture.js', '<%= dirs.src %>/textures/RenderTexture.js', '<%= dirs.src %>/loaders/AssetLoader.js', + '<%= dirs.src %>/loaders/JsonLoader.js', '<%= dirs.src %>/loaders/SpriteSheetLoader.js', '<%= dirs.src %>/loaders/ImageLoader.js', '<%= dirs.src %>/loaders/BitmapFontLoader.js', diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js new file mode 100644 index 0000000..4e3c6fe --- /dev/null +++ b/src/pixi/loaders/JsonLoader.js @@ -0,0 +1,80 @@ +/** + * @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 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 texture atlas") as it means sprite"s 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.fromFromeId() + * This loader will also 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 + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.JsonLoader = function (url, crossorigin) { + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.JsonLoader.constructor = PIXI.JsonLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.JsonLoader.prototype.load = function () { + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function () { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.JsonLoader.prototype.onJSONLoaded = function () { + if (this.ajaxRequest.readyState == 4) { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + this.json = JSON.parse(this.ajaxRequest.responseText); + this.onLoaded(); + } else { + this.onError(); + } + } +}; + +/** + * Invoke when json file loaded + * @private + */ +PIXI.JsonLoader.prototype.onLoaded = function () { + this.dispatchEvent({ + type: "loaded", + content: this + }); +}; + +/** + * Invoke when error occured + * @private + */ +PIXI.JsonLoader.prototype.onError = function () { + this.dispatchEvent({ + type: "error", + content: this + }); +}; \ No newline at end of file diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index 3aaa178..fd4205b 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -17,8 +17,7 @@ * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url, crossorigin) -{ +PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker @@ -38,67 +37,58 @@ /** * This will begin loading the JSON file */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); +PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; - this.ajaxRequest.onreadystatechange = function() - { + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; scope.onJSONLoaded(); - }; - - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) + }); + jsonLoader.load(); }; /** * Invoke when JSON file is loaded * @private */ -PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() -{ - if (this.ajaxRequest.readyState == 4) - { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) - { - var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); - var textureUrl = this.baseUrl + jsonData.meta.image; +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () { + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; - var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); - this.texture = image.texture.baseTexture; - var scope = this; - image.addEventListener("loaded", function(event) { - scope.onLoaded(); - }); + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); - var frameData = jsonData.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) - { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) - // calculate the offset! - } - } - } + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } - image.load(); - } - } + image.load(); }; /** * Invoke when all files are loaded (json and texture) * @private */ -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - this.dispatchEvent({type: "loaded", content: this}); -}; +PIXI.SpriteSheetLoader.prototype.onLoaded = function () { + this.dispatchEvent({ + type: "loaded", + content: this + }); +}; \ No newline at end of file