Added phaser build and hellophaser sample
This commit is contained in:
159
src/pixi/loaders/AssetLoader.js
Normal file
159
src/pixi/loaders/AssetLoader.js
Normal file
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
/**
|
||||
* A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the
|
||||
* assets have been loaded they are added to the PIXI Texture cache and can be accessed
|
||||
* easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()
|
||||
* When all items have been loaded this class will dispatch a 'onLoaded' event
|
||||
* As each individual item is loaded this class will dispatch a 'onProgress' event
|
||||
*
|
||||
* @class AssetLoader
|
||||
* @constructor
|
||||
* @uses EventTarget
|
||||
* @param {Array<String>} 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'.
|
||||
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
|
||||
*/
|
||||
PIXI.AssetLoader = function(assetURLs, crossorigin)
|
||||
{
|
||||
PIXI.EventTarget.call(this);
|
||||
|
||||
/**
|
||||
* The array of asset URLs that are going to be loaded
|
||||
*
|
||||
* @property assetURLs
|
||||
* @type Array<String>
|
||||
*/
|
||||
this.assetURLs = assetURLs;
|
||||
|
||||
/**
|
||||
* Whether the requests should be treated as cross origin
|
||||
*
|
||||
* @property crossorigin
|
||||
* @type Boolean
|
||||
*/
|
||||
this.crossorigin = crossorigin;
|
||||
|
||||
/**
|
||||
* Maps file extension to loader types
|
||||
*
|
||||
* @property loadersByType
|
||||
* @type Object
|
||||
*/
|
||||
this.loadersByType = {
|
||||
'jpg': PIXI.ImageLoader,
|
||||
'jpeg': PIXI.ImageLoader,
|
||||
'png': PIXI.ImageLoader,
|
||||
'gif': PIXI.ImageLoader,
|
||||
'json': PIXI.JsonLoader,
|
||||
'atlas': PIXI.AtlasLoader,
|
||||
'anim': PIXI.SpineLoader,
|
||||
'xml': PIXI.BitmapFontLoader,
|
||||
'fnt': PIXI.BitmapFontLoader
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Fired when an item has loaded
|
||||
* @event onProgress
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when all the assets have loaded
|
||||
* @event onComplete
|
||||
*/
|
||||
|
||||
// constructor
|
||||
PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader;
|
||||
|
||||
/**
|
||||
* Given a filename, returns its extension, wil
|
||||
*
|
||||
* @method _getDataType
|
||||
* @param str {String} the name of the asset
|
||||
*/
|
||||
PIXI.AssetLoader.prototype._getDataType = function(str)
|
||||
{
|
||||
var test = 'data:';
|
||||
//starts with 'data:'
|
||||
var start = str.slice(0, test.length).toLowerCase();
|
||||
if (start === test) {
|
||||
var data = str.slice(test.length);
|
||||
|
||||
var sepIdx = data.indexOf(',');
|
||||
if (sepIdx === -1) //malformed data URI scheme
|
||||
return null;
|
||||
|
||||
//e.g. 'image/gif;base64' => 'image/gif'
|
||||
var info = data.slice(0, sepIdx).split(';')[0];
|
||||
|
||||
//We might need to handle some special cases here...
|
||||
//standardize text/plain to 'txt' file extension
|
||||
if (!info || info.toLowerCase() === 'text/plain')
|
||||
return 'txt';
|
||||
|
||||
//User specified mime type, try splitting it by '/'
|
||||
return info.split('/').pop().toLowerCase();
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Starts loading the assets sequentially
|
||||
*
|
||||
* @method load
|
||||
*/
|
||||
PIXI.AssetLoader.prototype.load = function()
|
||||
{
|
||||
var scope = this;
|
||||
|
||||
function onLoad(evt) {
|
||||
scope.onAssetLoaded(evt.content);
|
||||
}
|
||||
|
||||
this.loadCount = this.assetURLs.length;
|
||||
|
||||
for (var i=0; i < this.assetURLs.length; i++)
|
||||
{
|
||||
var fileName = this.assetURLs[i];
|
||||
//first see if we have a data URI scheme..
|
||||
var fileType = this._getDataType(fileName);
|
||||
|
||||
//if not, assume it's a file URI
|
||||
if (!fileType)
|
||||
fileType = fileName.split('?').shift().split('.').pop().toLowerCase();
|
||||
|
||||
var Constructor = this.loadersByType[fileType];
|
||||
if(!Constructor)
|
||||
throw new Error(fileType + ' is an unsupported file type');
|
||||
|
||||
var loader = new Constructor(fileName, this.crossorigin);
|
||||
|
||||
loader.addEventListener('loaded', onLoad);
|
||||
loader.load();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoked after each file is loaded
|
||||
*
|
||||
* @method onAssetLoaded
|
||||
* @private
|
||||
*/
|
||||
PIXI.AssetLoader.prototype.onAssetLoaded = function(loader)
|
||||
{
|
||||
this.loadCount--;
|
||||
this.dispatchEvent({ type: 'onProgress', content: this, loader: loader });
|
||||
if (this.onProgress) this.onProgress(loader);
|
||||
|
||||
if (!this.loadCount)
|
||||
{
|
||||
this.dispatchEvent({type: 'onComplete', content: this});
|
||||
if(this.onComplete) this.onComplete();
|
||||
}
|
||||
};
|
||||
190
src/pixi/loaders/AtlasLoader.js
Normal file
190
src/pixi/loaders/AtlasLoader.js
Normal file
@@ -0,0 +1,190 @@
|
||||
/**
|
||||
* @author Martin Kelm http://mkelm.github.com
|
||||
*/
|
||||
|
||||
/**
|
||||
* The atlas file loader is used to load in Atlas data and parse it
|
||||
* When loaded this class will dispatch a 'loaded' event
|
||||
* If loading fails this class will dispatch an 'error' event
|
||||
* @class AtlasLoader
|
||||
* @extends EventTarget
|
||||
* @constructor
|
||||
* @param {String} url the url of the JSON file
|
||||
* @param {Boolean} crossorigin
|
||||
*/
|
||||
|
||||
PIXI.AtlasLoader = function (url, crossorigin) {
|
||||
PIXI.EventTarget.call(this);
|
||||
this.url = url;
|
||||
this.baseUrl = url.replace(/[^\/]*$/, '');
|
||||
this.crossorigin = crossorigin;
|
||||
this.loaded = false;
|
||||
|
||||
};
|
||||
|
||||
// constructor
|
||||
PIXI.AtlasLoader.constructor = PIXI.AtlasLoader;
|
||||
|
||||
|
||||
/**
|
||||
* Starts loading the JSON file
|
||||
*
|
||||
* @method load
|
||||
*/
|
||||
PIXI.AtlasLoader.prototype.load = function () {
|
||||
this.ajaxRequest = new PIXI.AjaxRequest();
|
||||
this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this);
|
||||
|
||||
this.ajaxRequest.open('GET', this.url, true);
|
||||
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json');
|
||||
this.ajaxRequest.send(null);
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoke when JSON file is loaded
|
||||
* @method onAtlasLoaded
|
||||
* @private
|
||||
*/
|
||||
PIXI.AtlasLoader.prototype.onAtlasLoaded = function () {
|
||||
if (this.ajaxRequest.readyState === 4) {
|
||||
if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) {
|
||||
this.atlas = {
|
||||
meta : {
|
||||
image : []
|
||||
},
|
||||
frames : []
|
||||
};
|
||||
var result = this.ajaxRequest.responseText.split(/\r?\n/);
|
||||
var lineCount = -3;
|
||||
|
||||
var currentImageId = 0;
|
||||
var currentFrame = null;
|
||||
var nameInNextLine = false;
|
||||
|
||||
var i = 0,
|
||||
j = 0,
|
||||
selfOnLoaded = this.onLoaded.bind(this);
|
||||
|
||||
// parser without rotation support yet!
|
||||
for (i = 0; i < result.length; i++) {
|
||||
result[i] = result[i].replace(/^\s+|\s+$/g, '');
|
||||
if (result[i] === '') {
|
||||
nameInNextLine = i+1;
|
||||
}
|
||||
if (result[i].length > 0) {
|
||||
if (nameInNextLine === i) {
|
||||
this.atlas.meta.image.push(result[i]);
|
||||
currentImageId = this.atlas.meta.image.length - 1;
|
||||
this.atlas.frames.push({});
|
||||
lineCount = -3;
|
||||
} else if (lineCount > 0) {
|
||||
if (lineCount % 7 === 1) { // frame name
|
||||
if (currentFrame != null) { //jshint ignore:line
|
||||
this.atlas.frames[currentImageId][currentFrame.name] = currentFrame;
|
||||
}
|
||||
currentFrame = { name: result[i], frame : {} };
|
||||
} else {
|
||||
var text = result[i].split(' ');
|
||||
if (lineCount % 7 === 3) { // position
|
||||
currentFrame.frame.x = Number(text[1].replace(',', ''));
|
||||
currentFrame.frame.y = Number(text[2]);
|
||||
} else if (lineCount % 7 === 4) { // size
|
||||
currentFrame.frame.w = Number(text[1].replace(',', ''));
|
||||
currentFrame.frame.h = Number(text[2]);
|
||||
} else if (lineCount % 7 === 5) { // real size
|
||||
var realSize = {
|
||||
x : 0,
|
||||
y : 0,
|
||||
w : Number(text[1].replace(',', '')),
|
||||
h : Number(text[2])
|
||||
};
|
||||
|
||||
if (realSize.w > currentFrame.frame.w || realSize.h > currentFrame.frame.h) {
|
||||
currentFrame.trimmed = true;
|
||||
currentFrame.realSize = realSize;
|
||||
} else {
|
||||
currentFrame.trimmed = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
lineCount++;
|
||||
}
|
||||
}
|
||||
|
||||
if (currentFrame != null) { //jshint ignore:line
|
||||
this.atlas.frames[currentImageId][currentFrame.name] = currentFrame;
|
||||
}
|
||||
|
||||
if (this.atlas.meta.image.length > 0) {
|
||||
this.images = [];
|
||||
for (j = 0; j < this.atlas.meta.image.length; j++) {
|
||||
// sprite sheet
|
||||
var textureUrl = this.baseUrl + this.atlas.meta.image[j];
|
||||
var frameData = this.atlas.frames[j];
|
||||
this.images.push(new PIXI.ImageLoader(textureUrl, this.crossorigin));
|
||||
|
||||
for (i in frameData) {
|
||||
var rect = frameData[i].frame;
|
||||
if (rect) {
|
||||
PIXI.TextureCache[i] = new PIXI.Texture(this.images[j].texture.baseTexture, {
|
||||
x: rect.x,
|
||||
y: rect.y,
|
||||
width: rect.w,
|
||||
height: rect.h
|
||||
});
|
||||
if (frameData[i].trimmed) {
|
||||
PIXI.TextureCache[i].realSize = frameData[i].realSize;
|
||||
// trim in pixi not supported yet, todo update trim properties if it is done ...
|
||||
PIXI.TextureCache[i].trim.x = 0;
|
||||
PIXI.TextureCache[i].trim.y = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.currentImageId = 0;
|
||||
for (j = 0; j < this.images.length; j++) {
|
||||
this.images[j].addEventListener('loaded', selfOnLoaded);
|
||||
}
|
||||
this.images[this.currentImageId].load();
|
||||
|
||||
} else {
|
||||
this.onLoaded();
|
||||
}
|
||||
|
||||
} else {
|
||||
this.onError();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoke when json file has loaded
|
||||
* @method onLoaded
|
||||
* @private
|
||||
*/
|
||||
PIXI.AtlasLoader.prototype.onLoaded = function () {
|
||||
if (this.images.length - 1 > this.currentImageId) {
|
||||
this.currentImageId++;
|
||||
this.images[this.currentImageId].load();
|
||||
} else {
|
||||
this.loaded = true;
|
||||
this.dispatchEvent({
|
||||
type: 'loaded',
|
||||
content: this
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoke when error occured
|
||||
* @method onError
|
||||
* @private
|
||||
*/
|
||||
PIXI.AtlasLoader.prototype.onError = function () {
|
||||
this.dispatchEvent({
|
||||
type: 'error',
|
||||
content: this
|
||||
});
|
||||
};
|
||||
174
src/pixi/loaders/BitmapFontLoader.js
Normal file
174
src/pixi/loaders/BitmapFontLoader.js
Normal file
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
/**
|
||||
* The xml loader is used to load in XML bitmap font data ('xml' or 'fnt')
|
||||
* To generate the data you can use http://www.angelcode.com/products/bmfont/
|
||||
* This loader will also load the image file as the data.
|
||||
* When loaded this class will dispatch a 'loaded' event
|
||||
*
|
||||
* @class BitmapFontLoader
|
||||
* @uses EventTarget
|
||||
* @constructor
|
||||
* @param url {String} The url of the sprite sheet JSON file
|
||||
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
|
||||
*/
|
||||
PIXI.BitmapFontLoader = function(url, crossorigin)
|
||||
{
|
||||
/*
|
||||
* 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);
|
||||
|
||||
/**
|
||||
* The url of the bitmap font data
|
||||
*
|
||||
* @property url
|
||||
* @type String
|
||||
*/
|
||||
this.url = url;
|
||||
|
||||
/**
|
||||
* Whether the requests should be treated as cross origin
|
||||
*
|
||||
* @property crossorigin
|
||||
* @type Boolean
|
||||
*/
|
||||
this.crossorigin = crossorigin;
|
||||
|
||||
/**
|
||||
* [read-only] The base url of the bitmap font data
|
||||
*
|
||||
* @property baseUrl
|
||||
* @type String
|
||||
* @readOnly
|
||||
*/
|
||||
this.baseUrl = url.replace(/[^\/]*$/, '');
|
||||
|
||||
/**
|
||||
* [read-only] The texture of the bitmap font
|
||||
*
|
||||
* @property baseUrl
|
||||
* @type String
|
||||
*/
|
||||
this.texture = null;
|
||||
};
|
||||
|
||||
// constructor
|
||||
PIXI.BitmapFontLoader.prototype.constructor = PIXI.BitmapFontLoader;
|
||||
|
||||
/**
|
||||
* Loads the XML font data
|
||||
*
|
||||
* @method load
|
||||
*/
|
||||
PIXI.BitmapFontLoader.prototype.load = function()
|
||||
{
|
||||
this.ajaxRequest = new PIXI.AjaxRequest();
|
||||
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 the XML file is loaded, parses the data
|
||||
*
|
||||
* @method onXMLLoaded
|
||||
* @private
|
||||
*/
|
||||
PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
|
||||
{
|
||||
if (this.ajaxRequest.readyState === 4)
|
||||
{
|
||||
if (this.ajaxRequest.status === 200 || window.location.protocol.indexOf('http') === -1)
|
||||
{
|
||||
var responseXML = this.ajaxRequest.responseXML;
|
||||
if(!responseXML || /MSIE 9/i.test(navigator.userAgent) || navigator.isCocoonJS) {
|
||||
if(typeof(window.DOMParser) === 'function') {
|
||||
var domparser = new DOMParser();
|
||||
responseXML = domparser.parseFromString(this.ajaxRequest.responseText, 'text/xml');
|
||||
} else {
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = this.ajaxRequest.responseText;
|
||||
responseXML = div;
|
||||
}
|
||||
}
|
||||
|
||||
var textureUrl = this.baseUrl + responseXML.getElementsByTagName('page')[0].getAttribute('file');
|
||||
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
|
||||
this.texture = image.texture.baseTexture;
|
||||
|
||||
var data = {};
|
||||
var info = responseXML.getElementsByTagName('info')[0];
|
||||
var common = responseXML.getElementsByTagName('common')[0];
|
||||
data.font = info.getAttribute('face');
|
||||
data.size = parseInt(info.getAttribute('size'), 10);
|
||||
data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10);
|
||||
data.chars = {};
|
||||
|
||||
//parse letters
|
||||
var letters = responseXML.getElementsByTagName('char');
|
||||
|
||||
for (var i = 0; i < letters.length; i++)
|
||||
{
|
||||
var charCode = parseInt(letters[i].getAttribute('id'), 10);
|
||||
|
||||
var textureRect = new PIXI.Rectangle(
|
||||
parseInt(letters[i].getAttribute('x'), 10),
|
||||
parseInt(letters[i].getAttribute('y'), 10),
|
||||
parseInt(letters[i].getAttribute('width'), 10),
|
||||
parseInt(letters[i].getAttribute('height'), 10)
|
||||
);
|
||||
|
||||
data.chars[charCode] = {
|
||||
xOffset: parseInt(letters[i].getAttribute('xoffset'), 10),
|
||||
yOffset: parseInt(letters[i].getAttribute('yoffset'), 10),
|
||||
xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10),
|
||||
kerning: {},
|
||||
texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect)
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
//parse kernings
|
||||
var kernings = responseXML.getElementsByTagName('kerning');
|
||||
for (i = 0; i < kernings.length; i++)
|
||||
{
|
||||
var first = parseInt(kernings[i].getAttribute('first'), 10);
|
||||
var second = parseInt(kernings[i].getAttribute('second'), 10);
|
||||
var amount = parseInt(kernings[i].getAttribute('amount'), 10);
|
||||
|
||||
data.chars[second].kerning[first] = amount;
|
||||
|
||||
}
|
||||
|
||||
PIXI.BitmapText.fonts[data.font] = data;
|
||||
|
||||
var scope = this;
|
||||
image.addEventListener('loaded', function() {
|
||||
scope.onLoaded();
|
||||
});
|
||||
image.load();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoked when all files are loaded (xml/fnt and texture)
|
||||
*
|
||||
* @method onLoaded
|
||||
* @private
|
||||
*/
|
||||
PIXI.BitmapFontLoader.prototype.onLoaded = function()
|
||||
{
|
||||
this.dispatchEvent({type: 'loaded', content: this});
|
||||
};
|
||||
114
src/pixi/loaders/ImageLoader.js
Normal file
114
src/pixi/loaders/ImageLoader.js
Normal file
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* @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.fromFrameId()
|
||||
* When loaded this class will dispatch a 'loaded' event
|
||||
*
|
||||
* @class ImageLoader
|
||||
* @uses EventTarget
|
||||
* @constructor
|
||||
* @param url {String} The url of the image
|
||||
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
|
||||
*/
|
||||
PIXI.ImageLoader = function(url, crossorigin)
|
||||
{
|
||||
PIXI.EventTarget.call(this);
|
||||
|
||||
/**
|
||||
* The texture being loaded
|
||||
*
|
||||
* @property texture
|
||||
* @type Texture
|
||||
*/
|
||||
this.texture = PIXI.Texture.fromImage(url, crossorigin);
|
||||
|
||||
/**
|
||||
* if the image is loaded with loadFramedSpriteSheet
|
||||
* frames will contain the sprite sheet frames
|
||||
*
|
||||
*/
|
||||
this.frames = [];
|
||||
};
|
||||
|
||||
// constructor
|
||||
PIXI.ImageLoader.prototype.constructor = PIXI.ImageLoader;
|
||||
|
||||
/**
|
||||
* Loads image or takes it from cache
|
||||
*
|
||||
* @method load
|
||||
*/
|
||||
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
|
||||
*
|
||||
* @method onLoaded
|
||||
* @private
|
||||
*/
|
||||
PIXI.ImageLoader.prototype.onLoaded = function()
|
||||
{
|
||||
this.dispatchEvent({type: 'loaded', content: this});
|
||||
};
|
||||
|
||||
/**
|
||||
* Loads image and split it to uniform sized frames
|
||||
*
|
||||
*
|
||||
* @method loadFramedSpriteSheet
|
||||
* @param frameWidth {Number} width of each frame
|
||||
* @param frameHeight {Number} height of each frame
|
||||
* @param textureName {String} if given, the frames will be cached in <textureName>-<ord> format
|
||||
*/
|
||||
PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName)
|
||||
{
|
||||
this.frames = [];
|
||||
var cols = Math.floor(this.texture.width / frameWidth);
|
||||
var rows = Math.floor(this.texture.height / frameHeight);
|
||||
|
||||
var i=0;
|
||||
for (var y=0; y<rows; y++)
|
||||
{
|
||||
for (var x=0; x<cols; x++,i++)
|
||||
{
|
||||
var texture = new PIXI.Texture(this.texture, {
|
||||
x: x*frameWidth,
|
||||
y: y*frameHeight,
|
||||
width: frameWidth,
|
||||
height: frameHeight
|
||||
});
|
||||
|
||||
this.frames.push(texture);
|
||||
if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture;
|
||||
}
|
||||
}
|
||||
|
||||
if(!this.texture.baseTexture.hasLoaded)
|
||||
{
|
||||
var scope = this;
|
||||
this.texture.baseTexture.addEventListener('loaded', function() {
|
||||
scope.onLoaded();
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
this.onLoaded();
|
||||
}
|
||||
};
|
||||
203
src/pixi/loaders/JsonLoader.js
Normal file
203
src/pixi/loaders/JsonLoader.js
Normal file
@@ -0,0 +1,203 @@
|
||||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
/**
|
||||
* The json file loader is used to load in JSON data and parse it
|
||||
* When loaded this class will dispatch a 'loaded' event
|
||||
* If loading fails this class will dispatch an 'error' event
|
||||
*
|
||||
* @class JsonLoader
|
||||
* @uses EventTarget
|
||||
* @constructor
|
||||
* @param url {String} The url of the JSON file
|
||||
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
|
||||
*/
|
||||
PIXI.JsonLoader = function (url, crossorigin) {
|
||||
PIXI.EventTarget.call(this);
|
||||
|
||||
/**
|
||||
* The url of the bitmap font data
|
||||
*
|
||||
* @property url
|
||||
* @type String
|
||||
*/
|
||||
this.url = url;
|
||||
|
||||
/**
|
||||
* Whether the requests should be treated as cross origin
|
||||
*
|
||||
* @property crossorigin
|
||||
* @type Boolean
|
||||
*/
|
||||
this.crossorigin = crossorigin;
|
||||
|
||||
/**
|
||||
* [read-only] The base url of the bitmap font data
|
||||
*
|
||||
* @property baseUrl
|
||||
* @type String
|
||||
* @readOnly
|
||||
*/
|
||||
this.baseUrl = url.replace(/[^\/]*$/, '');
|
||||
|
||||
/**
|
||||
* [read-only] Whether the data has loaded yet
|
||||
*
|
||||
* @property loaded
|
||||
* @type Boolean
|
||||
* @readOnly
|
||||
*/
|
||||
this.loaded = false;
|
||||
|
||||
};
|
||||
|
||||
// constructor
|
||||
PIXI.JsonLoader.prototype.constructor = PIXI.JsonLoader;
|
||||
|
||||
/**
|
||||
* Loads the JSON data
|
||||
*
|
||||
* @method load
|
||||
*/
|
||||
PIXI.JsonLoader.prototype.load = function () {
|
||||
|
||||
var scope = this;
|
||||
|
||||
if(window.XDomainRequest)
|
||||
{
|
||||
this.ajaxRequest = new window.XDomainRequest();
|
||||
|
||||
// XDomainRequest has a few querks. Occasionally it will abort requests
|
||||
// A way to avoid this is to make sure ALL callbacks are set even if not used
|
||||
// More info here: http://stackoverflow.com/questions/15786966/xdomainrequest-aborts-post-on-ie-9
|
||||
this.ajaxRequest.timeout = 3000;
|
||||
|
||||
this.ajaxRequest.onerror = function () {
|
||||
scope.onError();
|
||||
};
|
||||
|
||||
this.ajaxRequest.ontimeout = function () {
|
||||
scope.onError();
|
||||
};
|
||||
|
||||
this.ajaxRequest.onprogress = function() {};
|
||||
|
||||
}
|
||||
else if (window.XMLHttpRequest)
|
||||
{
|
||||
this.ajaxRequest = new window.XMLHttpRequest();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP');
|
||||
}
|
||||
|
||||
|
||||
|
||||
this.ajaxRequest.onload = function(){
|
||||
|
||||
scope.onJSONLoaded();
|
||||
};
|
||||
|
||||
this.ajaxRequest.open('GET',this.url,true);
|
||||
|
||||
this.ajaxRequest.send();
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoke when JSON file is loaded
|
||||
*
|
||||
* @method onJSONLoaded
|
||||
* @private
|
||||
*/
|
||||
PIXI.JsonLoader.prototype.onJSONLoaded = function () {
|
||||
|
||||
if(!this.ajaxRequest.responseText )
|
||||
{
|
||||
this.onError();
|
||||
return;
|
||||
}
|
||||
|
||||
this.json = JSON.parse(this.ajaxRequest.responseText);
|
||||
|
||||
if(this.json.frames)
|
||||
{
|
||||
// sprite sheet
|
||||
var scope = this;
|
||||
var textureUrl = this.baseUrl + this.json.meta.image;
|
||||
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
|
||||
var frameData = this.json.frames;
|
||||
|
||||
this.texture = image.texture.baseTexture;
|
||||
image.addEventListener('loaded', function() {
|
||||
scope.onLoaded();
|
||||
});
|
||||
|
||||
for (var i in frameData) {
|
||||
var rect = frameData[i].frame;
|
||||
if (rect) {
|
||||
PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {
|
||||
x: rect.x,
|
||||
y: rect.y,
|
||||
width: rect.w,
|
||||
height: rect.h
|
||||
});
|
||||
|
||||
// check to see ifthe sprite ha been trimmed..
|
||||
if (frameData[i].trimmed) {
|
||||
|
||||
var texture = PIXI.TextureCache[i];
|
||||
|
||||
var actualSize = frameData[i].sourceSize;
|
||||
var realSize = frameData[i].spriteSourceSize;
|
||||
|
||||
texture.trim = new PIXI.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
image.load();
|
||||
|
||||
}
|
||||
else if(this.json.bones)
|
||||
{
|
||||
// spine animation
|
||||
var spineJsonParser = new spine.SkeletonJson();
|
||||
var skeletonData = spineJsonParser.readSkeletonData(this.json);
|
||||
PIXI.AnimCache[this.url] = skeletonData;
|
||||
this.onLoaded();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.onLoaded();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoke when json file loaded
|
||||
*
|
||||
* @method onLoaded
|
||||
* @private
|
||||
*/
|
||||
PIXI.JsonLoader.prototype.onLoaded = function () {
|
||||
this.loaded = true;
|
||||
this.dispatchEvent({
|
||||
type: 'loaded',
|
||||
content: this
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoke when error occured
|
||||
*
|
||||
* @method onError
|
||||
* @private
|
||||
*/
|
||||
PIXI.JsonLoader.prototype.onError = function () {
|
||||
|
||||
this.dispatchEvent({
|
||||
type: 'error',
|
||||
content: this
|
||||
});
|
||||
};
|
||||
82
src/pixi/loaders/SpineLoader.js
Normal file
82
src/pixi/loaders/SpineLoader.js
Normal file
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
* based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi
|
||||
*
|
||||
* Awesome JS run time provided by EsotericSoftware
|
||||
* https://github.com/EsotericSoftware/spine-runtimes
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* The Spine loader is used to load in JSON spine data
|
||||
* To generate the data you need to use http://esotericsoftware.com/ and export in the "JSON" format
|
||||
* Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load
|
||||
* See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source
|
||||
* You will need to generate a sprite sheet to accompany the spine data
|
||||
* When loaded this class will dispatch a "loaded" event
|
||||
*
|
||||
* @class Spine
|
||||
* @uses EventTarget
|
||||
* @constructor
|
||||
* @param url {String} The url of the JSON file
|
||||
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
|
||||
*/
|
||||
PIXI.SpineLoader = function(url, crossorigin)
|
||||
{
|
||||
PIXI.EventTarget.call(this);
|
||||
|
||||
/**
|
||||
* The url of the bitmap font data
|
||||
*
|
||||
* @property url
|
||||
* @type String
|
||||
*/
|
||||
this.url = url;
|
||||
|
||||
/**
|
||||
* Whether the requests should be treated as cross origin
|
||||
*
|
||||
* @property crossorigin
|
||||
* @type Boolean
|
||||
*/
|
||||
this.crossorigin = crossorigin;
|
||||
|
||||
/**
|
||||
* [read-only] Whether the data has loaded yet
|
||||
*
|
||||
* @property loaded
|
||||
* @type Boolean
|
||||
* @readOnly
|
||||
*/
|
||||
this.loaded = false;
|
||||
};
|
||||
|
||||
PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader;
|
||||
|
||||
/**
|
||||
* Loads the JSON data
|
||||
*
|
||||
* @method load
|
||||
*/
|
||||
PIXI.SpineLoader.prototype.load = function () {
|
||||
|
||||
var scope = this;
|
||||
var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
|
||||
jsonLoader.addEventListener("loaded", function (event) {
|
||||
scope.json = event.content.json;
|
||||
scope.onLoaded();
|
||||
});
|
||||
jsonLoader.load();
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoke when JSON file is loaded
|
||||
*
|
||||
* @method onLoaded
|
||||
* @private
|
||||
*/
|
||||
PIXI.SpineLoader.prototype.onLoaded = function () {
|
||||
this.loaded = true;
|
||||
this.dispatchEvent({type: "loaded", content: this});
|
||||
};
|
||||
|
||||
99
src/pixi/loaders/SpriteSheetLoader.js
Normal file
99
src/pixi/loaders/SpriteSheetLoader.js
Normal file
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
/**
|
||||
* The sprite sheet loader is used to load in JSON sprite sheet data
|
||||
* To generate the data you can use http://www.codeandweb.com/texturepacker and publish in the 'JSON' format
|
||||
* There is a free version so thats nice, although the paid version is great value for money.
|
||||
* It is highly recommended to use Sprite sheets (also know as a 'texture atlas') as it means sprites can be batched and drawn together for highly increased rendering speed.
|
||||
* Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFrameId()
|
||||
* This loader will load the image file that the Spritesheet points to as well as the data.
|
||||
* When loaded this class will dispatch a 'loaded' event
|
||||
*
|
||||
* @class SpriteSheetLoader
|
||||
* @uses EventTarget
|
||||
* @constructor
|
||||
* @param url {String} The url of the sprite sheet JSON file
|
||||
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
|
||||
*/
|
||||
PIXI.SpriteSheetLoader = function (url, crossorigin) {
|
||||
/*
|
||||
* 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);
|
||||
|
||||
/**
|
||||
* The url of the bitmap font data
|
||||
*
|
||||
* @property url
|
||||
* @type String
|
||||
*/
|
||||
this.url = url;
|
||||
|
||||
/**
|
||||
* Whether the requests should be treated as cross origin
|
||||
*
|
||||
* @property crossorigin
|
||||
* @type Boolean
|
||||
*/
|
||||
this.crossorigin = crossorigin;
|
||||
|
||||
/**
|
||||
* [read-only] The base url of the bitmap font data
|
||||
*
|
||||
* @property baseUrl
|
||||
* @type String
|
||||
* @readOnly
|
||||
*/
|
||||
this.baseUrl = url.replace(/[^\/]*$/, '');
|
||||
|
||||
/**
|
||||
* The texture being loaded
|
||||
*
|
||||
* @property texture
|
||||
* @type Texture
|
||||
*/
|
||||
this.texture = null;
|
||||
|
||||
/**
|
||||
* The frames of the sprite sheet
|
||||
*
|
||||
* @property frames
|
||||
* @type Object
|
||||
*/
|
||||
this.frames = {};
|
||||
};
|
||||
|
||||
// constructor
|
||||
PIXI.SpriteSheetLoader.prototype.constructor = PIXI.SpriteSheetLoader;
|
||||
|
||||
/**
|
||||
* This will begin loading the JSON file
|
||||
*
|
||||
* @method load
|
||||
*/
|
||||
PIXI.SpriteSheetLoader.prototype.load = function () {
|
||||
var scope = this;
|
||||
var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
|
||||
jsonLoader.addEventListener('loaded', function (event) {
|
||||
scope.json = event.content.json;
|
||||
scope.onLoaded();
|
||||
});
|
||||
jsonLoader.load();
|
||||
};
|
||||
|
||||
/**
|
||||
* Invoke when all files are loaded (json and texture)
|
||||
*
|
||||
* @method onLoaded
|
||||
* @private
|
||||
*/
|
||||
PIXI.SpriteSheetLoader.prototype.onLoaded = function () {
|
||||
this.dispatchEvent({
|
||||
type: 'loaded',
|
||||
content: this
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user