diff --git a/README.md b/README.md index afa4ff0..3dbcae4 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ - [ ] `extras/` - [x] `filters/` - [x] `geom/` (move to `math/`) -- [ ] `loaders/` +- [x] `loaders/` - [ ] `primitives/` - [ ] `renderers/` - [ ] `text/` diff --git a/README.md b/README.md index afa4ff0..3dbcae4 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ - [ ] `extras/` - [x] `filters/` - [x] `geom/` (move to `math/`) -- [ ] `loaders/` +- [x] `loaders/` - [ ] `primitives/` - [ ] `renderers/` - [ ] `text/` diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 25adce2..92a256b 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,62 +1,58 @@ /** - * @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() + * easily through Texture.fromImage() and 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 + * @class + * @namespace PIXI + * @mixes EventTarget + * @param assetURLs {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 + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.AssetLoader = function(assetURLs, crossorigin) -{ +function AssetLoader(assetURLs, crossorigin) { /** * The array of asset URLs that are going to be loaded * - * @property assetURLs - * @type Array(String) + * @member {string[]} */ this.assetURLs = assetURLs; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** * Maps file extension to loader types * - * @property loadersByType - * @type Object + * @member {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 + 'jpg': ImageLoader, + 'jpeg': ImageLoader, + 'png': ImageLoader, + 'gif': ImageLoader, + 'webp': ImageLoader, + 'json': JsonLoader, + 'atlas': AtlasLoader, + 'anim': SpineLoader, + 'xml': BitmapFontLoader, + 'fnt': BitmapFontLoader }; }; -PIXI.EventTarget.mixin(PIXI.AssetLoader.prototype); +// constructor +AssetLoader.prototype.constructor = AssetLoader; +module.exports = AssetLoader; + +EventTarget.mixin(AssetLoader.prototype); /** * Fired when an item has loaded @@ -68,34 +64,32 @@ * @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 + * @param str {string} the name of the asset */ -PIXI.AssetLoader.prototype._getDataType = function(str) -{ +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 + + // check for malformed data URI scheme + if (sepIdx === -1) { 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') + if (!info || info.toLowerCase() === 'text/plain') { return 'txt'; + } //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); @@ -107,10 +101,8 @@ /** * Starts loading the assets sequentially * - * @method load */ -PIXI.AssetLoader.prototype.load = function() -{ +AssetLoader.prototype.load = function () { var scope = this; function onLoad(evt) { @@ -119,8 +111,7 @@ this.loadCount = this.assetURLs.length; - for (var i=0; i < this.assetURLs.length; i++) - { + 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); @@ -130,7 +121,7 @@ fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; - if(!Constructor) + if (!Constructor) throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); @@ -143,18 +134,21 @@ /** * Invoked after each file is loaded * - * @method onAssetLoaded * @private */ -PIXI.AssetLoader.prototype.onAssetLoaded = function(loader) -{ +AssetLoader.prototype.onAssetLoaded = function (loader) { this.loadCount--; this.emit('onProgress', { content: this, loader: loader }); - if (this.onProgress) this.onProgress(loader); - if (!this.loadCount) - { + if (this.onProgress) { + this.onProgress(loader); + } + + if (!this.loadCount) { this.emit('onComplete', { content: this }); - if(this.onComplete) this.onComplete(); + + if (this.onComplete) { + this.onComplete(); + } } }; diff --git a/README.md b/README.md index afa4ff0..3dbcae4 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ - [ ] `extras/` - [x] `filters/` - [x] `geom/` (move to `math/`) -- [ ] `loaders/` +- [x] `loaders/` - [ ] `primitives/` - [ ] `renderers/` - [ ] `text/` diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 25adce2..92a256b 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,62 +1,58 @@ /** - * @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() + * easily through Texture.fromImage() and 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 + * @class + * @namespace PIXI + * @mixes EventTarget + * @param assetURLs {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 + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.AssetLoader = function(assetURLs, crossorigin) -{ +function AssetLoader(assetURLs, crossorigin) { /** * The array of asset URLs that are going to be loaded * - * @property assetURLs - * @type Array(String) + * @member {string[]} */ this.assetURLs = assetURLs; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** * Maps file extension to loader types * - * @property loadersByType - * @type Object + * @member {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 + 'jpg': ImageLoader, + 'jpeg': ImageLoader, + 'png': ImageLoader, + 'gif': ImageLoader, + 'webp': ImageLoader, + 'json': JsonLoader, + 'atlas': AtlasLoader, + 'anim': SpineLoader, + 'xml': BitmapFontLoader, + 'fnt': BitmapFontLoader }; }; -PIXI.EventTarget.mixin(PIXI.AssetLoader.prototype); +// constructor +AssetLoader.prototype.constructor = AssetLoader; +module.exports = AssetLoader; + +EventTarget.mixin(AssetLoader.prototype); /** * Fired when an item has loaded @@ -68,34 +64,32 @@ * @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 + * @param str {string} the name of the asset */ -PIXI.AssetLoader.prototype._getDataType = function(str) -{ +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 + + // check for malformed data URI scheme + if (sepIdx === -1) { 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') + if (!info || info.toLowerCase() === 'text/plain') { return 'txt'; + } //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); @@ -107,10 +101,8 @@ /** * Starts loading the assets sequentially * - * @method load */ -PIXI.AssetLoader.prototype.load = function() -{ +AssetLoader.prototype.load = function () { var scope = this; function onLoad(evt) { @@ -119,8 +111,7 @@ this.loadCount = this.assetURLs.length; - for (var i=0; i < this.assetURLs.length; i++) - { + 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); @@ -130,7 +121,7 @@ fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; - if(!Constructor) + if (!Constructor) throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); @@ -143,18 +134,21 @@ /** * Invoked after each file is loaded * - * @method onAssetLoaded * @private */ -PIXI.AssetLoader.prototype.onAssetLoaded = function(loader) -{ +AssetLoader.prototype.onAssetLoaded = function (loader) { this.loadCount--; this.emit('onProgress', { content: this, loader: loader }); - if (this.onProgress) this.onProgress(loader); - if (!this.loadCount) - { + if (this.onProgress) { + this.onProgress(loader); + } + + if (!this.loadCount) { this.emit('onComplete', { content: this }); - if(this.onComplete) this.onComplete(); + + if (this.onComplete) { + this.onComplete(); + } } }; diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 5368b6b..58f92a6 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,22 +1,18 @@ /** - * @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 + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though Texture.fromFrameId() and Sprite.fromFrameId() + * + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.AtlasLoader = function (url, crossorigin) { +function AtlasLoader(url, crossorigin) { this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; @@ -25,31 +21,34 @@ }; // constructor -PIXI.AtlasLoader.constructor = PIXI.AtlasLoader; +AtlasLoader.prototype.constructor = AtlasLoader; +module.exports = AtlasLoader; -PIXI.EventTarget.mixin(PIXI.AtlasLoader.prototype); +EventTarget.mixin(AtlasLoader.prototype); /** * Starts loading the JSON file * - * @method load */ -PIXI.AtlasLoader.prototype.load = function () { - this.ajaxRequest = new PIXI.AjaxRequest(); +AtlasLoader.prototype.load = function () { + this.ajaxRequest = new AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); + + 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 () { +AtlasLoader.prototype.onAtlasLoaded = function () { if (this.ajaxRequest.readyState === 4) { if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.atlas = { @@ -72,9 +71,11 @@ // 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]); @@ -126,22 +127,22 @@ // 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)); + this.images.push(new 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, { + TextureCache[i] = new 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; + 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; + TextureCache[i].trim.x = 0; + TextureCache[i].trim.y = 0; } } } @@ -165,11 +166,10 @@ /** * Invoked when json file has loaded. - * - * @method onLoaded + * * @private */ -PIXI.AtlasLoader.prototype.onLoaded = function () { +AtlasLoader.prototype.onLoaded = function () { if (this.images.length - 1 > this.currentImageId) { this.currentImageId++; this.images[this.currentImageId].load(); @@ -181,10 +181,9 @@ /** * Invoked when an error occurs. - * - * @method onError + * * @private */ -PIXI.AtlasLoader.prototype.onError = function () { +AtlasLoader.prototype.onError = function () { this.emit('error', { content: this }); }; diff --git a/README.md b/README.md index afa4ff0..3dbcae4 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ - [ ] `extras/` - [x] `filters/` - [x] `geom/` (move to `math/`) -- [ ] `loaders/` +- [x] `loaders/` - [ ] `primitives/` - [ ] `renderers/` - [ ] `text/` diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 25adce2..92a256b 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,62 +1,58 @@ /** - * @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() + * easily through Texture.fromImage() and 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 + * @class + * @namespace PIXI + * @mixes EventTarget + * @param assetURLs {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 + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.AssetLoader = function(assetURLs, crossorigin) -{ +function AssetLoader(assetURLs, crossorigin) { /** * The array of asset URLs that are going to be loaded * - * @property assetURLs - * @type Array(String) + * @member {string[]} */ this.assetURLs = assetURLs; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** * Maps file extension to loader types * - * @property loadersByType - * @type Object + * @member {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 + 'jpg': ImageLoader, + 'jpeg': ImageLoader, + 'png': ImageLoader, + 'gif': ImageLoader, + 'webp': ImageLoader, + 'json': JsonLoader, + 'atlas': AtlasLoader, + 'anim': SpineLoader, + 'xml': BitmapFontLoader, + 'fnt': BitmapFontLoader }; }; -PIXI.EventTarget.mixin(PIXI.AssetLoader.prototype); +// constructor +AssetLoader.prototype.constructor = AssetLoader; +module.exports = AssetLoader; + +EventTarget.mixin(AssetLoader.prototype); /** * Fired when an item has loaded @@ -68,34 +64,32 @@ * @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 + * @param str {string} the name of the asset */ -PIXI.AssetLoader.prototype._getDataType = function(str) -{ +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 + + // check for malformed data URI scheme + if (sepIdx === -1) { 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') + if (!info || info.toLowerCase() === 'text/plain') { return 'txt'; + } //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); @@ -107,10 +101,8 @@ /** * Starts loading the assets sequentially * - * @method load */ -PIXI.AssetLoader.prototype.load = function() -{ +AssetLoader.prototype.load = function () { var scope = this; function onLoad(evt) { @@ -119,8 +111,7 @@ this.loadCount = this.assetURLs.length; - for (var i=0; i < this.assetURLs.length; i++) - { + 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); @@ -130,7 +121,7 @@ fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; - if(!Constructor) + if (!Constructor) throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); @@ -143,18 +134,21 @@ /** * Invoked after each file is loaded * - * @method onAssetLoaded * @private */ -PIXI.AssetLoader.prototype.onAssetLoaded = function(loader) -{ +AssetLoader.prototype.onAssetLoaded = function (loader) { this.loadCount--; this.emit('onProgress', { content: this, loader: loader }); - if (this.onProgress) this.onProgress(loader); - if (!this.loadCount) - { + if (this.onProgress) { + this.onProgress(loader); + } + + if (!this.loadCount) { this.emit('onComplete', { content: this }); - if(this.onComplete) this.onComplete(); + + if (this.onComplete) { + this.onComplete(); + } } }; diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 5368b6b..58f92a6 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,22 +1,18 @@ /** - * @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 + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though Texture.fromFrameId() and Sprite.fromFrameId() + * + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.AtlasLoader = function (url, crossorigin) { +function AtlasLoader(url, crossorigin) { this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; @@ -25,31 +21,34 @@ }; // constructor -PIXI.AtlasLoader.constructor = PIXI.AtlasLoader; +AtlasLoader.prototype.constructor = AtlasLoader; +module.exports = AtlasLoader; -PIXI.EventTarget.mixin(PIXI.AtlasLoader.prototype); +EventTarget.mixin(AtlasLoader.prototype); /** * Starts loading the JSON file * - * @method load */ -PIXI.AtlasLoader.prototype.load = function () { - this.ajaxRequest = new PIXI.AjaxRequest(); +AtlasLoader.prototype.load = function () { + this.ajaxRequest = new AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); + + 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 () { +AtlasLoader.prototype.onAtlasLoaded = function () { if (this.ajaxRequest.readyState === 4) { if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.atlas = { @@ -72,9 +71,11 @@ // 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]); @@ -126,22 +127,22 @@ // 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)); + this.images.push(new 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, { + TextureCache[i] = new 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; + 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; + TextureCache[i].trim.x = 0; + TextureCache[i].trim.y = 0; } } } @@ -165,11 +166,10 @@ /** * Invoked when json file has loaded. - * - * @method onLoaded + * * @private */ -PIXI.AtlasLoader.prototype.onLoaded = function () { +AtlasLoader.prototype.onLoaded = function () { if (this.images.length - 1 > this.currentImageId) { this.currentImageId++; this.images[this.currentImageId].load(); @@ -181,10 +181,9 @@ /** * Invoked when an error occurs. - * - * @method onError + * * @private */ -PIXI.AtlasLoader.prototype.onError = function () { +AtlasLoader.prototype.onError = function () { this.emit('error', { content: this }); }; diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index 3eb54c4..abaf1b9 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,89 +1,80 @@ /** - * @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 + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the sprite sheet JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.BitmapFontLoader = function(url, crossorigin) -{ +function BitmapFontLoader(url, crossorigin) { /** * The url of the bitmap font data * - * @property url - * @type String + * @member {String} */ this.url = url; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** - * [read-only] The base url of the bitmap font data + * The base url of the bitmap font data * - * @property baseUrl - * @type String + * @member {String} * @readOnly */ this.baseUrl = url.replace(/[^\/]*$/, ''); /** - * [read-only] The texture of the bitmap font + * The texture of the bitmap font * - * @property texture - * @type Texture + * @member {Texture} */ this.texture = null; }; // constructor -PIXI.BitmapFontLoader.prototype.constructor = PIXI.BitmapFontLoader; -PIXI.EventTarget.mixin(PIXI.BitmapFontLoader.prototype); +BitmapFontLoader.prototype.constructor = BitmapFontLoader; +module.exports = BitmapFontLoader; + +EventTarget.mixin(BitmapFontLoader.prototype); /** * Loads the XML font data * - * @method load */ -PIXI.BitmapFontLoader.prototype.load = function() -{ - this.ajaxRequest = new PIXI.AjaxRequest(); +BitmapFontLoader.prototype.load = function () { + this.ajaxRequest = new AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + + 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) - { +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') { + 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 { @@ -94,7 +85,7 @@ } var textureUrl = this.baseUrl + responseXML.getElementsByTagName('page')[0].getAttribute('file'); - var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var image = new ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; @@ -108,11 +99,10 @@ //parse letters var letters = responseXML.getElementsByTagName('char'); - for (var i = 0; i < letters.length; i++) - { + for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new PIXI.Rectangle( + var textureRect = new Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -124,15 +114,14 @@ 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) + texture: TextureCache[charCode] = new Texture(this.texture, textureRect) }; } //parse kernings var kernings = responseXML.getElementsByTagName('kerning'); - for (i = 0; i < kernings.length; i++) - { + 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); @@ -141,7 +130,7 @@ } - PIXI.BitmapText.fonts[data.font] = data; + BitmapText.fonts[data.font] = data; image.addEventListener('loaded', this.onLoaded.bind(this)); image.load(); @@ -152,10 +141,8 @@ /** * Invoked when all files are loaded (xml/fnt and texture) * - * @method onLoaded * @private */ -PIXI.BitmapFontLoader.prototype.onLoaded = function() -{ +BitmapFontLoader.prototype.onLoaded = function () { this.emit('loaded', { content: this }); }; diff --git a/README.md b/README.md index afa4ff0..3dbcae4 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ - [ ] `extras/` - [x] `filters/` - [x] `geom/` (move to `math/`) -- [ ] `loaders/` +- [x] `loaders/` - [ ] `primitives/` - [ ] `renderers/` - [ ] `text/` diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 25adce2..92a256b 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,62 +1,58 @@ /** - * @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() + * easily through Texture.fromImage() and 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 + * @class + * @namespace PIXI + * @mixes EventTarget + * @param assetURLs {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 + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.AssetLoader = function(assetURLs, crossorigin) -{ +function AssetLoader(assetURLs, crossorigin) { /** * The array of asset URLs that are going to be loaded * - * @property assetURLs - * @type Array(String) + * @member {string[]} */ this.assetURLs = assetURLs; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** * Maps file extension to loader types * - * @property loadersByType - * @type Object + * @member {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 + 'jpg': ImageLoader, + 'jpeg': ImageLoader, + 'png': ImageLoader, + 'gif': ImageLoader, + 'webp': ImageLoader, + 'json': JsonLoader, + 'atlas': AtlasLoader, + 'anim': SpineLoader, + 'xml': BitmapFontLoader, + 'fnt': BitmapFontLoader }; }; -PIXI.EventTarget.mixin(PIXI.AssetLoader.prototype); +// constructor +AssetLoader.prototype.constructor = AssetLoader; +module.exports = AssetLoader; + +EventTarget.mixin(AssetLoader.prototype); /** * Fired when an item has loaded @@ -68,34 +64,32 @@ * @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 + * @param str {string} the name of the asset */ -PIXI.AssetLoader.prototype._getDataType = function(str) -{ +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 + + // check for malformed data URI scheme + if (sepIdx === -1) { 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') + if (!info || info.toLowerCase() === 'text/plain') { return 'txt'; + } //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); @@ -107,10 +101,8 @@ /** * Starts loading the assets sequentially * - * @method load */ -PIXI.AssetLoader.prototype.load = function() -{ +AssetLoader.prototype.load = function () { var scope = this; function onLoad(evt) { @@ -119,8 +111,7 @@ this.loadCount = this.assetURLs.length; - for (var i=0; i < this.assetURLs.length; i++) - { + 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); @@ -130,7 +121,7 @@ fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; - if(!Constructor) + if (!Constructor) throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); @@ -143,18 +134,21 @@ /** * Invoked after each file is loaded * - * @method onAssetLoaded * @private */ -PIXI.AssetLoader.prototype.onAssetLoaded = function(loader) -{ +AssetLoader.prototype.onAssetLoaded = function (loader) { this.loadCount--; this.emit('onProgress', { content: this, loader: loader }); - if (this.onProgress) this.onProgress(loader); - if (!this.loadCount) - { + if (this.onProgress) { + this.onProgress(loader); + } + + if (!this.loadCount) { this.emit('onComplete', { content: this }); - if(this.onComplete) this.onComplete(); + + if (this.onComplete) { + this.onComplete(); + } } }; diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 5368b6b..58f92a6 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,22 +1,18 @@ /** - * @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 + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though Texture.fromFrameId() and Sprite.fromFrameId() + * + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.AtlasLoader = function (url, crossorigin) { +function AtlasLoader(url, crossorigin) { this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; @@ -25,31 +21,34 @@ }; // constructor -PIXI.AtlasLoader.constructor = PIXI.AtlasLoader; +AtlasLoader.prototype.constructor = AtlasLoader; +module.exports = AtlasLoader; -PIXI.EventTarget.mixin(PIXI.AtlasLoader.prototype); +EventTarget.mixin(AtlasLoader.prototype); /** * Starts loading the JSON file * - * @method load */ -PIXI.AtlasLoader.prototype.load = function () { - this.ajaxRequest = new PIXI.AjaxRequest(); +AtlasLoader.prototype.load = function () { + this.ajaxRequest = new AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); + + 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 () { +AtlasLoader.prototype.onAtlasLoaded = function () { if (this.ajaxRequest.readyState === 4) { if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.atlas = { @@ -72,9 +71,11 @@ // 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]); @@ -126,22 +127,22 @@ // 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)); + this.images.push(new 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, { + TextureCache[i] = new 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; + 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; + TextureCache[i].trim.x = 0; + TextureCache[i].trim.y = 0; } } } @@ -165,11 +166,10 @@ /** * Invoked when json file has loaded. - * - * @method onLoaded + * * @private */ -PIXI.AtlasLoader.prototype.onLoaded = function () { +AtlasLoader.prototype.onLoaded = function () { if (this.images.length - 1 > this.currentImageId) { this.currentImageId++; this.images[this.currentImageId].load(); @@ -181,10 +181,9 @@ /** * Invoked when an error occurs. - * - * @method onError + * * @private */ -PIXI.AtlasLoader.prototype.onError = function () { +AtlasLoader.prototype.onError = function () { this.emit('error', { content: this }); }; diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index 3eb54c4..abaf1b9 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,89 +1,80 @@ /** - * @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 + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the sprite sheet JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.BitmapFontLoader = function(url, crossorigin) -{ +function BitmapFontLoader(url, crossorigin) { /** * The url of the bitmap font data * - * @property url - * @type String + * @member {String} */ this.url = url; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** - * [read-only] The base url of the bitmap font data + * The base url of the bitmap font data * - * @property baseUrl - * @type String + * @member {String} * @readOnly */ this.baseUrl = url.replace(/[^\/]*$/, ''); /** - * [read-only] The texture of the bitmap font + * The texture of the bitmap font * - * @property texture - * @type Texture + * @member {Texture} */ this.texture = null; }; // constructor -PIXI.BitmapFontLoader.prototype.constructor = PIXI.BitmapFontLoader; -PIXI.EventTarget.mixin(PIXI.BitmapFontLoader.prototype); +BitmapFontLoader.prototype.constructor = BitmapFontLoader; +module.exports = BitmapFontLoader; + +EventTarget.mixin(BitmapFontLoader.prototype); /** * Loads the XML font data * - * @method load */ -PIXI.BitmapFontLoader.prototype.load = function() -{ - this.ajaxRequest = new PIXI.AjaxRequest(); +BitmapFontLoader.prototype.load = function () { + this.ajaxRequest = new AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + + 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) - { +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') { + 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 { @@ -94,7 +85,7 @@ } var textureUrl = this.baseUrl + responseXML.getElementsByTagName('page')[0].getAttribute('file'); - var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var image = new ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; @@ -108,11 +99,10 @@ //parse letters var letters = responseXML.getElementsByTagName('char'); - for (var i = 0; i < letters.length; i++) - { + for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new PIXI.Rectangle( + var textureRect = new Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -124,15 +114,14 @@ 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) + texture: TextureCache[charCode] = new Texture(this.texture, textureRect) }; } //parse kernings var kernings = responseXML.getElementsByTagName('kerning'); - for (i = 0; i < kernings.length; i++) - { + 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); @@ -141,7 +130,7 @@ } - PIXI.BitmapText.fonts[data.font] = data; + BitmapText.fonts[data.font] = data; image.addEventListener('loaded', this.onLoaded.bind(this)); image.load(); @@ -152,10 +141,8 @@ /** * Invoked when all files are loaded (xml/fnt and texture) * - * @method onLoaded * @private */ -PIXI.BitmapFontLoader.prototype.onLoaded = function() -{ +BitmapFontLoader.prototype.onLoaded = function () { this.emit('loaded', { content: this }); }; diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 1567f29..9b922e8 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,57 +1,47 @@ /** - * @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() + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though Texture.fromFrame() and Sprite.fromFrame() * When loaded this class will dispatch a 'loaded' event * - * @class ImageLoader - * @uses EventTarget - * @constructor + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the image - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.ImageLoader = function(url, crossorigin) -{ +function ImageLoader(url, crossorigin) { /** * The texture being loaded * - * @property texture - * @type Texture + * @member {Texture} */ - this.texture = PIXI.Texture.fromImage(url, crossorigin); + this.texture = Texture.fromImage(url, crossorigin); /** * if the image is loaded with loadFramedSpriteSheet * frames will contain the sprite sheet frames * - * @property frames - * @type Array + * @member {Array} * @readOnly */ this.frames = []; }; // constructor -PIXI.ImageLoader.prototype.constructor = PIXI.ImageLoader; +ImageLoader.prototype.constructor = ImageLoader; +module.exports = ImageLoader; -PIXI.EventTarget.mixin(PIXI.ImageLoader.prototype); +EventTarget.mixin(ImageLoader.prototype); /** * Loads image or takes it from cache * - * @method load */ -PIXI.ImageLoader.prototype.load = function() -{ - if(!this.texture.baseTexture.hasLoaded) - { +ImageLoader.prototype.load = function () { + if (!this.texture.baseTexture.hasLoaded) { this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); } - else - { + else { this.onLoaded(); } }; @@ -59,42 +49,43 @@ /** * Invoked when image file is loaded or it is already cached and ready to use * - * @method onLoaded * @private */ -PIXI.ImageLoader.prototype.onLoaded = function() -{ +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 frameWidth {number} width of each frame + * @param frameHeight {number} height of each frame * @param textureName {String} if given, the frames will be cached in - format */ -PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) -{ +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 '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') + if (!info || info.toLowerCase() === 'text/plain') { return 'txt'; + } //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); @@ -107,10 +101,8 @@ /** * Starts loading the assets sequentially * - * @method load */ -PIXI.AssetLoader.prototype.load = function() -{ +AssetLoader.prototype.load = function () { var scope = this; function onLoad(evt) { @@ -119,8 +111,7 @@ this.loadCount = this.assetURLs.length; - for (var i=0; i < this.assetURLs.length; i++) - { + 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); @@ -130,7 +121,7 @@ fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; - if(!Constructor) + if (!Constructor) throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); @@ -143,18 +134,21 @@ /** * Invoked after each file is loaded * - * @method onAssetLoaded * @private */ -PIXI.AssetLoader.prototype.onAssetLoaded = function(loader) -{ +AssetLoader.prototype.onAssetLoaded = function (loader) { this.loadCount--; this.emit('onProgress', { content: this, loader: loader }); - if (this.onProgress) this.onProgress(loader); - if (!this.loadCount) - { + if (this.onProgress) { + this.onProgress(loader); + } + + if (!this.loadCount) { this.emit('onComplete', { content: this }); - if(this.onComplete) this.onComplete(); + + if (this.onComplete) { + this.onComplete(); + } } }; diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 5368b6b..58f92a6 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,22 +1,18 @@ /** - * @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 + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though Texture.fromFrameId() and Sprite.fromFrameId() + * + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.AtlasLoader = function (url, crossorigin) { +function AtlasLoader(url, crossorigin) { this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; @@ -25,31 +21,34 @@ }; // constructor -PIXI.AtlasLoader.constructor = PIXI.AtlasLoader; +AtlasLoader.prototype.constructor = AtlasLoader; +module.exports = AtlasLoader; -PIXI.EventTarget.mixin(PIXI.AtlasLoader.prototype); +EventTarget.mixin(AtlasLoader.prototype); /** * Starts loading the JSON file * - * @method load */ -PIXI.AtlasLoader.prototype.load = function () { - this.ajaxRequest = new PIXI.AjaxRequest(); +AtlasLoader.prototype.load = function () { + this.ajaxRequest = new AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); + + 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 () { +AtlasLoader.prototype.onAtlasLoaded = function () { if (this.ajaxRequest.readyState === 4) { if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.atlas = { @@ -72,9 +71,11 @@ // 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]); @@ -126,22 +127,22 @@ // 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)); + this.images.push(new 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, { + TextureCache[i] = new 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; + 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; + TextureCache[i].trim.x = 0; + TextureCache[i].trim.y = 0; } } } @@ -165,11 +166,10 @@ /** * Invoked when json file has loaded. - * - * @method onLoaded + * * @private */ -PIXI.AtlasLoader.prototype.onLoaded = function () { +AtlasLoader.prototype.onLoaded = function () { if (this.images.length - 1 > this.currentImageId) { this.currentImageId++; this.images[this.currentImageId].load(); @@ -181,10 +181,9 @@ /** * Invoked when an error occurs. - * - * @method onError + * * @private */ -PIXI.AtlasLoader.prototype.onError = function () { +AtlasLoader.prototype.onError = function () { this.emit('error', { content: this }); }; diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index 3eb54c4..abaf1b9 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,89 +1,80 @@ /** - * @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 + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the sprite sheet JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.BitmapFontLoader = function(url, crossorigin) -{ +function BitmapFontLoader(url, crossorigin) { /** * The url of the bitmap font data * - * @property url - * @type String + * @member {String} */ this.url = url; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** - * [read-only] The base url of the bitmap font data + * The base url of the bitmap font data * - * @property baseUrl - * @type String + * @member {String} * @readOnly */ this.baseUrl = url.replace(/[^\/]*$/, ''); /** - * [read-only] The texture of the bitmap font + * The texture of the bitmap font * - * @property texture - * @type Texture + * @member {Texture} */ this.texture = null; }; // constructor -PIXI.BitmapFontLoader.prototype.constructor = PIXI.BitmapFontLoader; -PIXI.EventTarget.mixin(PIXI.BitmapFontLoader.prototype); +BitmapFontLoader.prototype.constructor = BitmapFontLoader; +module.exports = BitmapFontLoader; + +EventTarget.mixin(BitmapFontLoader.prototype); /** * Loads the XML font data * - * @method load */ -PIXI.BitmapFontLoader.prototype.load = function() -{ - this.ajaxRequest = new PIXI.AjaxRequest(); +BitmapFontLoader.prototype.load = function () { + this.ajaxRequest = new AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + + 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) - { +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') { + 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 { @@ -94,7 +85,7 @@ } var textureUrl = this.baseUrl + responseXML.getElementsByTagName('page')[0].getAttribute('file'); - var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var image = new ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; @@ -108,11 +99,10 @@ //parse letters var letters = responseXML.getElementsByTagName('char'); - for (var i = 0; i < letters.length; i++) - { + for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new PIXI.Rectangle( + var textureRect = new Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -124,15 +114,14 @@ 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) + texture: TextureCache[charCode] = new Texture(this.texture, textureRect) }; } //parse kernings var kernings = responseXML.getElementsByTagName('kerning'); - for (i = 0; i < kernings.length; i++) - { + 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); @@ -141,7 +130,7 @@ } - PIXI.BitmapText.fonts[data.font] = data; + BitmapText.fonts[data.font] = data; image.addEventListener('loaded', this.onLoaded.bind(this)); image.load(); @@ -152,10 +141,8 @@ /** * Invoked when all files are loaded (xml/fnt and texture) * - * @method onLoaded * @private */ -PIXI.BitmapFontLoader.prototype.onLoaded = function() -{ +BitmapFontLoader.prototype.onLoaded = function () { this.emit('loaded', { content: this }); }; diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 1567f29..9b922e8 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,57 +1,47 @@ /** - * @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() + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though Texture.fromFrame() and Sprite.fromFrame() * When loaded this class will dispatch a 'loaded' event * - * @class ImageLoader - * @uses EventTarget - * @constructor + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the image - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.ImageLoader = function(url, crossorigin) -{ +function ImageLoader(url, crossorigin) { /** * The texture being loaded * - * @property texture - * @type Texture + * @member {Texture} */ - this.texture = PIXI.Texture.fromImage(url, crossorigin); + this.texture = Texture.fromImage(url, crossorigin); /** * if the image is loaded with loadFramedSpriteSheet * frames will contain the sprite sheet frames * - * @property frames - * @type Array + * @member {Array} * @readOnly */ this.frames = []; }; // constructor -PIXI.ImageLoader.prototype.constructor = PIXI.ImageLoader; +ImageLoader.prototype.constructor = ImageLoader; +module.exports = ImageLoader; -PIXI.EventTarget.mixin(PIXI.ImageLoader.prototype); +EventTarget.mixin(ImageLoader.prototype); /** * Loads image or takes it from cache * - * @method load */ -PIXI.ImageLoader.prototype.load = function() -{ - if(!this.texture.baseTexture.hasLoaded) - { +ImageLoader.prototype.load = function () { + if (!this.texture.baseTexture.hasLoaded) { this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); } - else - { + else { this.onLoaded(); } }; @@ -59,42 +49,43 @@ /** * Invoked when image file is loaded or it is already cached and ready to use * - * @method onLoaded * @private */ -PIXI.ImageLoader.prototype.onLoaded = function() -{ +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 frameWidth {number} width of each frame + * @param frameHeight {number} height of each frame * @param textureName {String} if given, the frames will be cached in - format */ -PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) -{ +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 0) - { - textureLoader.addEventListener('loadedBaseTexture', function(evt){ - if (evt.content.content.loadingCount <= 0) - { + if (textureLoader.loadingCount > 0) { + textureLoader.addEventListener('loadedBaseTexture', function (evt){ + if (evt.content.content.loadingCount <= 0) { originalLoader.onLoaded(); } }); } - else - { + else { originalLoader.onLoaded(); } }; @@ -217,8 +189,7 @@ atlasLoader.load(); } } - else - { + else { this.onLoaded(); } }; @@ -226,10 +197,9 @@ /** * Invoke when json file loaded * - * @method onLoaded * @private */ -PIXI.JsonLoader.prototype.onLoaded = function () { +JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ type: 'loaded', @@ -240,10 +210,9 @@ /** * Invoke when error occured * - * @method onError * @private */ -PIXI.JsonLoader.prototype.onError = function () { +JsonLoader.prototype.onError = function () { this.dispatchEvent({ type: 'error', diff --git a/README.md b/README.md index afa4ff0..3dbcae4 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ - [ ] `extras/` - [x] `filters/` - [x] `geom/` (move to `math/`) -- [ ] `loaders/` +- [x] `loaders/` - [ ] `primitives/` - [ ] `renderers/` - [ ] `text/` diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 25adce2..92a256b 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,62 +1,58 @@ /** - * @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() + * easily through Texture.fromImage() and 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 + * @class + * @namespace PIXI + * @mixes EventTarget + * @param assetURLs {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 + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.AssetLoader = function(assetURLs, crossorigin) -{ +function AssetLoader(assetURLs, crossorigin) { /** * The array of asset URLs that are going to be loaded * - * @property assetURLs - * @type Array(String) + * @member {string[]} */ this.assetURLs = assetURLs; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** * Maps file extension to loader types * - * @property loadersByType - * @type Object + * @member {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 + 'jpg': ImageLoader, + 'jpeg': ImageLoader, + 'png': ImageLoader, + 'gif': ImageLoader, + 'webp': ImageLoader, + 'json': JsonLoader, + 'atlas': AtlasLoader, + 'anim': SpineLoader, + 'xml': BitmapFontLoader, + 'fnt': BitmapFontLoader }; }; -PIXI.EventTarget.mixin(PIXI.AssetLoader.prototype); +// constructor +AssetLoader.prototype.constructor = AssetLoader; +module.exports = AssetLoader; + +EventTarget.mixin(AssetLoader.prototype); /** * Fired when an item has loaded @@ -68,34 +64,32 @@ * @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 + * @param str {string} the name of the asset */ -PIXI.AssetLoader.prototype._getDataType = function(str) -{ +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 + + // check for malformed data URI scheme + if (sepIdx === -1) { 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') + if (!info || info.toLowerCase() === 'text/plain') { return 'txt'; + } //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); @@ -107,10 +101,8 @@ /** * Starts loading the assets sequentially * - * @method load */ -PIXI.AssetLoader.prototype.load = function() -{ +AssetLoader.prototype.load = function () { var scope = this; function onLoad(evt) { @@ -119,8 +111,7 @@ this.loadCount = this.assetURLs.length; - for (var i=0; i < this.assetURLs.length; i++) - { + 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); @@ -130,7 +121,7 @@ fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; - if(!Constructor) + if (!Constructor) throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); @@ -143,18 +134,21 @@ /** * Invoked after each file is loaded * - * @method onAssetLoaded * @private */ -PIXI.AssetLoader.prototype.onAssetLoaded = function(loader) -{ +AssetLoader.prototype.onAssetLoaded = function (loader) { this.loadCount--; this.emit('onProgress', { content: this, loader: loader }); - if (this.onProgress) this.onProgress(loader); - if (!this.loadCount) - { + if (this.onProgress) { + this.onProgress(loader); + } + + if (!this.loadCount) { this.emit('onComplete', { content: this }); - if(this.onComplete) this.onComplete(); + + if (this.onComplete) { + this.onComplete(); + } } }; diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 5368b6b..58f92a6 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,22 +1,18 @@ /** - * @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 + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though Texture.fromFrameId() and Sprite.fromFrameId() + * + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.AtlasLoader = function (url, crossorigin) { +function AtlasLoader(url, crossorigin) { this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; @@ -25,31 +21,34 @@ }; // constructor -PIXI.AtlasLoader.constructor = PIXI.AtlasLoader; +AtlasLoader.prototype.constructor = AtlasLoader; +module.exports = AtlasLoader; -PIXI.EventTarget.mixin(PIXI.AtlasLoader.prototype); +EventTarget.mixin(AtlasLoader.prototype); /** * Starts loading the JSON file * - * @method load */ -PIXI.AtlasLoader.prototype.load = function () { - this.ajaxRequest = new PIXI.AjaxRequest(); +AtlasLoader.prototype.load = function () { + this.ajaxRequest = new AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); + + 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 () { +AtlasLoader.prototype.onAtlasLoaded = function () { if (this.ajaxRequest.readyState === 4) { if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.atlas = { @@ -72,9 +71,11 @@ // 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]); @@ -126,22 +127,22 @@ // 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)); + this.images.push(new 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, { + TextureCache[i] = new 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; + 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; + TextureCache[i].trim.x = 0; + TextureCache[i].trim.y = 0; } } } @@ -165,11 +166,10 @@ /** * Invoked when json file has loaded. - * - * @method onLoaded + * * @private */ -PIXI.AtlasLoader.prototype.onLoaded = function () { +AtlasLoader.prototype.onLoaded = function () { if (this.images.length - 1 > this.currentImageId) { this.currentImageId++; this.images[this.currentImageId].load(); @@ -181,10 +181,9 @@ /** * Invoked when an error occurs. - * - * @method onError + * * @private */ -PIXI.AtlasLoader.prototype.onError = function () { +AtlasLoader.prototype.onError = function () { this.emit('error', { content: this }); }; diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index 3eb54c4..abaf1b9 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,89 +1,80 @@ /** - * @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 + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the sprite sheet JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.BitmapFontLoader = function(url, crossorigin) -{ +function BitmapFontLoader(url, crossorigin) { /** * The url of the bitmap font data * - * @property url - * @type String + * @member {String} */ this.url = url; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** - * [read-only] The base url of the bitmap font data + * The base url of the bitmap font data * - * @property baseUrl - * @type String + * @member {String} * @readOnly */ this.baseUrl = url.replace(/[^\/]*$/, ''); /** - * [read-only] The texture of the bitmap font + * The texture of the bitmap font * - * @property texture - * @type Texture + * @member {Texture} */ this.texture = null; }; // constructor -PIXI.BitmapFontLoader.prototype.constructor = PIXI.BitmapFontLoader; -PIXI.EventTarget.mixin(PIXI.BitmapFontLoader.prototype); +BitmapFontLoader.prototype.constructor = BitmapFontLoader; +module.exports = BitmapFontLoader; + +EventTarget.mixin(BitmapFontLoader.prototype); /** * Loads the XML font data * - * @method load */ -PIXI.BitmapFontLoader.prototype.load = function() -{ - this.ajaxRequest = new PIXI.AjaxRequest(); +BitmapFontLoader.prototype.load = function () { + this.ajaxRequest = new AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + + 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) - { +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') { + 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 { @@ -94,7 +85,7 @@ } var textureUrl = this.baseUrl + responseXML.getElementsByTagName('page')[0].getAttribute('file'); - var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var image = new ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; @@ -108,11 +99,10 @@ //parse letters var letters = responseXML.getElementsByTagName('char'); - for (var i = 0; i < letters.length; i++) - { + for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new PIXI.Rectangle( + var textureRect = new Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -124,15 +114,14 @@ 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) + texture: TextureCache[charCode] = new Texture(this.texture, textureRect) }; } //parse kernings var kernings = responseXML.getElementsByTagName('kerning'); - for (i = 0; i < kernings.length; i++) - { + 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); @@ -141,7 +130,7 @@ } - PIXI.BitmapText.fonts[data.font] = data; + BitmapText.fonts[data.font] = data; image.addEventListener('loaded', this.onLoaded.bind(this)); image.load(); @@ -152,10 +141,8 @@ /** * Invoked when all files are loaded (xml/fnt and texture) * - * @method onLoaded * @private */ -PIXI.BitmapFontLoader.prototype.onLoaded = function() -{ +BitmapFontLoader.prototype.onLoaded = function () { this.emit('loaded', { content: this }); }; diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 1567f29..9b922e8 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,57 +1,47 @@ /** - * @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() + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though Texture.fromFrame() and Sprite.fromFrame() * When loaded this class will dispatch a 'loaded' event * - * @class ImageLoader - * @uses EventTarget - * @constructor + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the image - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.ImageLoader = function(url, crossorigin) -{ +function ImageLoader(url, crossorigin) { /** * The texture being loaded * - * @property texture - * @type Texture + * @member {Texture} */ - this.texture = PIXI.Texture.fromImage(url, crossorigin); + this.texture = Texture.fromImage(url, crossorigin); /** * if the image is loaded with loadFramedSpriteSheet * frames will contain the sprite sheet frames * - * @property frames - * @type Array + * @member {Array} * @readOnly */ this.frames = []; }; // constructor -PIXI.ImageLoader.prototype.constructor = PIXI.ImageLoader; +ImageLoader.prototype.constructor = ImageLoader; +module.exports = ImageLoader; -PIXI.EventTarget.mixin(PIXI.ImageLoader.prototype); +EventTarget.mixin(ImageLoader.prototype); /** * Loads image or takes it from cache * - * @method load */ -PIXI.ImageLoader.prototype.load = function() -{ - if(!this.texture.baseTexture.hasLoaded) - { +ImageLoader.prototype.load = function () { + if (!this.texture.baseTexture.hasLoaded) { this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); } - else - { + else { this.onLoaded(); } }; @@ -59,42 +49,43 @@ /** * Invoked when image file is loaded or it is already cached and ready to use * - * @method onLoaded * @private */ -PIXI.ImageLoader.prototype.onLoaded = function() -{ +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 frameWidth {number} width of each frame + * @param frameHeight {number} height of each frame * @param textureName {String} if given, the frames will be cached in - format */ -PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) -{ +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 0) - { - textureLoader.addEventListener('loadedBaseTexture', function(evt){ - if (evt.content.content.loadingCount <= 0) - { + if (textureLoader.loadingCount > 0) { + textureLoader.addEventListener('loadedBaseTexture', function (evt){ + if (evt.content.content.loadingCount <= 0) { originalLoader.onLoaded(); } }); } - else - { + else { originalLoader.onLoaded(); } }; @@ -217,8 +189,7 @@ atlasLoader.load(); } } - else - { + else { this.onLoaded(); } }; @@ -226,10 +197,9 @@ /** * Invoke when json file loaded * - * @method onLoaded * @private */ -PIXI.JsonLoader.prototype.onLoaded = function () { +JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ type: 'loaded', @@ -240,10 +210,9 @@ /** * Invoke when error occured * - * @method onError * @private */ -PIXI.JsonLoader.prototype.onError = function () { +JsonLoader.prototype.onError = function () { this.dispatchEvent({ type: 'error', diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index c736c50..82a4358 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,3 +1,5 @@ +var JsonLoader = require('./JsonLoader'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi @@ -15,67 +17,63 @@ * 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 + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.SpineLoader = function(url, crossorigin) -{ +function SpineLoader(url, crossorigin) { /** * The url of the bitmap font data * - * @property url - * @type String + * @member {String} */ this.url = url; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** - * [read-only] Whether the data has loaded yet + * Whether the data has loaded yet * - * @property loaded - * @type Boolean + * @member {boolean} * @readOnly */ this.loaded = false; }; -PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; +SpineLoader.prototype.constructor = SpineLoader; +module.exports = SpineLoader; -PIXI.EventTarget.mixin(PIXI.SpineLoader.prototype); +EventTarget.mixin(SpineLoader.prototype); /** * Loads the JSON data * - * @method load */ -PIXI.SpineLoader.prototype.load = function () { - +SpineLoader.prototype.load = function () { var scope = this; - var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + var jsonLoader = new 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 () { +SpineLoader.prototype.onLoaded = function () { this.loaded = true; this.emit('loaded', { content: this }); }; diff --git a/README.md b/README.md index afa4ff0..3dbcae4 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ - [ ] `extras/` - [x] `filters/` - [x] `geom/` (move to `math/`) -- [ ] `loaders/` +- [x] `loaders/` - [ ] `primitives/` - [ ] `renderers/` - [ ] `text/` diff --git a/src/loaders/AssetLoader.js b/src/loaders/AssetLoader.js index 25adce2..92a256b 100644 --- a/src/loaders/AssetLoader.js +++ b/src/loaders/AssetLoader.js @@ -1,62 +1,58 @@ /** - * @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() + * easily through Texture.fromImage() and 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 + * @class + * @namespace PIXI + * @mixes EventTarget + * @param assetURLs {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 + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.AssetLoader = function(assetURLs, crossorigin) -{ +function AssetLoader(assetURLs, crossorigin) { /** * The array of asset URLs that are going to be loaded * - * @property assetURLs - * @type Array(String) + * @member {string[]} */ this.assetURLs = assetURLs; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** * Maps file extension to loader types * - * @property loadersByType - * @type Object + * @member {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 + 'jpg': ImageLoader, + 'jpeg': ImageLoader, + 'png': ImageLoader, + 'gif': ImageLoader, + 'webp': ImageLoader, + 'json': JsonLoader, + 'atlas': AtlasLoader, + 'anim': SpineLoader, + 'xml': BitmapFontLoader, + 'fnt': BitmapFontLoader }; }; -PIXI.EventTarget.mixin(PIXI.AssetLoader.prototype); +// constructor +AssetLoader.prototype.constructor = AssetLoader; +module.exports = AssetLoader; + +EventTarget.mixin(AssetLoader.prototype); /** * Fired when an item has loaded @@ -68,34 +64,32 @@ * @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 + * @param str {string} the name of the asset */ -PIXI.AssetLoader.prototype._getDataType = function(str) -{ +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 + + // check for malformed data URI scheme + if (sepIdx === -1) { 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') + if (!info || info.toLowerCase() === 'text/plain') { return 'txt'; + } //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); @@ -107,10 +101,8 @@ /** * Starts loading the assets sequentially * - * @method load */ -PIXI.AssetLoader.prototype.load = function() -{ +AssetLoader.prototype.load = function () { var scope = this; function onLoad(evt) { @@ -119,8 +111,7 @@ this.loadCount = this.assetURLs.length; - for (var i=0; i < this.assetURLs.length; i++) - { + 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); @@ -130,7 +121,7 @@ fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; - if(!Constructor) + if (!Constructor) throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); @@ -143,18 +134,21 @@ /** * Invoked after each file is loaded * - * @method onAssetLoaded * @private */ -PIXI.AssetLoader.prototype.onAssetLoaded = function(loader) -{ +AssetLoader.prototype.onAssetLoaded = function (loader) { this.loadCount--; this.emit('onProgress', { content: this, loader: loader }); - if (this.onProgress) this.onProgress(loader); - if (!this.loadCount) - { + if (this.onProgress) { + this.onProgress(loader); + } + + if (!this.loadCount) { this.emit('onComplete', { content: this }); - if(this.onComplete) this.onComplete(); + + if (this.onComplete) { + this.onComplete(); + } } }; diff --git a/src/loaders/AtlasLoader.js b/src/loaders/AtlasLoader.js index 5368b6b..58f92a6 100644 --- a/src/loaders/AtlasLoader.js +++ b/src/loaders/AtlasLoader.js @@ -1,22 +1,18 @@ /** - * @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 + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though Texture.fromFrameId() and Sprite.fromFrameId() + * + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.AtlasLoader = function (url, crossorigin) { +function AtlasLoader(url, crossorigin) { this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; @@ -25,31 +21,34 @@ }; // constructor -PIXI.AtlasLoader.constructor = PIXI.AtlasLoader; +AtlasLoader.prototype.constructor = AtlasLoader; +module.exports = AtlasLoader; -PIXI.EventTarget.mixin(PIXI.AtlasLoader.prototype); +EventTarget.mixin(AtlasLoader.prototype); /** * Starts loading the JSON file * - * @method load */ -PIXI.AtlasLoader.prototype.load = function () { - this.ajaxRequest = new PIXI.AjaxRequest(); +AtlasLoader.prototype.load = function () { + this.ajaxRequest = new AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); + + 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 () { +AtlasLoader.prototype.onAtlasLoaded = function () { if (this.ajaxRequest.readyState === 4) { if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.atlas = { @@ -72,9 +71,11 @@ // 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]); @@ -126,22 +127,22 @@ // 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)); + this.images.push(new 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, { + TextureCache[i] = new 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; + 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; + TextureCache[i].trim.x = 0; + TextureCache[i].trim.y = 0; } } } @@ -165,11 +166,10 @@ /** * Invoked when json file has loaded. - * - * @method onLoaded + * * @private */ -PIXI.AtlasLoader.prototype.onLoaded = function () { +AtlasLoader.prototype.onLoaded = function () { if (this.images.length - 1 > this.currentImageId) { this.currentImageId++; this.images[this.currentImageId].load(); @@ -181,10 +181,9 @@ /** * Invoked when an error occurs. - * - * @method onError + * * @private */ -PIXI.AtlasLoader.prototype.onError = function () { +AtlasLoader.prototype.onError = function () { this.emit('error', { content: this }); }; diff --git a/src/loaders/BitmapFontLoader.js b/src/loaders/BitmapFontLoader.js index 3eb54c4..abaf1b9 100644 --- a/src/loaders/BitmapFontLoader.js +++ b/src/loaders/BitmapFontLoader.js @@ -1,89 +1,80 @@ /** - * @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 + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the sprite sheet JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.BitmapFontLoader = function(url, crossorigin) -{ +function BitmapFontLoader(url, crossorigin) { /** * The url of the bitmap font data * - * @property url - * @type String + * @member {String} */ this.url = url; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** - * [read-only] The base url of the bitmap font data + * The base url of the bitmap font data * - * @property baseUrl - * @type String + * @member {String} * @readOnly */ this.baseUrl = url.replace(/[^\/]*$/, ''); /** - * [read-only] The texture of the bitmap font + * The texture of the bitmap font * - * @property texture - * @type Texture + * @member {Texture} */ this.texture = null; }; // constructor -PIXI.BitmapFontLoader.prototype.constructor = PIXI.BitmapFontLoader; -PIXI.EventTarget.mixin(PIXI.BitmapFontLoader.prototype); +BitmapFontLoader.prototype.constructor = BitmapFontLoader; +module.exports = BitmapFontLoader; + +EventTarget.mixin(BitmapFontLoader.prototype); /** * Loads the XML font data * - * @method load */ -PIXI.BitmapFontLoader.prototype.load = function() -{ - this.ajaxRequest = new PIXI.AjaxRequest(); +BitmapFontLoader.prototype.load = function () { + this.ajaxRequest = new AjaxRequest(); this.ajaxRequest.onreadystatechange = this.onXMLLoaded.bind(this); this.ajaxRequest.open('GET', this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + + 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) - { +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') { + 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 { @@ -94,7 +85,7 @@ } var textureUrl = this.baseUrl + responseXML.getElementsByTagName('page')[0].getAttribute('file'); - var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var image = new ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; @@ -108,11 +99,10 @@ //parse letters var letters = responseXML.getElementsByTagName('char'); - for (var i = 0; i < letters.length; i++) - { + for (var i = 0; i < letters.length; i++) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - var textureRect = new PIXI.Rectangle( + var textureRect = new Rectangle( parseInt(letters[i].getAttribute('x'), 10), parseInt(letters[i].getAttribute('y'), 10), parseInt(letters[i].getAttribute('width'), 10), @@ -124,15 +114,14 @@ 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) + texture: TextureCache[charCode] = new Texture(this.texture, textureRect) }; } //parse kernings var kernings = responseXML.getElementsByTagName('kerning'); - for (i = 0; i < kernings.length; i++) - { + 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); @@ -141,7 +130,7 @@ } - PIXI.BitmapText.fonts[data.font] = data; + BitmapText.fonts[data.font] = data; image.addEventListener('loaded', this.onLoaded.bind(this)); image.load(); @@ -152,10 +141,8 @@ /** * Invoked when all files are loaded (xml/fnt and texture) * - * @method onLoaded * @private */ -PIXI.BitmapFontLoader.prototype.onLoaded = function() -{ +BitmapFontLoader.prototype.onLoaded = function () { this.emit('loaded', { content: this }); }; diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js index 1567f29..9b922e8 100644 --- a/src/loaders/ImageLoader.js +++ b/src/loaders/ImageLoader.js @@ -1,57 +1,47 @@ /** - * @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() + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though Texture.fromFrame() and Sprite.fromFrame() * When loaded this class will dispatch a 'loaded' event * - * @class ImageLoader - * @uses EventTarget - * @constructor + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the image - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.ImageLoader = function(url, crossorigin) -{ +function ImageLoader(url, crossorigin) { /** * The texture being loaded * - * @property texture - * @type Texture + * @member {Texture} */ - this.texture = PIXI.Texture.fromImage(url, crossorigin); + this.texture = Texture.fromImage(url, crossorigin); /** * if the image is loaded with loadFramedSpriteSheet * frames will contain the sprite sheet frames * - * @property frames - * @type Array + * @member {Array} * @readOnly */ this.frames = []; }; // constructor -PIXI.ImageLoader.prototype.constructor = PIXI.ImageLoader; +ImageLoader.prototype.constructor = ImageLoader; +module.exports = ImageLoader; -PIXI.EventTarget.mixin(PIXI.ImageLoader.prototype); +EventTarget.mixin(ImageLoader.prototype); /** * Loads image or takes it from cache * - * @method load */ -PIXI.ImageLoader.prototype.load = function() -{ - if(!this.texture.baseTexture.hasLoaded) - { +ImageLoader.prototype.load = function () { + if (!this.texture.baseTexture.hasLoaded) { this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); } - else - { + else { this.onLoaded(); } }; @@ -59,42 +49,43 @@ /** * Invoked when image file is loaded or it is already cached and ready to use * - * @method onLoaded * @private */ -PIXI.ImageLoader.prototype.onLoaded = function() -{ +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 frameWidth {number} width of each frame + * @param frameHeight {number} height of each frame * @param textureName {String} if given, the frames will be cached in - format */ -PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) -{ +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 0) - { - textureLoader.addEventListener('loadedBaseTexture', function(evt){ - if (evt.content.content.loadingCount <= 0) - { + if (textureLoader.loadingCount > 0) { + textureLoader.addEventListener('loadedBaseTexture', function (evt){ + if (evt.content.content.loadingCount <= 0) { originalLoader.onLoaded(); } }); } - else - { + else { originalLoader.onLoaded(); } }; @@ -217,8 +189,7 @@ atlasLoader.load(); } } - else - { + else { this.onLoaded(); } }; @@ -226,10 +197,9 @@ /** * Invoke when json file loaded * - * @method onLoaded * @private */ -PIXI.JsonLoader.prototype.onLoaded = function () { +JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ type: 'loaded', @@ -240,10 +210,9 @@ /** * Invoke when error occured * - * @method onError * @private */ -PIXI.JsonLoader.prototype.onError = function () { +JsonLoader.prototype.onError = function () { this.dispatchEvent({ type: 'error', diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js index c736c50..82a4358 100644 --- a/src/loaders/SpineLoader.js +++ b/src/loaders/SpineLoader.js @@ -1,3 +1,5 @@ +var JsonLoader = require('./JsonLoader'); + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi @@ -15,67 +17,63 @@ * 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 + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.SpineLoader = function(url, crossorigin) -{ +function SpineLoader(url, crossorigin) { /** * The url of the bitmap font data * - * @property url - * @type String + * @member {String} */ this.url = url; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** - * [read-only] Whether the data has loaded yet + * Whether the data has loaded yet * - * @property loaded - * @type Boolean + * @member {boolean} * @readOnly */ this.loaded = false; }; -PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; +SpineLoader.prototype.constructor = SpineLoader; +module.exports = SpineLoader; -PIXI.EventTarget.mixin(PIXI.SpineLoader.prototype); +EventTarget.mixin(SpineLoader.prototype); /** * Loads the JSON data * - * @method load */ -PIXI.SpineLoader.prototype.load = function () { - +SpineLoader.prototype.load = function () { var scope = this; - var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + var jsonLoader = new 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 () { +SpineLoader.prototype.onLoaded = function () { this.loaded = true; this.emit('loaded', { content: this }); }; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js index 4d50430..5c0b5a4 100644 --- a/src/loaders/SpriteSheetLoader.js +++ b/src/loaders/SpriteSheetLoader.js @@ -1,45 +1,40 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var JsonLoader = require('./JsonLoader'); /** * 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() + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though Texture.fromFrameId() and 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 + * @class + * @mixes EventTarget + * @namespace PIXI * @param url {String} The url of the sprite sheet JSON file - * @param crossorigin {Boolean} Whether requests should be treated as crossorigin + * @param crossorigin {boolean} Whether requests should be treated as crossorigin */ -PIXI.SpriteSheetLoader = function (url, crossorigin) { +function SpriteSheetLoader(url, crossorigin) { /** * The url of the atlas data * - * @property url - * @type String + * @member {String} */ this.url = url; /** * Whether the requests should be treated as cross origin * - * @property crossorigin - * @type Boolean + * @member {boolean} */ this.crossorigin = crossorigin; /** - * [read-only] The base url of the bitmap font data + * The base url of the bitmap font data * - * @property baseUrl - * @type String + * @member {String} * @readOnly */ this.baseUrl = url.replace(/[^\/]*$/, ''); @@ -47,47 +42,46 @@ /** * The texture being loaded * - * @property texture - * @type Texture + * @member {Texture} */ this.texture = null; /** * The frames of the sprite sheet * - * @property frames - * @type Object + * @member {object} */ this.frames = {}; }; // constructor -PIXI.SpriteSheetLoader.prototype.constructor = PIXI.SpriteSheetLoader; +SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; +module.exports = SpriteSheetLoader; -PIXI.EventTarget.mixin(PIXI.SpriteSheetLoader.prototype); +EventTarget.mixin(SpriteSheetLoader.prototype); /** * This will begin loading the JSON file * - * @method load */ -PIXI.SpriteSheetLoader.prototype.load = function () { +SpriteSheetLoader.prototype.load = function () { var scope = this; - var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + var jsonLoader = new 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 () { +SpriteSheetLoader.prototype.onLoaded = function () { this.emit('loaded', { content: this });