jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

JsonLoader extracted from SpriteSheetLoader

Browse source
This commit is contained in:
Vsevolod Strukchinsky 2013-05-30 20:55:57 +04:00
parent 7dc77bdbbc
commit 814784afcb
3 changed files with 121 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Gruntfile.js
View file

@ -39,6 +39,7 @@ module.exports = function(grunt) {
'<%= dirs.src %>/textures/Texture.js',
'<%= dirs.src %>/textures/RenderTexture.js',
'<%= dirs.src %>/loaders/AssetLoader.js',
'<%= dirs.src %>/loaders/JsonLoader.js',
'<%= dirs.src %>/loaders/SpriteSheetLoader.js',
'<%= dirs.src %>/loaders/ImageLoader.js',
'<%= dirs.src %>/loaders/BitmapFontLoader.js',

80
src/pixi/loaders/JsonLoader.js Normal file
View file

@ -0,0 +1,80 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* The sprite sheet loader is used to load in JSON sprite sheet data
* To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format
* There is a free version so thats nice, although the paid version is great value for money.
* It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed.
* Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
* This loader will also load the image file that the Spritesheet points to as well as the data.
* When loaded this class will dispatch a "loaded" event
* @class SpriteSheetLoader
* @extends EventTarget
* @constructor
* @param {String} url the url of the sprite sheet JSON file
* @param {Boolean} crossorigin
*/
PIXI.JsonLoader = function (url, crossorigin) {
PIXI.EventTarget.call(this);
this.url = url;
this.baseUrl = url.replace(/[^\/]*$/, "");
this.crossorigin = crossorigin;
};
// constructor
PIXI.JsonLoader.constructor = PIXI.JsonLoader;
/**
* This will begin loading the JSON file
*/
PIXI.JsonLoader.prototype.load = function () {
this.ajaxRequest = new AjaxRequest();
var scope = this;
this.ajaxRequest.onreadystatechange = function () {
scope.onJSONLoaded();
};
this.ajaxRequest.open("GET", this.url, true);
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json");
this.ajaxRequest.send(null);
};
/**
* Invoke when JSON file is loaded
* @private
*/
PIXI.JsonLoader.prototype.onJSONLoaded = function () {
if (this.ajaxRequest.readyState == 4) {
if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) {
this.json = JSON.parse(this.ajaxRequest.responseText);
this.onLoaded();
} else {
this.onError();
}
}
};
/**
* Invoke when json file loaded
* @private
*/
PIXI.JsonLoader.prototype.onLoaded = function () {
this.dispatchEvent({
type: "loaded",
content: this
});
};
/**
* Invoke when error occured
* @private
*/
PIXI.JsonLoader.prototype.onError = function () {
this.dispatchEvent({
type: "error",
content: this
});
};

90
src/pixi/loaders/SpriteSheetLoader.js
View file

@ -17,8 +17,7 @@
* @param {Boolean} crossorigin
*/
PIXI.SpriteSheetLoader = function(url, crossorigin)
{
PIXI.SpriteSheetLoader = function (url, crossorigin) {
/*
* i use texture packer to load the assets..
* http://www.codeandweb.com/texturepacker
@ -38,67 +37,58 @@ PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader;
/**
* This will begin loading the JSON file
*/
PIXI.SpriteSheetLoader.prototype.load = function()
{
this.ajaxRequest = new AjaxRequest();
PIXI.SpriteSheetLoader.prototype.load = function () {
var scope = this;
this.ajaxRequest.onreadystatechange = function()
{
var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
jsonLoader.addEventListener("loaded", function (event) {
scope.json = event.content.json;
scope.onJSONLoaded();
};
this.ajaxRequest.open("GET", this.url, true);
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json");
this.ajaxRequest.send(null)
});
jsonLoader.load();
};
/**
* Invoke when JSON file is loaded
* @private
*/
PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function()
{
if (this.ajaxRequest.readyState == 4)
{
if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
{
var jsonData = eval("(" + this.ajaxRequest.responseText + ")");
var textureUrl = this.baseUrl + jsonData.meta.image;
PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () {
var scope = this;
var textureUrl = this.baseUrl + this.json.meta.image;
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
var frameData = this.json.frames;
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
this.texture = image.texture.baseTexture;
var scope = this;
image.addEventListener("loaded", function(event) {
scope.onLoaded();
});
this.texture = image.texture.baseTexture;
image.addEventListener("loaded", function (event) {
scope.onLoaded();
});
var frameData = jsonData.frames;
for (var i in frameData)
{
var rect = frameData[i].frame;
if (rect)
{
PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h});
if(frameData[i].trimmed)
{
//var realSize = frameData[i].spriteSourceSize;
PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize;
PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w)
// calculate the offset!
}
}
}
for (var i in frameData) {
var rect = frameData[i].frame;
if (rect) {
PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {
x: rect.x,
y: rect.y,
width: rect.w,
height: rect.h
});
if (frameData[i].trimmed) {
//var realSize = frameData[i].spriteSourceSize;
PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize;
PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w)
// calculate the offset!
}
}
}
image.load();
}
}
image.load();
};
/**
* Invoke when all files are loaded (json and texture)
* @private
*/
PIXI.SpriteSheetLoader.prototype.onLoaded = function()
{
this.dispatchEvent({type: "loaded", content: this});
};
PIXI.SpriteSheetLoader.prototype.onLoaded = function () {
this.dispatchEvent({
type: "loaded",
content: this
});
};