diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 7484590..43ac126 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -3,17 +3,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * 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 * @extends EventTarget - * @param assetURLs {Array} 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 + * @param {Array} assetURLs 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". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -21,11 +21,9 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} +}; /** Fired when an item has loaded @@ -45,103 +43,67 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.getLoaderByFileType(fileType); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Factory method for getting loader class based on extension + * @private + * @param {String} fileType An extension of the file based on which the loader class will be returned + * @return {Class} The loader class + */ +PIXI.AssetLoader.prototype.getLoaderByFileType = function(fileType) +{ + switch (fileType) + { + case "jpeg": + case "jpg": + case "png": + case "gif": + return PIXI.ImageLoader; + + case "json": + return PIXI.SpriteSheetLoader; + + case "xml": + case "fnt": + return PIXI.XMLLoader; + } + throw new Error(fileType + " is an unsupported file type " + this); +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 7484590..43ac126 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -3,17 +3,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * 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 * @extends EventTarget - * @param assetURLs {Array} 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 + * @param {Array} assetURLs 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". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -21,11 +21,9 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} +}; /** Fired when an item has loaded @@ -45,103 +43,67 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.getLoaderByFileType(fileType); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Factory method for getting loader class based on extension + * @private + * @param {String} fileType An extension of the file based on which the loader class will be returned + * @return {Class} The loader class + */ +PIXI.AssetLoader.prototype.getLoaderByFileType = function(fileType) +{ + switch (fileType) + { + case "jpeg": + case "jpg": + case "png": + case "gif": + return PIXI.ImageLoader; + + case "json": + return PIXI.SpriteSheetLoader; + + case "xml": + case "fnt": + return PIXI.XMLLoader; + } + throw new Error(fileType + " is an unsupported file type " + this); +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js new file mode 100644 index 0000000..d157c16 --- /dev/null +++ b/src/pixi/loaders/ImageLoader.js @@ -0,0 +1,50 @@ +/** + * @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.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 7484590..43ac126 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -3,17 +3,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * 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 * @extends EventTarget - * @param assetURLs {Array} 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 + * @param {Array} assetURLs 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". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -21,11 +21,9 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} +}; /** Fired when an item has loaded @@ -45,103 +43,67 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.getLoaderByFileType(fileType); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Factory method for getting loader class based on extension + * @private + * @param {String} fileType An extension of the file based on which the loader class will be returned + * @return {Class} The loader class + */ +PIXI.AssetLoader.prototype.getLoaderByFileType = function(fileType) +{ + switch (fileType) + { + case "jpeg": + case "jpg": + case "png": + case "gif": + return PIXI.ImageLoader; + + case "json": + return PIXI.SpriteSheetLoader; + + case "xml": + case "fnt": + return PIXI.XMLLoader; + } + throw new Error(fileType + " is an unsupported file type " + this); +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js new file mode 100644 index 0000000..d157c16 --- /dev/null +++ b/src/pixi/loaders/ImageLoader.js @@ -0,0 +1,50 @@ +/** + * @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.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index 36152a6..2532413 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -6,30 +6,31 @@ * 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. + * 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 + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor * @param url {String} the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -41,32 +42,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -77,29 +84,21 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 7484590..43ac126 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -3,17 +3,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * 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 * @extends EventTarget - * @param assetURLs {Array} 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 + * @param {Array} assetURLs 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". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -21,11 +21,9 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} +}; /** Fired when an item has loaded @@ -45,103 +43,67 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.getLoaderByFileType(fileType); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Factory method for getting loader class based on extension + * @private + * @param {String} fileType An extension of the file based on which the loader class will be returned + * @return {Class} The loader class + */ +PIXI.AssetLoader.prototype.getLoaderByFileType = function(fileType) +{ + switch (fileType) + { + case "jpeg": + case "jpg": + case "png": + case "gif": + return PIXI.ImageLoader; + + case "json": + return PIXI.SpriteSheetLoader; + + case "xml": + case "fnt": + return PIXI.XMLLoader; + } + throw new Error(fileType + " is an unsupported file type " + this); +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js new file mode 100644 index 0000000..d157c16 --- /dev/null +++ b/src/pixi/loaders/ImageLoader.js @@ -0,0 +1,50 @@ +/** + * @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.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index 36152a6..2532413 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -6,30 +6,31 @@ * 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. + * 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 + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor * @param url {String} the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -41,32 +42,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -77,29 +84,21 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/src/pixi/loaders/XMLLoader.js b/src/pixi/loaders/XMLLoader.js new file mode 100644 index 0000000..4f504f1 --- /dev/null +++ b/src/pixi/loaders/XMLLoader.js @@ -0,0 +1,79 @@ +/** + * @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 XMLLoader + * @extends EventTarget + * @constructor + * @param url {String} the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.XMLLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.XMLLoader.constructor = PIXI.XMLLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.XMLLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.XMLLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.XMLLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +};