loaders class refactoring
This commit is contained in:
Krzysztof Opalka
parent
b848f34f69
commit
89ca071ab2
4 changed files with 237 additions and 147 deletions
|
|
@ -3,17 +3,17 @@
|
|||
*/
|
||||
|
||||
/**
|
||||
* A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()
|
||||
* When all items have been loaded this class will dispatch a 'loaded' event
|
||||
* As each individual item is loaded this class will dispatch a 'progress' event
|
||||
* A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()
|
||||
* When all items have been loaded this class will dispatch a "onLoaded" event
|
||||
* As each individual item is loaded this class will dispatch a "onProgress" event
|
||||
* @class AssetLoader
|
||||
* @constructor
|
||||
* @extends EventTarget
|
||||
* @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time
|
||||
* @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".
|
||||
*/
|
||||
PIXI.AssetLoader = function(assetURLs)
|
||||
{
|
||||
PIXI.EventTarget.call( this );
|
||||
PIXI.EventTarget.call(this);
|
||||
|
||||
/**
|
||||
* The array of asset URLs that are going to be loaded
|
||||
|
|
@ -22,10 +22,8 @@ PIXI.AssetLoader = function(assetURLs)
|
|||
*/
|
||||
this.assetURLs = assetURLs;
|
||||
|
||||
this.assets = [];
|
||||
|
||||
this.crossorigin = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
Fired when an item has loaded
|
||||
|
|
@ -45,103 +43,67 @@ PIXI.AssetLoader.constructor = PIXI.AssetLoader;
|
|||
*/
|
||||
PIXI.AssetLoader.prototype.load = function()
|
||||
{
|
||||
this.loadCount = this.assetURLs.length;
|
||||
var imageTypes = ["jpeg", "jpg", "png", "gif"];
|
||||
var scope = this;
|
||||
|
||||
var spriteSheetTypes = ["json"];
|
||||
this.loadCount = this.assetURLs.length;
|
||||
|
||||
for (var i=0; i < this.assetURLs.length; i++)
|
||||
{
|
||||
var filename = this.assetURLs[i];
|
||||
var fileType = filename.split('.').pop().toLowerCase();
|
||||
// what are we loading?
|
||||
var type = null;
|
||||
var fileName = this.assetURLs[i];
|
||||
var fileType = fileName.split(".").pop().toLowerCase();
|
||||
|
||||
for (var j=0; j < imageTypes.length; j++)
|
||||
{
|
||||
if(fileType == imageTypes[j])
|
||||
{
|
||||
type = "img";
|
||||
break;
|
||||
}
|
||||
}
|
||||
var loaderClass = this.getLoaderByFileType(fileType);
|
||||
|
||||
if(type != "img")
|
||||
{
|
||||
for (var j=0; j < spriteSheetTypes.length; j++)
|
||||
{
|
||||
if(fileType == spriteSheetTypes[j])
|
||||
{
|
||||
type = "atlas";
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
var loader = new loaderClass(fileName, this.crossorigin);
|
||||
|
||||
if(type == "img")
|
||||
{
|
||||
|
||||
var texture = PIXI.Texture.fromImage(filename, this.crossorigin);
|
||||
if(!texture.baseTexture.hasLoaded)
|
||||
{
|
||||
|
||||
var scope = this;
|
||||
texture.baseTexture.addEventListener( 'loaded', function ( event )
|
||||
loader.addEventListener("loaded", function()
|
||||
{
|
||||
scope.onAssetLoaded();
|
||||
});
|
||||
|
||||
this.assets.push(texture);
|
||||
loader.load();
|
||||
}
|
||||
else
|
||||
};
|
||||
|
||||
/**
|
||||
* Factory method for getting loader class based on extension
|
||||
* @private
|
||||
* @param {String} fileType An extension of the file based on which the loader class will be returned
|
||||
* @return {Class} The loader class
|
||||
*/
|
||||
PIXI.AssetLoader.prototype.getLoaderByFileType = function(fileType)
|
||||
{
|
||||
switch (fileType)
|
||||
{
|
||||
case "jpeg":
|
||||
case "jpg":
|
||||
case "png":
|
||||
case "gif":
|
||||
return PIXI.ImageLoader;
|
||||
|
||||
// already loaded!
|
||||
this.loadCount--;
|
||||
// if this hits zero here.. then everything was cached!
|
||||
if(this.loadCount == 0)
|
||||
{
|
||||
this.dispatchEvent( { type: 'onComplete', content: this } );
|
||||
if(this.onComplete)this.onComplete();
|
||||
}
|
||||
case "json":
|
||||
return PIXI.SpriteSheetLoader;
|
||||
|
||||
case "xml":
|
||||
case "fnt":
|
||||
return PIXI.XMLLoader;
|
||||
}
|
||||
throw new Error(fileType + " is an unsupported file type " + this);
|
||||
};
|
||||
|
||||
}
|
||||
else if(type == "atlas")
|
||||
{
|
||||
var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename);
|
||||
spriteSheetLoader.crossorigin = this.crossorigin;
|
||||
this.assets.push(spriteSheetLoader);
|
||||
|
||||
var scope = this;
|
||||
spriteSheetLoader.addEventListener( 'loaded', function ( event )
|
||||
{
|
||||
scope.onAssetLoaded();
|
||||
});
|
||||
|
||||
spriteSheetLoader.load();
|
||||
}
|
||||
else
|
||||
{
|
||||
// dont know what the file is! :/
|
||||
//this.loadCount--;
|
||||
throw new Error(filename + " is an unsupported file type " + this);
|
||||
}
|
||||
|
||||
//this.assets[i].load();
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Invoked after each file is loaded
|
||||
* @private
|
||||
*/
|
||||
PIXI.AssetLoader.prototype.onAssetLoaded = function()
|
||||
{
|
||||
this.loadCount--;
|
||||
this.dispatchEvent( { type: 'onProgress', content: this } );
|
||||
if(this.onProgress)this.onProgress();
|
||||
this.dispatchEvent({type: "onProgress", content: this});
|
||||
if(this.onProgress) this.onProgress();
|
||||
|
||||
if(this.loadCount == 0)
|
||||
{
|
||||
this.dispatchEvent( { type: 'onComplete', content: this } );
|
||||
if(this.onComplete)this.onComplete();
|
||||
this.dispatchEvent({type: "onComplete", content: this});
|
||||
if(this.onComplete) this.onComplete();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
50
src/pixi/loaders/ImageLoader.js
Normal file
50
src/pixi/loaders/ImageLoader.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
/**
|
||||
* The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
|
||||
* Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
|
||||
* When loaded this class will dispatch a 'loaded' event
|
||||
* @class ImageLoader
|
||||
* @extends EventTarget
|
||||
* @constructor
|
||||
* @param {String} url The url of the image
|
||||
* @param {Boolean} crossorigin
|
||||
*/
|
||||
PIXI.ImageLoader = function(url, crossorigin)
|
||||
{
|
||||
PIXI.EventTarget.call(this);
|
||||
this.texture = PIXI.Texture.fromImage(url, crossorigin);
|
||||
};
|
||||
|
||||
// constructor
|
||||
PIXI.ImageLoader.constructor = PIXI.ImageLoader;
|
||||
|
||||
/**
|
||||
* Loads image or takes it from cache
|
||||
*/
|
||||
PIXI.ImageLoader.prototype.load = function()
|
||||
{
|
||||
if(!this.texture.baseTexture.hasLoaded)
|
||||
{
|
||||
var scope = this;
|
||||
this.texture.baseTexture.addEventListener("loaded", function()
|
||||
{
|
||||
scope.onLoaded();
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
this.onLoaded();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoked when image file is loaded or it is already cached and ready to use
|
||||
* @private
|
||||
*/
|
||||
PIXI.ImageLoader.prototype.onLoaded = function()
|
||||
{
|
||||
this.dispatchEvent({type: "loaded", content: this});
|
||||
};
|
||||
|
|
@ -6,30 +6,31 @@
|
|||
* The sprite sheet loader is used to load in JSON sprite sheet data
|
||||
* To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format
|
||||
* There is a free version so thats nice, although the paid version is great value for money.
|
||||
* It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.
|
||||
* It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed.
|
||||
* Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
|
||||
* This loader will also load the image file that the Spritesheet points to as well as the data.
|
||||
* When loaded this class will dispatch a 'loaded' event
|
||||
* When loaded this class will dispatch a "loaded" event
|
||||
* @class SpriteSheetLoader
|
||||
* @extends EventTarget
|
||||
* @constructor
|
||||
* @param url {String} the url of the sprite sheet JSON file
|
||||
* @param {Boolean} crossorigin
|
||||
*/
|
||||
|
||||
PIXI.SpriteSheetLoader = function(url)
|
||||
PIXI.SpriteSheetLoader = function(url, crossorigin)
|
||||
{
|
||||
/*
|
||||
* i use texture packer to load the assets..
|
||||
* http://www.codeandweb.com/texturepacker
|
||||
* make sure to set the format as "JSON"
|
||||
*/
|
||||
PIXI.EventTarget.call( this );
|
||||
PIXI.EventTarget.call(this);
|
||||
this.url = url;
|
||||
this.baseUrl = url.replace(/[^\/]*$/, '');
|
||||
this.texture;
|
||||
this.baseUrl = url.replace(/[^\/]*$/, "");
|
||||
this.texture = null;
|
||||
this.frames = {};
|
||||
this.crossorigin = false;
|
||||
}
|
||||
this.crossorigin = crossorigin;
|
||||
};
|
||||
|
||||
// constructor
|
||||
PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader;
|
||||
|
|
@ -41,31 +42,37 @@ PIXI.SpriteSheetLoader.prototype.load = function()
|
|||
{
|
||||
this.ajaxRequest = new AjaxRequest();
|
||||
var scope = this;
|
||||
this.ajaxRequest.onreadystatechange=function()
|
||||
this.ajaxRequest.onreadystatechange = function()
|
||||
{
|
||||
scope.onLoaded();
|
||||
}
|
||||
scope.onJSONLoaded();
|
||||
};
|
||||
|
||||
this.ajaxRequest.open("GET", this.url, true)
|
||||
this.ajaxRequest.open("GET", this.url, true);
|
||||
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json");
|
||||
this.ajaxRequest.send(null)
|
||||
}
|
||||
};
|
||||
|
||||
PIXI.SpriteSheetLoader.prototype.onLoaded = function()
|
||||
/**
|
||||
* Invoke when JSON file is loaded
|
||||
* @private
|
||||
*/
|
||||
PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function()
|
||||
{
|
||||
if (this.ajaxRequest.readyState==4)
|
||||
if (this.ajaxRequest.readyState == 4)
|
||||
{
|
||||
if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1)
|
||||
if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
|
||||
{
|
||||
var jsondata = eval("("+this.ajaxRequest.responseText+")");
|
||||
var jsonData = eval("(" + this.ajaxRequest.responseText + ")");
|
||||
var textureUrl = this.baseUrl + jsonData.meta.image;
|
||||
|
||||
var textureUrl = this.baseUrl + jsondata.meta.image;
|
||||
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
|
||||
this.texture = image.texture.baseTexture;
|
||||
var scope = this;
|
||||
image.addEventListener("loaded", function(event) {
|
||||
scope.onLoaded();
|
||||
});
|
||||
|
||||
this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture;
|
||||
|
||||
// if(!this.texture)this.texture = new PIXI.Texture(textureUrl);
|
||||
|
||||
var frameData = jsondata.frames;
|
||||
var frameData = jsonData.frames;
|
||||
for (var i in frameData)
|
||||
{
|
||||
var rect = frameData[i].frame;
|
||||
|
|
@ -77,29 +84,21 @@ PIXI.SpriteSheetLoader.prototype.onLoaded = function()
|
|||
{
|
||||
//var realSize = frameData[i].spriteSourceSize;
|
||||
PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize;
|
||||
PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w)
|
||||
PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w)
|
||||
// calculate the offset!
|
||||
}
|
||||
// this.frames[i] = ;
|
||||
}
|
||||
}
|
||||
|
||||
if(this.texture.hasLoaded)
|
||||
{
|
||||
this.dispatchEvent( { type: 'loaded', content: this } );
|
||||
}
|
||||
else
|
||||
{
|
||||
var scope = this;
|
||||
// wait for the texture to load..
|
||||
this.texture.addEventListener('loaded', function(){
|
||||
|
||||
scope.dispatchEvent( { type: 'loaded', content: scope } );
|
||||
|
||||
});
|
||||
image.load();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
/**
|
||||
* Invoke when all files are loaded (json and texture)
|
||||
* @private
|
||||
*/
|
||||
PIXI.SpriteSheetLoader.prototype.onLoaded = function()
|
||||
{
|
||||
this.dispatchEvent({type: "loaded", content: this});
|
||||
};
|
||||
|
|
|
|||
79
src/pixi/loaders/XMLLoader.js
Normal file
79
src/pixi/loaders/XMLLoader.js
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
/**
|
||||
* The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
|
||||
* To generate the data you can use http://www.angelcode.com/products/bmfont/
|
||||
* This loader will also load the image file as the data.
|
||||
* When loaded this class will dispatch a "loaded" event
|
||||
* @class XMLLoader
|
||||
* @extends EventTarget
|
||||
* @constructor
|
||||
* @param url {String} the url of the sprite sheet JSON file
|
||||
* @param {Boolean} crossorigin
|
||||
*/
|
||||
|
||||
PIXI.XMLLoader = function(url, crossorigin)
|
||||
{
|
||||
/*
|
||||
* i use texture packer to load the assets..
|
||||
* http://www.codeandweb.com/texturepacker
|
||||
* make sure to set the format as "JSON"
|
||||
*/
|
||||
PIXI.EventTarget.call(this);
|
||||
this.url = url;
|
||||
this.baseUrl = url.replace(/[^\/]*$/, "");
|
||||
this.texture = null;
|
||||
this.crossorigin = crossorigin;
|
||||
};
|
||||
|
||||
// constructor
|
||||
PIXI.XMLLoader.constructor = PIXI.XMLLoader;
|
||||
|
||||
/**
|
||||
* This will begin loading the JSON file
|
||||
*/
|
||||
PIXI.XMLLoader.prototype.load = function()
|
||||
{
|
||||
this.ajaxRequest = new XMLHttpRequest();
|
||||
var scope = this;
|
||||
this.ajaxRequest.onreadystatechange = function()
|
||||
{
|
||||
scope.onXMLLoaded();
|
||||
};
|
||||
|
||||
this.ajaxRequest.open("GET", this.url, true);
|
||||
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
|
||||
this.ajaxRequest.send(null)
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoked when XML file is loaded
|
||||
* @private
|
||||
*/
|
||||
PIXI.XMLLoader.prototype.onXMLLoaded = function()
|
||||
{
|
||||
if (this.ajaxRequest.readyState == 4)
|
||||
{
|
||||
if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
|
||||
{
|
||||
var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
|
||||
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
|
||||
var scope = this;
|
||||
image.addEventListener("loaded", function() {
|
||||
scope.onLoaded();
|
||||
});
|
||||
image.load();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoked when all files are loaded (xml/fnt and texture)
|
||||
* @private
|
||||
*/
|
||||
PIXI.XMLLoader.prototype.onLoaded = function()
|
||||
{
|
||||
this.dispatchEvent({type: "loaded", content: this});
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue