diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index aca919c..e53c3a2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -77,7 +77,7 @@ * @member {number} * @private */ - this._backgroundColor = 0xFFFFFF; + this._backgroundColor = 0x000000; /** * The background color as an [R, G, B] array. diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index aca919c..e53c3a2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -77,7 +77,7 @@ * @member {number} * @private */ - this._backgroundColor = 0xFFFFFF; + this._backgroundColor = 0x000000; /** * The background color as an [R, G, B] array. diff --git a/src/core/sprites/webgl/SpriteBatchRenderer.js b/src/core/sprites/webgl/SpriteBatchRenderer.js index 8c246c8..2e69c97 100644 --- a/src/core/sprites/webgl/SpriteBatchRenderer.js +++ b/src/core/sprites/webgl/SpriteBatchRenderer.js @@ -28,7 +28,7 @@ * * @member {number} */ - this.vertSize = 12; + this.vertSize = 10; /** * @@ -273,21 +273,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x0; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -300,21 +294,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x1; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -327,21 +315,17 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x2; vertices[index++] = uvs.y2; - // color vertices[index++] = sprite.alpha; - // ---- + + // xy vertices[index++] = w1; @@ -354,17 +338,12 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x3; vertices[index++] = uvs.y3; - // color vertices[index++] = sprite.alpha; @@ -455,8 +434,7 @@ gl.vertexAttribPointer(this.shader.attributes.aPositionCoord, 2, gl.FLOAT, false, stride, 5 * 4); gl.vertexAttribPointer(this.shader.attributes.aScale, 2, gl.FLOAT, false, stride, 7 * 4); - gl.vertexAttribPointer(this.shader.attributes.aSkew, 2, gl.FLOAT, false, stride, 9 * 4); - gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 11 * 4); + gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 9 * 4); }; /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index aca919c..e53c3a2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -77,7 +77,7 @@ * @member {number} * @private */ - this._backgroundColor = 0xFFFFFF; + this._backgroundColor = 0x000000; /** * The background color as an [R, G, B] array. diff --git a/src/core/sprites/webgl/SpriteBatchRenderer.js b/src/core/sprites/webgl/SpriteBatchRenderer.js index 8c246c8..2e69c97 100644 --- a/src/core/sprites/webgl/SpriteBatchRenderer.js +++ b/src/core/sprites/webgl/SpriteBatchRenderer.js @@ -28,7 +28,7 @@ * * @member {number} */ - this.vertSize = 12; + this.vertSize = 10; /** * @@ -273,21 +273,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x0; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -300,21 +294,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x1; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -327,21 +315,17 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x2; vertices[index++] = uvs.y2; - // color vertices[index++] = sprite.alpha; - // ---- + + // xy vertices[index++] = w1; @@ -354,17 +338,12 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x3; vertices[index++] = uvs.y3; - // color vertices[index++] = sprite.alpha; @@ -455,8 +434,7 @@ gl.vertexAttribPointer(this.shader.attributes.aPositionCoord, 2, gl.FLOAT, false, stride, 5 * 4); gl.vertexAttribPointer(this.shader.attributes.aScale, 2, gl.FLOAT, false, stride, 7 * 4); - gl.vertexAttribPointer(this.shader.attributes.aSkew, 2, gl.FLOAT, false, stride, 9 * 4); - gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 11 * 4); + gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 9 * 4); }; /** diff --git a/src/core/sprites/webgl/SpriteBatchShader.js b/src/core/sprites/webgl/SpriteBatchShader.js index f689d1c..1f53252 100644 --- a/src/core/sprites/webgl/SpriteBatchShader.js +++ b/src/core/sprites/webgl/SpriteBatchShader.js @@ -18,7 +18,6 @@ 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', - 'attribute vec2 aSkew;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', @@ -34,8 +33,8 @@ 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', - ' v.x = (sv.x) * cos(aRotation + aSkew.y) - (sv.y) * sin(aRotation + aSkew.x);', - ' v.y = (sv.x) * sin(aRotation + aSkew.y) + (sv.y) * cos(aRotation + aSkew.x);', + ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', + ' v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);', ' v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;', @@ -69,7 +68,6 @@ { aPositionCoord: 0, aScale: 0, - aSkew: 0, aRotation: 0 } ); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index aca919c..e53c3a2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -77,7 +77,7 @@ * @member {number} * @private */ - this._backgroundColor = 0xFFFFFF; + this._backgroundColor = 0x000000; /** * The background color as an [R, G, B] array. diff --git a/src/core/sprites/webgl/SpriteBatchRenderer.js b/src/core/sprites/webgl/SpriteBatchRenderer.js index 8c246c8..2e69c97 100644 --- a/src/core/sprites/webgl/SpriteBatchRenderer.js +++ b/src/core/sprites/webgl/SpriteBatchRenderer.js @@ -28,7 +28,7 @@ * * @member {number} */ - this.vertSize = 12; + this.vertSize = 10; /** * @@ -273,21 +273,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x0; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -300,21 +294,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x1; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -327,21 +315,17 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x2; vertices[index++] = uvs.y2; - // color vertices[index++] = sprite.alpha; - // ---- + + // xy vertices[index++] = w1; @@ -354,17 +338,12 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x3; vertices[index++] = uvs.y3; - // color vertices[index++] = sprite.alpha; @@ -455,8 +434,7 @@ gl.vertexAttribPointer(this.shader.attributes.aPositionCoord, 2, gl.FLOAT, false, stride, 5 * 4); gl.vertexAttribPointer(this.shader.attributes.aScale, 2, gl.FLOAT, false, stride, 7 * 4); - gl.vertexAttribPointer(this.shader.attributes.aSkew, 2, gl.FLOAT, false, stride, 9 * 4); - gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 11 * 4); + gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 9 * 4); }; /** diff --git a/src/core/sprites/webgl/SpriteBatchShader.js b/src/core/sprites/webgl/SpriteBatchShader.js index f689d1c..1f53252 100644 --- a/src/core/sprites/webgl/SpriteBatchShader.js +++ b/src/core/sprites/webgl/SpriteBatchShader.js @@ -18,7 +18,6 @@ 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', - 'attribute vec2 aSkew;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', @@ -34,8 +33,8 @@ 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', - ' v.x = (sv.x) * cos(aRotation + aSkew.y) - (sv.y) * sin(aRotation + aSkew.x);', - ' v.y = (sv.x) * sin(aRotation + aSkew.y) + (sv.y) * cos(aRotation + aSkew.x);', + ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', + ' v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);', ' v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;', @@ -69,7 +68,6 @@ { aPositionCoord: 0, aScale: 0, - aSkew: 0, aRotation: 0 } ); diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js deleted file mode 100644 index 16ee7c8..0000000 --- a/src/loaders/ImageLoader.js +++ /dev/null @@ -1,116 +0,0 @@ -var core = require('../core'); - -/** - * 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 Texture.fromFrame() and Sprite.fromFrame() - * When loaded this class will dispatch a 'loaded' event - * - * @class - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the image - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function ImageLoader(url, crossorigin) -{ - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = core.Texture.fromImage(url, crossorigin); - - /** - * if the image is loaded with loadFramedSpriteSheet - * frames will contain the sprite sheet frames - * - * @member {Array} - * @readOnly - */ - this.frames = []; -} - -// constructor -ImageLoader.prototype.constructor = ImageLoader; -module.exports = ImageLoader; - -core.utils.eventTarget.mixin(ImageLoader.prototype); - -/** - * Loads image or takes it from cache - * - */ -ImageLoader.prototype.load = function () -{ - if (!this.texture.baseTexture.hasLoaded) - { - this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); - this.texture.baseTexture.on('error', this.onError.bind(this)); - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoked when image file is loaded or it is already cached and ready to use - * - * @private - */ -ImageLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { content: this }); -}; - -/** - * Invoked when image file failed loading - * - * @method onError - * @private - */ -ImageLoader.prototype.onError = function () -{ - this.emit('error', { content: this }); -}; - -/** - * Loads image and split it to uniform sized frames - * - * @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 - */ -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 core.Texture( - this.texture.baseTexture, - new core.math.Rectangle( - x * frameWidth, - y * frameHeight, - frameWidth, - frameHeight - ) - ); - - this.frames.push(texture); - - if (textureName) - { - core.utils.TextureCache[textureName + '-' + i] = texture; - } - } - } - - this.load(); -}; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index aca919c..e53c3a2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -77,7 +77,7 @@ * @member {number} * @private */ - this._backgroundColor = 0xFFFFFF; + this._backgroundColor = 0x000000; /** * The background color as an [R, G, B] array. diff --git a/src/core/sprites/webgl/SpriteBatchRenderer.js b/src/core/sprites/webgl/SpriteBatchRenderer.js index 8c246c8..2e69c97 100644 --- a/src/core/sprites/webgl/SpriteBatchRenderer.js +++ b/src/core/sprites/webgl/SpriteBatchRenderer.js @@ -28,7 +28,7 @@ * * @member {number} */ - this.vertSize = 12; + this.vertSize = 10; /** * @@ -273,21 +273,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x0; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -300,21 +294,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x1; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -327,21 +315,17 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x2; vertices[index++] = uvs.y2; - // color vertices[index++] = sprite.alpha; - // ---- + + // xy vertices[index++] = w1; @@ -354,17 +338,12 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x3; vertices[index++] = uvs.y3; - // color vertices[index++] = sprite.alpha; @@ -455,8 +434,7 @@ gl.vertexAttribPointer(this.shader.attributes.aPositionCoord, 2, gl.FLOAT, false, stride, 5 * 4); gl.vertexAttribPointer(this.shader.attributes.aScale, 2, gl.FLOAT, false, stride, 7 * 4); - gl.vertexAttribPointer(this.shader.attributes.aSkew, 2, gl.FLOAT, false, stride, 9 * 4); - gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 11 * 4); + gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 9 * 4); }; /** diff --git a/src/core/sprites/webgl/SpriteBatchShader.js b/src/core/sprites/webgl/SpriteBatchShader.js index f689d1c..1f53252 100644 --- a/src/core/sprites/webgl/SpriteBatchShader.js +++ b/src/core/sprites/webgl/SpriteBatchShader.js @@ -18,7 +18,6 @@ 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', - 'attribute vec2 aSkew;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', @@ -34,8 +33,8 @@ 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', - ' v.x = (sv.x) * cos(aRotation + aSkew.y) - (sv.y) * sin(aRotation + aSkew.x);', - ' v.y = (sv.x) * sin(aRotation + aSkew.y) + (sv.y) * cos(aRotation + aSkew.x);', + ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', + ' v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);', ' v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;', @@ -69,7 +68,6 @@ { aPositionCoord: 0, aScale: 0, - aSkew: 0, aRotation: 0 } ); diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js deleted file mode 100644 index 16ee7c8..0000000 --- a/src/loaders/ImageLoader.js +++ /dev/null @@ -1,116 +0,0 @@ -var core = require('../core'); - -/** - * 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 Texture.fromFrame() and Sprite.fromFrame() - * When loaded this class will dispatch a 'loaded' event - * - * @class - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the image - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function ImageLoader(url, crossorigin) -{ - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = core.Texture.fromImage(url, crossorigin); - - /** - * if the image is loaded with loadFramedSpriteSheet - * frames will contain the sprite sheet frames - * - * @member {Array} - * @readOnly - */ - this.frames = []; -} - -// constructor -ImageLoader.prototype.constructor = ImageLoader; -module.exports = ImageLoader; - -core.utils.eventTarget.mixin(ImageLoader.prototype); - -/** - * Loads image or takes it from cache - * - */ -ImageLoader.prototype.load = function () -{ - if (!this.texture.baseTexture.hasLoaded) - { - this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); - this.texture.baseTexture.on('error', this.onError.bind(this)); - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoked when image file is loaded or it is already cached and ready to use - * - * @private - */ -ImageLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { content: this }); -}; - -/** - * Invoked when image file failed loading - * - * @method onError - * @private - */ -ImageLoader.prototype.onError = function () -{ - this.emit('error', { content: this }); -}; - -/** - * Loads image and split it to uniform sized frames - * - * @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 - */ -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 core.Texture( - this.texture.baseTexture, - new core.math.Rectangle( - x * frameWidth, - y * frameHeight, - frameWidth, - frameHeight - ) - ); - - this.frames.push(texture); - - if (textureName) - { - core.utils.TextureCache[textureName + '-' + i] = texture; - } - } - } - - this.load(); -}; diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js deleted file mode 100644 index 7aabeb4..0000000 --- a/src/loaders/JsonLoader.js +++ /dev/null @@ -1,253 +0,0 @@ -var core = require('../core'), - spine = require('../spine/SpineRuntime'), - ImageLoader = require('./ImageLoader'), - SpineTextureLoader = require('./SpineTextureLoader'); - -/** - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function JsonLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -// constructor -JsonLoader.prototype.constructor = JsonLoader; -module.exports = JsonLoader; - -core.utils.eventTarget.mixin(JsonLoader.prototype); - -/** - * Loads the JSON data - * - */ -JsonLoader.prototype.load = function () -{ - if (window.XDomainRequest && this.crossorigin) - { - this.ajaxRequest = new window.XDomainRequest(); - - // XDomainRequest has a few quirks. 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 = this.onError.bind(this); - this.ajaxRequest.ontimeout = this.onError.bind(this); - - this.ajaxRequest.onprogress = function () - {}; - - this.ajaxRequest.onload = this.onJSONLoaded.bind(this); - } - else - { - if (window.XMLHttpRequest) - { - this.ajaxRequest = new window.XMLHttpRequest(); - } - else - { - this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP'); - } - - this.ajaxRequest.onreadystatechange = this.onReadyStateChanged.bind(this); - } - - this.ajaxRequest.open('GET',this.url,true); - - this.ajaxRequest.send(); -}; - -/** - * Bridge function to be able to use the more reliable onreadystatechange in XMLHttpRequest. - * - * @private - */ -JsonLoader.prototype.onReadyStateChanged = function () -{ - if (this.ajaxRequest.readyState === 4 && (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1)) - { - this.onJSONLoaded(); - } -}; - -/** - * Invoke when JSON file is loaded - * - * @private - */ -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 textureUrl = this.baseUrl + this.json.meta.image; - var image = new ImageLoader(textureUrl, this.crossorigin); - var frameData = this.json.frames; - - this.texture = image.texture.baseTexture; - image.addEventListener('loaded', this.onLoaded.bind(this)); - image.addEventListener('error', this.onError.bind(this)); - - for (var i in frameData) - { - var rect = frameData[i].frame; - - if (rect) - { - var textureSize = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h); - var crop = textureSize.clone(); - var trim = null; - - // Check to see if the sprite is trimmed - if (frameData[i].trimmed) - { - var actualSize = frameData[i].sourceSize; - var realSize = frameData[i].spriteSourceSize; - trim = new core.math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); - } - core.utils.TextureCache[i] = new core.Texture(this.texture, textureSize, crop, trim); - } - } - - image.load(); - - } - else if (this.json.bones) - { - // check if the json was loaded before - if (core.utils.AnimCache[this.url]) - { - this.onLoaded(); - } - else - { - /** - * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files - * that correspond to the spine file are in the same base URL and that the .json and .atlas files - * have the same name - */ - var atlasPath = this.url.substr(0, this.url.lastIndexOf('.')) + '.atlas'; - var atlasLoader = new JsonLoader(atlasPath, this.crossorigin); - // save a copy of the current object for future reference // - var originalLoader = this; - // before loading the file, replace the "onJSONLoaded" function for our own // - atlasLoader.onJSONLoaded = function () - { - // at this point "this" points at the atlasLoader (JsonLoader) instance // - if (!this.ajaxRequest.responseText) - { - this.onError(); // FIXME: hmm, this is funny because we are not responding to errors yet - return; - } - // create a new instance of a spine texture loader for this spine object // - var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/'))); - // create a spine atlas using the loaded text and a spine texture loader instance // - var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader); - // now we use an atlas attachment loader // - var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas); - // spine animation - var spineJsonParser = new spine.SkeletonJson(attachmentLoader); - var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - core.utils.AnimCache[originalLoader.url] = skeletonData; - originalLoader.spine = skeletonData; - originalLoader.spineAtlas = spineAtlas; - originalLoader.spineAtlasLoader = atlasLoader; - // wait for textures to finish loading if needed - if (textureLoader.loadingCount > 0) - { - textureLoader.addEventListener('loadedBaseTexture', function (evt) - { - if (evt.content.content.loadingCount <= 0) - { - originalLoader.onLoaded(); - } - }); - } - else - { - originalLoader.onLoaded(); - } - }; - // start the loading // - atlasLoader.load(); - } - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoke when json file loaded - * - * @private - */ -JsonLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.dispatchEvent({ - type: 'loaded', - content: this - }); -}; - -/** - * Invoke when error occured - * - * @private - */ -JsonLoader.prototype.onError = function () -{ - - this.dispatchEvent({ - type: 'error', - content: this - }); -}; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index aca919c..e53c3a2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -77,7 +77,7 @@ * @member {number} * @private */ - this._backgroundColor = 0xFFFFFF; + this._backgroundColor = 0x000000; /** * The background color as an [R, G, B] array. diff --git a/src/core/sprites/webgl/SpriteBatchRenderer.js b/src/core/sprites/webgl/SpriteBatchRenderer.js index 8c246c8..2e69c97 100644 --- a/src/core/sprites/webgl/SpriteBatchRenderer.js +++ b/src/core/sprites/webgl/SpriteBatchRenderer.js @@ -28,7 +28,7 @@ * * @member {number} */ - this.vertSize = 12; + this.vertSize = 10; /** * @@ -273,21 +273,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x0; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -300,21 +294,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x1; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -327,21 +315,17 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x2; vertices[index++] = uvs.y2; - // color vertices[index++] = sprite.alpha; - // ---- + + // xy vertices[index++] = w1; @@ -354,17 +338,12 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x3; vertices[index++] = uvs.y3; - // color vertices[index++] = sprite.alpha; @@ -455,8 +434,7 @@ gl.vertexAttribPointer(this.shader.attributes.aPositionCoord, 2, gl.FLOAT, false, stride, 5 * 4); gl.vertexAttribPointer(this.shader.attributes.aScale, 2, gl.FLOAT, false, stride, 7 * 4); - gl.vertexAttribPointer(this.shader.attributes.aSkew, 2, gl.FLOAT, false, stride, 9 * 4); - gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 11 * 4); + gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 9 * 4); }; /** diff --git a/src/core/sprites/webgl/SpriteBatchShader.js b/src/core/sprites/webgl/SpriteBatchShader.js index f689d1c..1f53252 100644 --- a/src/core/sprites/webgl/SpriteBatchShader.js +++ b/src/core/sprites/webgl/SpriteBatchShader.js @@ -18,7 +18,6 @@ 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', - 'attribute vec2 aSkew;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', @@ -34,8 +33,8 @@ 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', - ' v.x = (sv.x) * cos(aRotation + aSkew.y) - (sv.y) * sin(aRotation + aSkew.x);', - ' v.y = (sv.x) * sin(aRotation + aSkew.y) + (sv.y) * cos(aRotation + aSkew.x);', + ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', + ' v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);', ' v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;', @@ -69,7 +68,6 @@ { aPositionCoord: 0, aScale: 0, - aSkew: 0, aRotation: 0 } ); diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js deleted file mode 100644 index 16ee7c8..0000000 --- a/src/loaders/ImageLoader.js +++ /dev/null @@ -1,116 +0,0 @@ -var core = require('../core'); - -/** - * 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 Texture.fromFrame() and Sprite.fromFrame() - * When loaded this class will dispatch a 'loaded' event - * - * @class - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the image - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function ImageLoader(url, crossorigin) -{ - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = core.Texture.fromImage(url, crossorigin); - - /** - * if the image is loaded with loadFramedSpriteSheet - * frames will contain the sprite sheet frames - * - * @member {Array} - * @readOnly - */ - this.frames = []; -} - -// constructor -ImageLoader.prototype.constructor = ImageLoader; -module.exports = ImageLoader; - -core.utils.eventTarget.mixin(ImageLoader.prototype); - -/** - * Loads image or takes it from cache - * - */ -ImageLoader.prototype.load = function () -{ - if (!this.texture.baseTexture.hasLoaded) - { - this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); - this.texture.baseTexture.on('error', this.onError.bind(this)); - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoked when image file is loaded or it is already cached and ready to use - * - * @private - */ -ImageLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { content: this }); -}; - -/** - * Invoked when image file failed loading - * - * @method onError - * @private - */ -ImageLoader.prototype.onError = function () -{ - this.emit('error', { content: this }); -}; - -/** - * Loads image and split it to uniform sized frames - * - * @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 - */ -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 core.Texture( - this.texture.baseTexture, - new core.math.Rectangle( - x * frameWidth, - y * frameHeight, - frameWidth, - frameHeight - ) - ); - - this.frames.push(texture); - - if (textureName) - { - core.utils.TextureCache[textureName + '-' + i] = texture; - } - } - } - - this.load(); -}; diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js deleted file mode 100644 index 7aabeb4..0000000 --- a/src/loaders/JsonLoader.js +++ /dev/null @@ -1,253 +0,0 @@ -var core = require('../core'), - spine = require('../spine/SpineRuntime'), - ImageLoader = require('./ImageLoader'), - SpineTextureLoader = require('./SpineTextureLoader'); - -/** - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function JsonLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -// constructor -JsonLoader.prototype.constructor = JsonLoader; -module.exports = JsonLoader; - -core.utils.eventTarget.mixin(JsonLoader.prototype); - -/** - * Loads the JSON data - * - */ -JsonLoader.prototype.load = function () -{ - if (window.XDomainRequest && this.crossorigin) - { - this.ajaxRequest = new window.XDomainRequest(); - - // XDomainRequest has a few quirks. 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 = this.onError.bind(this); - this.ajaxRequest.ontimeout = this.onError.bind(this); - - this.ajaxRequest.onprogress = function () - {}; - - this.ajaxRequest.onload = this.onJSONLoaded.bind(this); - } - else - { - if (window.XMLHttpRequest) - { - this.ajaxRequest = new window.XMLHttpRequest(); - } - else - { - this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP'); - } - - this.ajaxRequest.onreadystatechange = this.onReadyStateChanged.bind(this); - } - - this.ajaxRequest.open('GET',this.url,true); - - this.ajaxRequest.send(); -}; - -/** - * Bridge function to be able to use the more reliable onreadystatechange in XMLHttpRequest. - * - * @private - */ -JsonLoader.prototype.onReadyStateChanged = function () -{ - if (this.ajaxRequest.readyState === 4 && (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1)) - { - this.onJSONLoaded(); - } -}; - -/** - * Invoke when JSON file is loaded - * - * @private - */ -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 textureUrl = this.baseUrl + this.json.meta.image; - var image = new ImageLoader(textureUrl, this.crossorigin); - var frameData = this.json.frames; - - this.texture = image.texture.baseTexture; - image.addEventListener('loaded', this.onLoaded.bind(this)); - image.addEventListener('error', this.onError.bind(this)); - - for (var i in frameData) - { - var rect = frameData[i].frame; - - if (rect) - { - var textureSize = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h); - var crop = textureSize.clone(); - var trim = null; - - // Check to see if the sprite is trimmed - if (frameData[i].trimmed) - { - var actualSize = frameData[i].sourceSize; - var realSize = frameData[i].spriteSourceSize; - trim = new core.math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); - } - core.utils.TextureCache[i] = new core.Texture(this.texture, textureSize, crop, trim); - } - } - - image.load(); - - } - else if (this.json.bones) - { - // check if the json was loaded before - if (core.utils.AnimCache[this.url]) - { - this.onLoaded(); - } - else - { - /** - * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files - * that correspond to the spine file are in the same base URL and that the .json and .atlas files - * have the same name - */ - var atlasPath = this.url.substr(0, this.url.lastIndexOf('.')) + '.atlas'; - var atlasLoader = new JsonLoader(atlasPath, this.crossorigin); - // save a copy of the current object for future reference // - var originalLoader = this; - // before loading the file, replace the "onJSONLoaded" function for our own // - atlasLoader.onJSONLoaded = function () - { - // at this point "this" points at the atlasLoader (JsonLoader) instance // - if (!this.ajaxRequest.responseText) - { - this.onError(); // FIXME: hmm, this is funny because we are not responding to errors yet - return; - } - // create a new instance of a spine texture loader for this spine object // - var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/'))); - // create a spine atlas using the loaded text and a spine texture loader instance // - var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader); - // now we use an atlas attachment loader // - var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas); - // spine animation - var spineJsonParser = new spine.SkeletonJson(attachmentLoader); - var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - core.utils.AnimCache[originalLoader.url] = skeletonData; - originalLoader.spine = skeletonData; - originalLoader.spineAtlas = spineAtlas; - originalLoader.spineAtlasLoader = atlasLoader; - // wait for textures to finish loading if needed - if (textureLoader.loadingCount > 0) - { - textureLoader.addEventListener('loadedBaseTexture', function (evt) - { - if (evt.content.content.loadingCount <= 0) - { - originalLoader.onLoaded(); - } - }); - } - else - { - originalLoader.onLoaded(); - } - }; - // start the loading // - atlasLoader.load(); - } - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoke when json file loaded - * - * @private - */ -JsonLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.dispatchEvent({ - type: 'loaded', - content: this - }); -}; - -/** - * Invoke when error occured - * - * @private - */ -JsonLoader.prototype.onError = function () -{ - - this.dispatchEvent({ - type: 'error', - content: this - }); -}; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js deleted file mode 100644 index 69bae21..0000000 --- a/src/loaders/SpineLoader.js +++ /dev/null @@ -1,84 +0,0 @@ -var core = require('../core'), - 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 - * - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function SpineLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -SpineLoader.prototype.constructor = SpineLoader; -module.exports = SpineLoader; - -core.utils.eventTarget.mixin(SpineLoader.prototype); - -/** - * Loads the JSON data - * - */ -SpineLoader.prototype.load = function () -{ - var scope = this; - 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. - * - * @private - */ -SpineLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.emit('loaded', { content: this }); -}; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index aca919c..e53c3a2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -77,7 +77,7 @@ * @member {number} * @private */ - this._backgroundColor = 0xFFFFFF; + this._backgroundColor = 0x000000; /** * The background color as an [R, G, B] array. diff --git a/src/core/sprites/webgl/SpriteBatchRenderer.js b/src/core/sprites/webgl/SpriteBatchRenderer.js index 8c246c8..2e69c97 100644 --- a/src/core/sprites/webgl/SpriteBatchRenderer.js +++ b/src/core/sprites/webgl/SpriteBatchRenderer.js @@ -28,7 +28,7 @@ * * @member {number} */ - this.vertSize = 12; + this.vertSize = 10; /** * @@ -273,21 +273,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x0; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -300,21 +294,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x1; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -327,21 +315,17 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x2; vertices[index++] = uvs.y2; - // color vertices[index++] = sprite.alpha; - // ---- + + // xy vertices[index++] = w1; @@ -354,17 +338,12 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x3; vertices[index++] = uvs.y3; - // color vertices[index++] = sprite.alpha; @@ -455,8 +434,7 @@ gl.vertexAttribPointer(this.shader.attributes.aPositionCoord, 2, gl.FLOAT, false, stride, 5 * 4); gl.vertexAttribPointer(this.shader.attributes.aScale, 2, gl.FLOAT, false, stride, 7 * 4); - gl.vertexAttribPointer(this.shader.attributes.aSkew, 2, gl.FLOAT, false, stride, 9 * 4); - gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 11 * 4); + gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 9 * 4); }; /** diff --git a/src/core/sprites/webgl/SpriteBatchShader.js b/src/core/sprites/webgl/SpriteBatchShader.js index f689d1c..1f53252 100644 --- a/src/core/sprites/webgl/SpriteBatchShader.js +++ b/src/core/sprites/webgl/SpriteBatchShader.js @@ -18,7 +18,6 @@ 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', - 'attribute vec2 aSkew;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', @@ -34,8 +33,8 @@ 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', - ' v.x = (sv.x) * cos(aRotation + aSkew.y) - (sv.y) * sin(aRotation + aSkew.x);', - ' v.y = (sv.x) * sin(aRotation + aSkew.y) + (sv.y) * cos(aRotation + aSkew.x);', + ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', + ' v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);', ' v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;', @@ -69,7 +68,6 @@ { aPositionCoord: 0, aScale: 0, - aSkew: 0, aRotation: 0 } ); diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js deleted file mode 100644 index 16ee7c8..0000000 --- a/src/loaders/ImageLoader.js +++ /dev/null @@ -1,116 +0,0 @@ -var core = require('../core'); - -/** - * 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 Texture.fromFrame() and Sprite.fromFrame() - * When loaded this class will dispatch a 'loaded' event - * - * @class - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the image - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function ImageLoader(url, crossorigin) -{ - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = core.Texture.fromImage(url, crossorigin); - - /** - * if the image is loaded with loadFramedSpriteSheet - * frames will contain the sprite sheet frames - * - * @member {Array} - * @readOnly - */ - this.frames = []; -} - -// constructor -ImageLoader.prototype.constructor = ImageLoader; -module.exports = ImageLoader; - -core.utils.eventTarget.mixin(ImageLoader.prototype); - -/** - * Loads image or takes it from cache - * - */ -ImageLoader.prototype.load = function () -{ - if (!this.texture.baseTexture.hasLoaded) - { - this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); - this.texture.baseTexture.on('error', this.onError.bind(this)); - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoked when image file is loaded or it is already cached and ready to use - * - * @private - */ -ImageLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { content: this }); -}; - -/** - * Invoked when image file failed loading - * - * @method onError - * @private - */ -ImageLoader.prototype.onError = function () -{ - this.emit('error', { content: this }); -}; - -/** - * Loads image and split it to uniform sized frames - * - * @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 - */ -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 core.Texture( - this.texture.baseTexture, - new core.math.Rectangle( - x * frameWidth, - y * frameHeight, - frameWidth, - frameHeight - ) - ); - - this.frames.push(texture); - - if (textureName) - { - core.utils.TextureCache[textureName + '-' + i] = texture; - } - } - } - - this.load(); -}; diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js deleted file mode 100644 index 7aabeb4..0000000 --- a/src/loaders/JsonLoader.js +++ /dev/null @@ -1,253 +0,0 @@ -var core = require('../core'), - spine = require('../spine/SpineRuntime'), - ImageLoader = require('./ImageLoader'), - SpineTextureLoader = require('./SpineTextureLoader'); - -/** - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function JsonLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -// constructor -JsonLoader.prototype.constructor = JsonLoader; -module.exports = JsonLoader; - -core.utils.eventTarget.mixin(JsonLoader.prototype); - -/** - * Loads the JSON data - * - */ -JsonLoader.prototype.load = function () -{ - if (window.XDomainRequest && this.crossorigin) - { - this.ajaxRequest = new window.XDomainRequest(); - - // XDomainRequest has a few quirks. 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 = this.onError.bind(this); - this.ajaxRequest.ontimeout = this.onError.bind(this); - - this.ajaxRequest.onprogress = function () - {}; - - this.ajaxRequest.onload = this.onJSONLoaded.bind(this); - } - else - { - if (window.XMLHttpRequest) - { - this.ajaxRequest = new window.XMLHttpRequest(); - } - else - { - this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP'); - } - - this.ajaxRequest.onreadystatechange = this.onReadyStateChanged.bind(this); - } - - this.ajaxRequest.open('GET',this.url,true); - - this.ajaxRequest.send(); -}; - -/** - * Bridge function to be able to use the more reliable onreadystatechange in XMLHttpRequest. - * - * @private - */ -JsonLoader.prototype.onReadyStateChanged = function () -{ - if (this.ajaxRequest.readyState === 4 && (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1)) - { - this.onJSONLoaded(); - } -}; - -/** - * Invoke when JSON file is loaded - * - * @private - */ -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 textureUrl = this.baseUrl + this.json.meta.image; - var image = new ImageLoader(textureUrl, this.crossorigin); - var frameData = this.json.frames; - - this.texture = image.texture.baseTexture; - image.addEventListener('loaded', this.onLoaded.bind(this)); - image.addEventListener('error', this.onError.bind(this)); - - for (var i in frameData) - { - var rect = frameData[i].frame; - - if (rect) - { - var textureSize = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h); - var crop = textureSize.clone(); - var trim = null; - - // Check to see if the sprite is trimmed - if (frameData[i].trimmed) - { - var actualSize = frameData[i].sourceSize; - var realSize = frameData[i].spriteSourceSize; - trim = new core.math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); - } - core.utils.TextureCache[i] = new core.Texture(this.texture, textureSize, crop, trim); - } - } - - image.load(); - - } - else if (this.json.bones) - { - // check if the json was loaded before - if (core.utils.AnimCache[this.url]) - { - this.onLoaded(); - } - else - { - /** - * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files - * that correspond to the spine file are in the same base URL and that the .json and .atlas files - * have the same name - */ - var atlasPath = this.url.substr(0, this.url.lastIndexOf('.')) + '.atlas'; - var atlasLoader = new JsonLoader(atlasPath, this.crossorigin); - // save a copy of the current object for future reference // - var originalLoader = this; - // before loading the file, replace the "onJSONLoaded" function for our own // - atlasLoader.onJSONLoaded = function () - { - // at this point "this" points at the atlasLoader (JsonLoader) instance // - if (!this.ajaxRequest.responseText) - { - this.onError(); // FIXME: hmm, this is funny because we are not responding to errors yet - return; - } - // create a new instance of a spine texture loader for this spine object // - var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/'))); - // create a spine atlas using the loaded text and a spine texture loader instance // - var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader); - // now we use an atlas attachment loader // - var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas); - // spine animation - var spineJsonParser = new spine.SkeletonJson(attachmentLoader); - var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - core.utils.AnimCache[originalLoader.url] = skeletonData; - originalLoader.spine = skeletonData; - originalLoader.spineAtlas = spineAtlas; - originalLoader.spineAtlasLoader = atlasLoader; - // wait for textures to finish loading if needed - if (textureLoader.loadingCount > 0) - { - textureLoader.addEventListener('loadedBaseTexture', function (evt) - { - if (evt.content.content.loadingCount <= 0) - { - originalLoader.onLoaded(); - } - }); - } - else - { - originalLoader.onLoaded(); - } - }; - // start the loading // - atlasLoader.load(); - } - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoke when json file loaded - * - * @private - */ -JsonLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.dispatchEvent({ - type: 'loaded', - content: this - }); -}; - -/** - * Invoke when error occured - * - * @private - */ -JsonLoader.prototype.onError = function () -{ - - this.dispatchEvent({ - type: 'error', - content: this - }); -}; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js deleted file mode 100644 index 69bae21..0000000 --- a/src/loaders/SpineLoader.js +++ /dev/null @@ -1,84 +0,0 @@ -var core = require('../core'), - 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 - * - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function SpineLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -SpineLoader.prototype.constructor = SpineLoader; -module.exports = SpineLoader; - -core.utils.eventTarget.mixin(SpineLoader.prototype); - -/** - * Loads the JSON data - * - */ -SpineLoader.prototype.load = function () -{ - var scope = this; - 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. - * - * @private - */ -SpineLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.emit('loaded', { content: this }); -}; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js deleted file mode 100644 index a554e9d..0000000 --- a/src/loaders/SpriteSheetLoader.js +++ /dev/null @@ -1,93 +0,0 @@ -var core = require('../core'), - 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 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 - * @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 - */ -function SpriteSheetLoader(url, crossorigin) -{ - - /** - * The url of the atlas data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = null; - - /** - * The frames of the sprite sheet - * - * @member {object} - */ - this.frames = {}; -} - -// constructor -SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; -module.exports = SpriteSheetLoader; - -core.utils.eventTarget.mixin(SpriteSheetLoader.prototype); - -/** - * This will begin loading the JSON file - * - */ -SpriteSheetLoader.prototype.load = function () -{ - var scope = this; - 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) - * - * @private - */ -SpriteSheetLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { - content: this - }); -}; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index aca919c..e53c3a2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -77,7 +77,7 @@ * @member {number} * @private */ - this._backgroundColor = 0xFFFFFF; + this._backgroundColor = 0x000000; /** * The background color as an [R, G, B] array. diff --git a/src/core/sprites/webgl/SpriteBatchRenderer.js b/src/core/sprites/webgl/SpriteBatchRenderer.js index 8c246c8..2e69c97 100644 --- a/src/core/sprites/webgl/SpriteBatchRenderer.js +++ b/src/core/sprites/webgl/SpriteBatchRenderer.js @@ -28,7 +28,7 @@ * * @member {number} */ - this.vertSize = 12; + this.vertSize = 10; /** * @@ -273,21 +273,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x0; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -300,21 +294,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x1; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -327,21 +315,17 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x2; vertices[index++] = uvs.y2; - // color vertices[index++] = sprite.alpha; - // ---- + + // xy vertices[index++] = w1; @@ -354,17 +338,12 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x3; vertices[index++] = uvs.y3; - // color vertices[index++] = sprite.alpha; @@ -455,8 +434,7 @@ gl.vertexAttribPointer(this.shader.attributes.aPositionCoord, 2, gl.FLOAT, false, stride, 5 * 4); gl.vertexAttribPointer(this.shader.attributes.aScale, 2, gl.FLOAT, false, stride, 7 * 4); - gl.vertexAttribPointer(this.shader.attributes.aSkew, 2, gl.FLOAT, false, stride, 9 * 4); - gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 11 * 4); + gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 9 * 4); }; /** diff --git a/src/core/sprites/webgl/SpriteBatchShader.js b/src/core/sprites/webgl/SpriteBatchShader.js index f689d1c..1f53252 100644 --- a/src/core/sprites/webgl/SpriteBatchShader.js +++ b/src/core/sprites/webgl/SpriteBatchShader.js @@ -18,7 +18,6 @@ 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', - 'attribute vec2 aSkew;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', @@ -34,8 +33,8 @@ 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', - ' v.x = (sv.x) * cos(aRotation + aSkew.y) - (sv.y) * sin(aRotation + aSkew.x);', - ' v.y = (sv.x) * sin(aRotation + aSkew.y) + (sv.y) * cos(aRotation + aSkew.x);', + ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', + ' v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);', ' v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;', @@ -69,7 +68,6 @@ { aPositionCoord: 0, aScale: 0, - aSkew: 0, aRotation: 0 } ); diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js deleted file mode 100644 index 16ee7c8..0000000 --- a/src/loaders/ImageLoader.js +++ /dev/null @@ -1,116 +0,0 @@ -var core = require('../core'); - -/** - * 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 Texture.fromFrame() and Sprite.fromFrame() - * When loaded this class will dispatch a 'loaded' event - * - * @class - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the image - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function ImageLoader(url, crossorigin) -{ - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = core.Texture.fromImage(url, crossorigin); - - /** - * if the image is loaded with loadFramedSpriteSheet - * frames will contain the sprite sheet frames - * - * @member {Array} - * @readOnly - */ - this.frames = []; -} - -// constructor -ImageLoader.prototype.constructor = ImageLoader; -module.exports = ImageLoader; - -core.utils.eventTarget.mixin(ImageLoader.prototype); - -/** - * Loads image or takes it from cache - * - */ -ImageLoader.prototype.load = function () -{ - if (!this.texture.baseTexture.hasLoaded) - { - this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); - this.texture.baseTexture.on('error', this.onError.bind(this)); - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoked when image file is loaded or it is already cached and ready to use - * - * @private - */ -ImageLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { content: this }); -}; - -/** - * Invoked when image file failed loading - * - * @method onError - * @private - */ -ImageLoader.prototype.onError = function () -{ - this.emit('error', { content: this }); -}; - -/** - * Loads image and split it to uniform sized frames - * - * @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 - */ -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 core.Texture( - this.texture.baseTexture, - new core.math.Rectangle( - x * frameWidth, - y * frameHeight, - frameWidth, - frameHeight - ) - ); - - this.frames.push(texture); - - if (textureName) - { - core.utils.TextureCache[textureName + '-' + i] = texture; - } - } - } - - this.load(); -}; diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js deleted file mode 100644 index 7aabeb4..0000000 --- a/src/loaders/JsonLoader.js +++ /dev/null @@ -1,253 +0,0 @@ -var core = require('../core'), - spine = require('../spine/SpineRuntime'), - ImageLoader = require('./ImageLoader'), - SpineTextureLoader = require('./SpineTextureLoader'); - -/** - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function JsonLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -// constructor -JsonLoader.prototype.constructor = JsonLoader; -module.exports = JsonLoader; - -core.utils.eventTarget.mixin(JsonLoader.prototype); - -/** - * Loads the JSON data - * - */ -JsonLoader.prototype.load = function () -{ - if (window.XDomainRequest && this.crossorigin) - { - this.ajaxRequest = new window.XDomainRequest(); - - // XDomainRequest has a few quirks. 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 = this.onError.bind(this); - this.ajaxRequest.ontimeout = this.onError.bind(this); - - this.ajaxRequest.onprogress = function () - {}; - - this.ajaxRequest.onload = this.onJSONLoaded.bind(this); - } - else - { - if (window.XMLHttpRequest) - { - this.ajaxRequest = new window.XMLHttpRequest(); - } - else - { - this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP'); - } - - this.ajaxRequest.onreadystatechange = this.onReadyStateChanged.bind(this); - } - - this.ajaxRequest.open('GET',this.url,true); - - this.ajaxRequest.send(); -}; - -/** - * Bridge function to be able to use the more reliable onreadystatechange in XMLHttpRequest. - * - * @private - */ -JsonLoader.prototype.onReadyStateChanged = function () -{ - if (this.ajaxRequest.readyState === 4 && (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1)) - { - this.onJSONLoaded(); - } -}; - -/** - * Invoke when JSON file is loaded - * - * @private - */ -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 textureUrl = this.baseUrl + this.json.meta.image; - var image = new ImageLoader(textureUrl, this.crossorigin); - var frameData = this.json.frames; - - this.texture = image.texture.baseTexture; - image.addEventListener('loaded', this.onLoaded.bind(this)); - image.addEventListener('error', this.onError.bind(this)); - - for (var i in frameData) - { - var rect = frameData[i].frame; - - if (rect) - { - var textureSize = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h); - var crop = textureSize.clone(); - var trim = null; - - // Check to see if the sprite is trimmed - if (frameData[i].trimmed) - { - var actualSize = frameData[i].sourceSize; - var realSize = frameData[i].spriteSourceSize; - trim = new core.math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); - } - core.utils.TextureCache[i] = new core.Texture(this.texture, textureSize, crop, trim); - } - } - - image.load(); - - } - else if (this.json.bones) - { - // check if the json was loaded before - if (core.utils.AnimCache[this.url]) - { - this.onLoaded(); - } - else - { - /** - * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files - * that correspond to the spine file are in the same base URL and that the .json and .atlas files - * have the same name - */ - var atlasPath = this.url.substr(0, this.url.lastIndexOf('.')) + '.atlas'; - var atlasLoader = new JsonLoader(atlasPath, this.crossorigin); - // save a copy of the current object for future reference // - var originalLoader = this; - // before loading the file, replace the "onJSONLoaded" function for our own // - atlasLoader.onJSONLoaded = function () - { - // at this point "this" points at the atlasLoader (JsonLoader) instance // - if (!this.ajaxRequest.responseText) - { - this.onError(); // FIXME: hmm, this is funny because we are not responding to errors yet - return; - } - // create a new instance of a spine texture loader for this spine object // - var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/'))); - // create a spine atlas using the loaded text and a spine texture loader instance // - var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader); - // now we use an atlas attachment loader // - var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas); - // spine animation - var spineJsonParser = new spine.SkeletonJson(attachmentLoader); - var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - core.utils.AnimCache[originalLoader.url] = skeletonData; - originalLoader.spine = skeletonData; - originalLoader.spineAtlas = spineAtlas; - originalLoader.spineAtlasLoader = atlasLoader; - // wait for textures to finish loading if needed - if (textureLoader.loadingCount > 0) - { - textureLoader.addEventListener('loadedBaseTexture', function (evt) - { - if (evt.content.content.loadingCount <= 0) - { - originalLoader.onLoaded(); - } - }); - } - else - { - originalLoader.onLoaded(); - } - }; - // start the loading // - atlasLoader.load(); - } - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoke when json file loaded - * - * @private - */ -JsonLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.dispatchEvent({ - type: 'loaded', - content: this - }); -}; - -/** - * Invoke when error occured - * - * @private - */ -JsonLoader.prototype.onError = function () -{ - - this.dispatchEvent({ - type: 'error', - content: this - }); -}; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js deleted file mode 100644 index 69bae21..0000000 --- a/src/loaders/SpineLoader.js +++ /dev/null @@ -1,84 +0,0 @@ -var core = require('../core'), - 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 - * - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function SpineLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -SpineLoader.prototype.constructor = SpineLoader; -module.exports = SpineLoader; - -core.utils.eventTarget.mixin(SpineLoader.prototype); - -/** - * Loads the JSON data - * - */ -SpineLoader.prototype.load = function () -{ - var scope = this; - 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. - * - * @private - */ -SpineLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.emit('loaded', { content: this }); -}; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js deleted file mode 100644 index a554e9d..0000000 --- a/src/loaders/SpriteSheetLoader.js +++ /dev/null @@ -1,93 +0,0 @@ -var core = require('../core'), - 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 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 - * @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 - */ -function SpriteSheetLoader(url, crossorigin) -{ - - /** - * The url of the atlas data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = null; - - /** - * The frames of the sprite sheet - * - * @member {object} - */ - this.frames = {}; -} - -// constructor -SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; -module.exports = SpriteSheetLoader; - -core.utils.eventTarget.mixin(SpriteSheetLoader.prototype); - -/** - * This will begin loading the JSON file - * - */ -SpriteSheetLoader.prototype.load = function () -{ - var scope = this; - 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) - * - * @private - */ -SpriteSheetLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { - content: this - }); -}; diff --git a/src/loaders/index.js b/src/loaders/index.js index 3b83499..c269ffb 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -9,11 +9,11 @@ * @namespace PIXI */ module.exports = { - AssetLoader: require('./AssetLoader'), - AtlasLoader: require('./AtlasLoader'), - BitmapFontLoader: require('./BitmapFontLoader'), - ImageLoader: require('./ImageLoader'), - JsonLoader: require('./JsonLoader'), - SpineLoader: require('./SpineLoader'), - SpriteSheetLoader: require('./SpriteSheetLoader') + Loader: require('asset-loader'), + loader: require('./loader'), + + // parsers + textureParser: require('./textureParser'), + spritesheetParser: require('./spritesheetParser'), + spineAtlasParser: require('./spineAtlasParser') }; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index aca919c..e53c3a2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -77,7 +77,7 @@ * @member {number} * @private */ - this._backgroundColor = 0xFFFFFF; + this._backgroundColor = 0x000000; /** * The background color as an [R, G, B] array. diff --git a/src/core/sprites/webgl/SpriteBatchRenderer.js b/src/core/sprites/webgl/SpriteBatchRenderer.js index 8c246c8..2e69c97 100644 --- a/src/core/sprites/webgl/SpriteBatchRenderer.js +++ b/src/core/sprites/webgl/SpriteBatchRenderer.js @@ -28,7 +28,7 @@ * * @member {number} */ - this.vertSize = 12; + this.vertSize = 10; /** * @@ -273,21 +273,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x0; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -300,21 +294,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x1; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -327,21 +315,17 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x2; vertices[index++] = uvs.y2; - // color vertices[index++] = sprite.alpha; - // ---- + + // xy vertices[index++] = w1; @@ -354,17 +338,12 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x3; vertices[index++] = uvs.y3; - // color vertices[index++] = sprite.alpha; @@ -455,8 +434,7 @@ gl.vertexAttribPointer(this.shader.attributes.aPositionCoord, 2, gl.FLOAT, false, stride, 5 * 4); gl.vertexAttribPointer(this.shader.attributes.aScale, 2, gl.FLOAT, false, stride, 7 * 4); - gl.vertexAttribPointer(this.shader.attributes.aSkew, 2, gl.FLOAT, false, stride, 9 * 4); - gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 11 * 4); + gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 9 * 4); }; /** diff --git a/src/core/sprites/webgl/SpriteBatchShader.js b/src/core/sprites/webgl/SpriteBatchShader.js index f689d1c..1f53252 100644 --- a/src/core/sprites/webgl/SpriteBatchShader.js +++ b/src/core/sprites/webgl/SpriteBatchShader.js @@ -18,7 +18,6 @@ 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', - 'attribute vec2 aSkew;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', @@ -34,8 +33,8 @@ 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', - ' v.x = (sv.x) * cos(aRotation + aSkew.y) - (sv.y) * sin(aRotation + aSkew.x);', - ' v.y = (sv.x) * sin(aRotation + aSkew.y) + (sv.y) * cos(aRotation + aSkew.x);', + ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', + ' v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);', ' v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;', @@ -69,7 +68,6 @@ { aPositionCoord: 0, aScale: 0, - aSkew: 0, aRotation: 0 } ); diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js deleted file mode 100644 index 16ee7c8..0000000 --- a/src/loaders/ImageLoader.js +++ /dev/null @@ -1,116 +0,0 @@ -var core = require('../core'); - -/** - * 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 Texture.fromFrame() and Sprite.fromFrame() - * When loaded this class will dispatch a 'loaded' event - * - * @class - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the image - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function ImageLoader(url, crossorigin) -{ - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = core.Texture.fromImage(url, crossorigin); - - /** - * if the image is loaded with loadFramedSpriteSheet - * frames will contain the sprite sheet frames - * - * @member {Array} - * @readOnly - */ - this.frames = []; -} - -// constructor -ImageLoader.prototype.constructor = ImageLoader; -module.exports = ImageLoader; - -core.utils.eventTarget.mixin(ImageLoader.prototype); - -/** - * Loads image or takes it from cache - * - */ -ImageLoader.prototype.load = function () -{ - if (!this.texture.baseTexture.hasLoaded) - { - this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); - this.texture.baseTexture.on('error', this.onError.bind(this)); - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoked when image file is loaded or it is already cached and ready to use - * - * @private - */ -ImageLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { content: this }); -}; - -/** - * Invoked when image file failed loading - * - * @method onError - * @private - */ -ImageLoader.prototype.onError = function () -{ - this.emit('error', { content: this }); -}; - -/** - * Loads image and split it to uniform sized frames - * - * @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 - */ -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 core.Texture( - this.texture.baseTexture, - new core.math.Rectangle( - x * frameWidth, - y * frameHeight, - frameWidth, - frameHeight - ) - ); - - this.frames.push(texture); - - if (textureName) - { - core.utils.TextureCache[textureName + '-' + i] = texture; - } - } - } - - this.load(); -}; diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js deleted file mode 100644 index 7aabeb4..0000000 --- a/src/loaders/JsonLoader.js +++ /dev/null @@ -1,253 +0,0 @@ -var core = require('../core'), - spine = require('../spine/SpineRuntime'), - ImageLoader = require('./ImageLoader'), - SpineTextureLoader = require('./SpineTextureLoader'); - -/** - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function JsonLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -// constructor -JsonLoader.prototype.constructor = JsonLoader; -module.exports = JsonLoader; - -core.utils.eventTarget.mixin(JsonLoader.prototype); - -/** - * Loads the JSON data - * - */ -JsonLoader.prototype.load = function () -{ - if (window.XDomainRequest && this.crossorigin) - { - this.ajaxRequest = new window.XDomainRequest(); - - // XDomainRequest has a few quirks. 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 = this.onError.bind(this); - this.ajaxRequest.ontimeout = this.onError.bind(this); - - this.ajaxRequest.onprogress = function () - {}; - - this.ajaxRequest.onload = this.onJSONLoaded.bind(this); - } - else - { - if (window.XMLHttpRequest) - { - this.ajaxRequest = new window.XMLHttpRequest(); - } - else - { - this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP'); - } - - this.ajaxRequest.onreadystatechange = this.onReadyStateChanged.bind(this); - } - - this.ajaxRequest.open('GET',this.url,true); - - this.ajaxRequest.send(); -}; - -/** - * Bridge function to be able to use the more reliable onreadystatechange in XMLHttpRequest. - * - * @private - */ -JsonLoader.prototype.onReadyStateChanged = function () -{ - if (this.ajaxRequest.readyState === 4 && (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1)) - { - this.onJSONLoaded(); - } -}; - -/** - * Invoke when JSON file is loaded - * - * @private - */ -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 textureUrl = this.baseUrl + this.json.meta.image; - var image = new ImageLoader(textureUrl, this.crossorigin); - var frameData = this.json.frames; - - this.texture = image.texture.baseTexture; - image.addEventListener('loaded', this.onLoaded.bind(this)); - image.addEventListener('error', this.onError.bind(this)); - - for (var i in frameData) - { - var rect = frameData[i].frame; - - if (rect) - { - var textureSize = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h); - var crop = textureSize.clone(); - var trim = null; - - // Check to see if the sprite is trimmed - if (frameData[i].trimmed) - { - var actualSize = frameData[i].sourceSize; - var realSize = frameData[i].spriteSourceSize; - trim = new core.math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); - } - core.utils.TextureCache[i] = new core.Texture(this.texture, textureSize, crop, trim); - } - } - - image.load(); - - } - else if (this.json.bones) - { - // check if the json was loaded before - if (core.utils.AnimCache[this.url]) - { - this.onLoaded(); - } - else - { - /** - * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files - * that correspond to the spine file are in the same base URL and that the .json and .atlas files - * have the same name - */ - var atlasPath = this.url.substr(0, this.url.lastIndexOf('.')) + '.atlas'; - var atlasLoader = new JsonLoader(atlasPath, this.crossorigin); - // save a copy of the current object for future reference // - var originalLoader = this; - // before loading the file, replace the "onJSONLoaded" function for our own // - atlasLoader.onJSONLoaded = function () - { - // at this point "this" points at the atlasLoader (JsonLoader) instance // - if (!this.ajaxRequest.responseText) - { - this.onError(); // FIXME: hmm, this is funny because we are not responding to errors yet - return; - } - // create a new instance of a spine texture loader for this spine object // - var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/'))); - // create a spine atlas using the loaded text and a spine texture loader instance // - var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader); - // now we use an atlas attachment loader // - var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas); - // spine animation - var spineJsonParser = new spine.SkeletonJson(attachmentLoader); - var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - core.utils.AnimCache[originalLoader.url] = skeletonData; - originalLoader.spine = skeletonData; - originalLoader.spineAtlas = spineAtlas; - originalLoader.spineAtlasLoader = atlasLoader; - // wait for textures to finish loading if needed - if (textureLoader.loadingCount > 0) - { - textureLoader.addEventListener('loadedBaseTexture', function (evt) - { - if (evt.content.content.loadingCount <= 0) - { - originalLoader.onLoaded(); - } - }); - } - else - { - originalLoader.onLoaded(); - } - }; - // start the loading // - atlasLoader.load(); - } - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoke when json file loaded - * - * @private - */ -JsonLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.dispatchEvent({ - type: 'loaded', - content: this - }); -}; - -/** - * Invoke when error occured - * - * @private - */ -JsonLoader.prototype.onError = function () -{ - - this.dispatchEvent({ - type: 'error', - content: this - }); -}; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js deleted file mode 100644 index 69bae21..0000000 --- a/src/loaders/SpineLoader.js +++ /dev/null @@ -1,84 +0,0 @@ -var core = require('../core'), - 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 - * - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function SpineLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -SpineLoader.prototype.constructor = SpineLoader; -module.exports = SpineLoader; - -core.utils.eventTarget.mixin(SpineLoader.prototype); - -/** - * Loads the JSON data - * - */ -SpineLoader.prototype.load = function () -{ - var scope = this; - 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. - * - * @private - */ -SpineLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.emit('loaded', { content: this }); -}; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js deleted file mode 100644 index a554e9d..0000000 --- a/src/loaders/SpriteSheetLoader.js +++ /dev/null @@ -1,93 +0,0 @@ -var core = require('../core'), - 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 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 - * @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 - */ -function SpriteSheetLoader(url, crossorigin) -{ - - /** - * The url of the atlas data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = null; - - /** - * The frames of the sprite sheet - * - * @member {object} - */ - this.frames = {}; -} - -// constructor -SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; -module.exports = SpriteSheetLoader; - -core.utils.eventTarget.mixin(SpriteSheetLoader.prototype); - -/** - * This will begin loading the JSON file - * - */ -SpriteSheetLoader.prototype.load = function () -{ - var scope = this; - 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) - * - * @private - */ -SpriteSheetLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { - content: this - }); -}; diff --git a/src/loaders/index.js b/src/loaders/index.js index 3b83499..c269ffb 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -9,11 +9,11 @@ * @namespace PIXI */ module.exports = { - AssetLoader: require('./AssetLoader'), - AtlasLoader: require('./AtlasLoader'), - BitmapFontLoader: require('./BitmapFontLoader'), - ImageLoader: require('./ImageLoader'), - JsonLoader: require('./JsonLoader'), - SpineLoader: require('./SpineLoader'), - SpriteSheetLoader: require('./SpriteSheetLoader') + Loader: require('asset-loader'), + loader: require('./loader'), + + // parsers + textureParser: require('./textureParser'), + spritesheetParser: require('./spritesheetParser'), + spineAtlasParser: require('./spineAtlasParser') }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js new file mode 100644 index 0000000..b1d9c1d --- /dev/null +++ b/src/loaders/loader.js @@ -0,0 +1,16 @@ +var Loader = require('asset-loader'), + textureParser = require('./textureParser'), + spritesheetParser = require('./spritesheetParser'), + loader = new Loader(); + +loader + // parse any json strings into objects + .use(Loader.middleware.parsing.json()) + // parse any blob into more usable objects (e.g. Image) + .use(Loader.middleware.parsing.json()) + // parse any Image objects into textures + .use(textureParser()) + // parse any spritesheet data into multiple textures + .use(spritesheetParser()) + +module.exports = loader; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index aca919c..e53c3a2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -77,7 +77,7 @@ * @member {number} * @private */ - this._backgroundColor = 0xFFFFFF; + this._backgroundColor = 0x000000; /** * The background color as an [R, G, B] array. diff --git a/src/core/sprites/webgl/SpriteBatchRenderer.js b/src/core/sprites/webgl/SpriteBatchRenderer.js index 8c246c8..2e69c97 100644 --- a/src/core/sprites/webgl/SpriteBatchRenderer.js +++ b/src/core/sprites/webgl/SpriteBatchRenderer.js @@ -28,7 +28,7 @@ * * @member {number} */ - this.vertSize = 12; + this.vertSize = 10; /** * @@ -273,21 +273,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x0; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -300,21 +294,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x1; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -327,21 +315,17 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x2; vertices[index++] = uvs.y2; - // color vertices[index++] = sprite.alpha; - // ---- + + // xy vertices[index++] = w1; @@ -354,17 +338,12 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x3; vertices[index++] = uvs.y3; - // color vertices[index++] = sprite.alpha; @@ -455,8 +434,7 @@ gl.vertexAttribPointer(this.shader.attributes.aPositionCoord, 2, gl.FLOAT, false, stride, 5 * 4); gl.vertexAttribPointer(this.shader.attributes.aScale, 2, gl.FLOAT, false, stride, 7 * 4); - gl.vertexAttribPointer(this.shader.attributes.aSkew, 2, gl.FLOAT, false, stride, 9 * 4); - gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 11 * 4); + gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 9 * 4); }; /** diff --git a/src/core/sprites/webgl/SpriteBatchShader.js b/src/core/sprites/webgl/SpriteBatchShader.js index f689d1c..1f53252 100644 --- a/src/core/sprites/webgl/SpriteBatchShader.js +++ b/src/core/sprites/webgl/SpriteBatchShader.js @@ -18,7 +18,6 @@ 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', - 'attribute vec2 aSkew;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', @@ -34,8 +33,8 @@ 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', - ' v.x = (sv.x) * cos(aRotation + aSkew.y) - (sv.y) * sin(aRotation + aSkew.x);', - ' v.y = (sv.x) * sin(aRotation + aSkew.y) + (sv.y) * cos(aRotation + aSkew.x);', + ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', + ' v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);', ' v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;', @@ -69,7 +68,6 @@ { aPositionCoord: 0, aScale: 0, - aSkew: 0, aRotation: 0 } ); diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js deleted file mode 100644 index 16ee7c8..0000000 --- a/src/loaders/ImageLoader.js +++ /dev/null @@ -1,116 +0,0 @@ -var core = require('../core'); - -/** - * 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 Texture.fromFrame() and Sprite.fromFrame() - * When loaded this class will dispatch a 'loaded' event - * - * @class - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the image - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function ImageLoader(url, crossorigin) -{ - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = core.Texture.fromImage(url, crossorigin); - - /** - * if the image is loaded with loadFramedSpriteSheet - * frames will contain the sprite sheet frames - * - * @member {Array} - * @readOnly - */ - this.frames = []; -} - -// constructor -ImageLoader.prototype.constructor = ImageLoader; -module.exports = ImageLoader; - -core.utils.eventTarget.mixin(ImageLoader.prototype); - -/** - * Loads image or takes it from cache - * - */ -ImageLoader.prototype.load = function () -{ - if (!this.texture.baseTexture.hasLoaded) - { - this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); - this.texture.baseTexture.on('error', this.onError.bind(this)); - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoked when image file is loaded or it is already cached and ready to use - * - * @private - */ -ImageLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { content: this }); -}; - -/** - * Invoked when image file failed loading - * - * @method onError - * @private - */ -ImageLoader.prototype.onError = function () -{ - this.emit('error', { content: this }); -}; - -/** - * Loads image and split it to uniform sized frames - * - * @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 - */ -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 core.Texture( - this.texture.baseTexture, - new core.math.Rectangle( - x * frameWidth, - y * frameHeight, - frameWidth, - frameHeight - ) - ); - - this.frames.push(texture); - - if (textureName) - { - core.utils.TextureCache[textureName + '-' + i] = texture; - } - } - } - - this.load(); -}; diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js deleted file mode 100644 index 7aabeb4..0000000 --- a/src/loaders/JsonLoader.js +++ /dev/null @@ -1,253 +0,0 @@ -var core = require('../core'), - spine = require('../spine/SpineRuntime'), - ImageLoader = require('./ImageLoader'), - SpineTextureLoader = require('./SpineTextureLoader'); - -/** - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function JsonLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -// constructor -JsonLoader.prototype.constructor = JsonLoader; -module.exports = JsonLoader; - -core.utils.eventTarget.mixin(JsonLoader.prototype); - -/** - * Loads the JSON data - * - */ -JsonLoader.prototype.load = function () -{ - if (window.XDomainRequest && this.crossorigin) - { - this.ajaxRequest = new window.XDomainRequest(); - - // XDomainRequest has a few quirks. 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 = this.onError.bind(this); - this.ajaxRequest.ontimeout = this.onError.bind(this); - - this.ajaxRequest.onprogress = function () - {}; - - this.ajaxRequest.onload = this.onJSONLoaded.bind(this); - } - else - { - if (window.XMLHttpRequest) - { - this.ajaxRequest = new window.XMLHttpRequest(); - } - else - { - this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP'); - } - - this.ajaxRequest.onreadystatechange = this.onReadyStateChanged.bind(this); - } - - this.ajaxRequest.open('GET',this.url,true); - - this.ajaxRequest.send(); -}; - -/** - * Bridge function to be able to use the more reliable onreadystatechange in XMLHttpRequest. - * - * @private - */ -JsonLoader.prototype.onReadyStateChanged = function () -{ - if (this.ajaxRequest.readyState === 4 && (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1)) - { - this.onJSONLoaded(); - } -}; - -/** - * Invoke when JSON file is loaded - * - * @private - */ -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 textureUrl = this.baseUrl + this.json.meta.image; - var image = new ImageLoader(textureUrl, this.crossorigin); - var frameData = this.json.frames; - - this.texture = image.texture.baseTexture; - image.addEventListener('loaded', this.onLoaded.bind(this)); - image.addEventListener('error', this.onError.bind(this)); - - for (var i in frameData) - { - var rect = frameData[i].frame; - - if (rect) - { - var textureSize = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h); - var crop = textureSize.clone(); - var trim = null; - - // Check to see if the sprite is trimmed - if (frameData[i].trimmed) - { - var actualSize = frameData[i].sourceSize; - var realSize = frameData[i].spriteSourceSize; - trim = new core.math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); - } - core.utils.TextureCache[i] = new core.Texture(this.texture, textureSize, crop, trim); - } - } - - image.load(); - - } - else if (this.json.bones) - { - // check if the json was loaded before - if (core.utils.AnimCache[this.url]) - { - this.onLoaded(); - } - else - { - /** - * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files - * that correspond to the spine file are in the same base URL and that the .json and .atlas files - * have the same name - */ - var atlasPath = this.url.substr(0, this.url.lastIndexOf('.')) + '.atlas'; - var atlasLoader = new JsonLoader(atlasPath, this.crossorigin); - // save a copy of the current object for future reference // - var originalLoader = this; - // before loading the file, replace the "onJSONLoaded" function for our own // - atlasLoader.onJSONLoaded = function () - { - // at this point "this" points at the atlasLoader (JsonLoader) instance // - if (!this.ajaxRequest.responseText) - { - this.onError(); // FIXME: hmm, this is funny because we are not responding to errors yet - return; - } - // create a new instance of a spine texture loader for this spine object // - var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/'))); - // create a spine atlas using the loaded text and a spine texture loader instance // - var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader); - // now we use an atlas attachment loader // - var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas); - // spine animation - var spineJsonParser = new spine.SkeletonJson(attachmentLoader); - var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - core.utils.AnimCache[originalLoader.url] = skeletonData; - originalLoader.spine = skeletonData; - originalLoader.spineAtlas = spineAtlas; - originalLoader.spineAtlasLoader = atlasLoader; - // wait for textures to finish loading if needed - if (textureLoader.loadingCount > 0) - { - textureLoader.addEventListener('loadedBaseTexture', function (evt) - { - if (evt.content.content.loadingCount <= 0) - { - originalLoader.onLoaded(); - } - }); - } - else - { - originalLoader.onLoaded(); - } - }; - // start the loading // - atlasLoader.load(); - } - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoke when json file loaded - * - * @private - */ -JsonLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.dispatchEvent({ - type: 'loaded', - content: this - }); -}; - -/** - * Invoke when error occured - * - * @private - */ -JsonLoader.prototype.onError = function () -{ - - this.dispatchEvent({ - type: 'error', - content: this - }); -}; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js deleted file mode 100644 index 69bae21..0000000 --- a/src/loaders/SpineLoader.js +++ /dev/null @@ -1,84 +0,0 @@ -var core = require('../core'), - 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 - * - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function SpineLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -SpineLoader.prototype.constructor = SpineLoader; -module.exports = SpineLoader; - -core.utils.eventTarget.mixin(SpineLoader.prototype); - -/** - * Loads the JSON data - * - */ -SpineLoader.prototype.load = function () -{ - var scope = this; - 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. - * - * @private - */ -SpineLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.emit('loaded', { content: this }); -}; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js deleted file mode 100644 index a554e9d..0000000 --- a/src/loaders/SpriteSheetLoader.js +++ /dev/null @@ -1,93 +0,0 @@ -var core = require('../core'), - 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 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 - * @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 - */ -function SpriteSheetLoader(url, crossorigin) -{ - - /** - * The url of the atlas data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = null; - - /** - * The frames of the sprite sheet - * - * @member {object} - */ - this.frames = {}; -} - -// constructor -SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; -module.exports = SpriteSheetLoader; - -core.utils.eventTarget.mixin(SpriteSheetLoader.prototype); - -/** - * This will begin loading the JSON file - * - */ -SpriteSheetLoader.prototype.load = function () -{ - var scope = this; - 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) - * - * @private - */ -SpriteSheetLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { - content: this - }); -}; diff --git a/src/loaders/index.js b/src/loaders/index.js index 3b83499..c269ffb 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -9,11 +9,11 @@ * @namespace PIXI */ module.exports = { - AssetLoader: require('./AssetLoader'), - AtlasLoader: require('./AtlasLoader'), - BitmapFontLoader: require('./BitmapFontLoader'), - ImageLoader: require('./ImageLoader'), - JsonLoader: require('./JsonLoader'), - SpineLoader: require('./SpineLoader'), - SpriteSheetLoader: require('./SpriteSheetLoader') + Loader: require('asset-loader'), + loader: require('./loader'), + + // parsers + textureParser: require('./textureParser'), + spritesheetParser: require('./spritesheetParser'), + spineAtlasParser: require('./spineAtlasParser') }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js new file mode 100644 index 0000000..b1d9c1d --- /dev/null +++ b/src/loaders/loader.js @@ -0,0 +1,16 @@ +var Loader = require('asset-loader'), + textureParser = require('./textureParser'), + spritesheetParser = require('./spritesheetParser'), + loader = new Loader(); + +loader + // parse any json strings into objects + .use(Loader.middleware.parsing.json()) + // parse any blob into more usable objects (e.g. Image) + .use(Loader.middleware.parsing.json()) + // parse any Image objects into textures + .use(textureParser()) + // parse any spritesheet data into multiple textures + .use(spritesheetParser()) + +module.exports = loader; diff --git a/src/loaders/spineAtlasParser.js b/src/loaders/spineAtlasParser.js new file mode 100644 index 0000000..85849f2 --- /dev/null +++ b/src/loaders/spineAtlasParser.js @@ -0,0 +1,69 @@ +var Resource = require('asset-loader').Resource, + core = require('../core'), + spine = require('../spine'); + +module.exports = function () +{ + return function (resource, next) + { + // if this is a spritesheet object + if (resource.data && resource.data.bones) + { + /** + * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files + * that correspond to the spine file are in the same base URL and that the .json and .atlas files + * have the same name + */ + var atlasPath = resource.url.substr(0, resource.url.lastIndexOf('.')) + '.atlas'; + var atlasOptions = { crossOrigin: resource.crossOrigin, xhrType: Resource.XHR_RESPONSE_TYPE.TEXT }; + + this.loadResource(new Resource(atlasPath, atlasOptions), function (res) { + ///////////////////////////////////////////////// + // TODO: THIS IS OLD STYLE + + + // create a new instance of a spine texture loader for this spine object // + var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/'))); + + // create a spine atlas using the loaded text and a spine texture loader instance // + var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader); + + // now we use an atlas attachment loader // + var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas); + + // spine animation + var spineJsonParser = new spine.SkeletonJson(attachmentLoader); + var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); + + core.utils.AnimCache[originalLoader.url] = skeletonData; + originalLoader.spine = skeletonData; + originalLoader.spineAtlas = spineAtlas; + originalLoader.spineAtlasLoader = atlasLoader; + + // wait for textures to finish loading if needed + if (textureLoader.loadingCount > 0) + { + textureLoader.addEventListener('loadedBaseTexture', function (evt) + { + if (evt.content.content.loadingCount <= 0) + { + originalLoader.onLoaded(); + } + }); + } + else + { + originalLoader.onLoaded(); + } + + + ///////////////////////////////////////////////// + + next(); + }); + } + else { + next(); + } + }; +}; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index aca919c..e53c3a2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -77,7 +77,7 @@ * @member {number} * @private */ - this._backgroundColor = 0xFFFFFF; + this._backgroundColor = 0x000000; /** * The background color as an [R, G, B] array. diff --git a/src/core/sprites/webgl/SpriteBatchRenderer.js b/src/core/sprites/webgl/SpriteBatchRenderer.js index 8c246c8..2e69c97 100644 --- a/src/core/sprites/webgl/SpriteBatchRenderer.js +++ b/src/core/sprites/webgl/SpriteBatchRenderer.js @@ -28,7 +28,7 @@ * * @member {number} */ - this.vertSize = 12; + this.vertSize = 10; /** * @@ -273,21 +273,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x0; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -300,21 +294,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x1; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -327,21 +315,17 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x2; vertices[index++] = uvs.y2; - // color vertices[index++] = sprite.alpha; - // ---- + + // xy vertices[index++] = w1; @@ -354,17 +338,12 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x3; vertices[index++] = uvs.y3; - // color vertices[index++] = sprite.alpha; @@ -455,8 +434,7 @@ gl.vertexAttribPointer(this.shader.attributes.aPositionCoord, 2, gl.FLOAT, false, stride, 5 * 4); gl.vertexAttribPointer(this.shader.attributes.aScale, 2, gl.FLOAT, false, stride, 7 * 4); - gl.vertexAttribPointer(this.shader.attributes.aSkew, 2, gl.FLOAT, false, stride, 9 * 4); - gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 11 * 4); + gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 9 * 4); }; /** diff --git a/src/core/sprites/webgl/SpriteBatchShader.js b/src/core/sprites/webgl/SpriteBatchShader.js index f689d1c..1f53252 100644 --- a/src/core/sprites/webgl/SpriteBatchShader.js +++ b/src/core/sprites/webgl/SpriteBatchShader.js @@ -18,7 +18,6 @@ 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', - 'attribute vec2 aSkew;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', @@ -34,8 +33,8 @@ 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', - ' v.x = (sv.x) * cos(aRotation + aSkew.y) - (sv.y) * sin(aRotation + aSkew.x);', - ' v.y = (sv.x) * sin(aRotation + aSkew.y) + (sv.y) * cos(aRotation + aSkew.x);', + ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', + ' v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);', ' v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;', @@ -69,7 +68,6 @@ { aPositionCoord: 0, aScale: 0, - aSkew: 0, aRotation: 0 } ); diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js deleted file mode 100644 index 16ee7c8..0000000 --- a/src/loaders/ImageLoader.js +++ /dev/null @@ -1,116 +0,0 @@ -var core = require('../core'); - -/** - * 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 Texture.fromFrame() and Sprite.fromFrame() - * When loaded this class will dispatch a 'loaded' event - * - * @class - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the image - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function ImageLoader(url, crossorigin) -{ - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = core.Texture.fromImage(url, crossorigin); - - /** - * if the image is loaded with loadFramedSpriteSheet - * frames will contain the sprite sheet frames - * - * @member {Array} - * @readOnly - */ - this.frames = []; -} - -// constructor -ImageLoader.prototype.constructor = ImageLoader; -module.exports = ImageLoader; - -core.utils.eventTarget.mixin(ImageLoader.prototype); - -/** - * Loads image or takes it from cache - * - */ -ImageLoader.prototype.load = function () -{ - if (!this.texture.baseTexture.hasLoaded) - { - this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); - this.texture.baseTexture.on('error', this.onError.bind(this)); - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoked when image file is loaded or it is already cached and ready to use - * - * @private - */ -ImageLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { content: this }); -}; - -/** - * Invoked when image file failed loading - * - * @method onError - * @private - */ -ImageLoader.prototype.onError = function () -{ - this.emit('error', { content: this }); -}; - -/** - * Loads image and split it to uniform sized frames - * - * @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 - */ -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 core.Texture( - this.texture.baseTexture, - new core.math.Rectangle( - x * frameWidth, - y * frameHeight, - frameWidth, - frameHeight - ) - ); - - this.frames.push(texture); - - if (textureName) - { - core.utils.TextureCache[textureName + '-' + i] = texture; - } - } - } - - this.load(); -}; diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js deleted file mode 100644 index 7aabeb4..0000000 --- a/src/loaders/JsonLoader.js +++ /dev/null @@ -1,253 +0,0 @@ -var core = require('../core'), - spine = require('../spine/SpineRuntime'), - ImageLoader = require('./ImageLoader'), - SpineTextureLoader = require('./SpineTextureLoader'); - -/** - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function JsonLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -// constructor -JsonLoader.prototype.constructor = JsonLoader; -module.exports = JsonLoader; - -core.utils.eventTarget.mixin(JsonLoader.prototype); - -/** - * Loads the JSON data - * - */ -JsonLoader.prototype.load = function () -{ - if (window.XDomainRequest && this.crossorigin) - { - this.ajaxRequest = new window.XDomainRequest(); - - // XDomainRequest has a few quirks. 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 = this.onError.bind(this); - this.ajaxRequest.ontimeout = this.onError.bind(this); - - this.ajaxRequest.onprogress = function () - {}; - - this.ajaxRequest.onload = this.onJSONLoaded.bind(this); - } - else - { - if (window.XMLHttpRequest) - { - this.ajaxRequest = new window.XMLHttpRequest(); - } - else - { - this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP'); - } - - this.ajaxRequest.onreadystatechange = this.onReadyStateChanged.bind(this); - } - - this.ajaxRequest.open('GET',this.url,true); - - this.ajaxRequest.send(); -}; - -/** - * Bridge function to be able to use the more reliable onreadystatechange in XMLHttpRequest. - * - * @private - */ -JsonLoader.prototype.onReadyStateChanged = function () -{ - if (this.ajaxRequest.readyState === 4 && (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1)) - { - this.onJSONLoaded(); - } -}; - -/** - * Invoke when JSON file is loaded - * - * @private - */ -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 textureUrl = this.baseUrl + this.json.meta.image; - var image = new ImageLoader(textureUrl, this.crossorigin); - var frameData = this.json.frames; - - this.texture = image.texture.baseTexture; - image.addEventListener('loaded', this.onLoaded.bind(this)); - image.addEventListener('error', this.onError.bind(this)); - - for (var i in frameData) - { - var rect = frameData[i].frame; - - if (rect) - { - var textureSize = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h); - var crop = textureSize.clone(); - var trim = null; - - // Check to see if the sprite is trimmed - if (frameData[i].trimmed) - { - var actualSize = frameData[i].sourceSize; - var realSize = frameData[i].spriteSourceSize; - trim = new core.math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); - } - core.utils.TextureCache[i] = new core.Texture(this.texture, textureSize, crop, trim); - } - } - - image.load(); - - } - else if (this.json.bones) - { - // check if the json was loaded before - if (core.utils.AnimCache[this.url]) - { - this.onLoaded(); - } - else - { - /** - * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files - * that correspond to the spine file are in the same base URL and that the .json and .atlas files - * have the same name - */ - var atlasPath = this.url.substr(0, this.url.lastIndexOf('.')) + '.atlas'; - var atlasLoader = new JsonLoader(atlasPath, this.crossorigin); - // save a copy of the current object for future reference // - var originalLoader = this; - // before loading the file, replace the "onJSONLoaded" function for our own // - atlasLoader.onJSONLoaded = function () - { - // at this point "this" points at the atlasLoader (JsonLoader) instance // - if (!this.ajaxRequest.responseText) - { - this.onError(); // FIXME: hmm, this is funny because we are not responding to errors yet - return; - } - // create a new instance of a spine texture loader for this spine object // - var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/'))); - // create a spine atlas using the loaded text and a spine texture loader instance // - var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader); - // now we use an atlas attachment loader // - var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas); - // spine animation - var spineJsonParser = new spine.SkeletonJson(attachmentLoader); - var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - core.utils.AnimCache[originalLoader.url] = skeletonData; - originalLoader.spine = skeletonData; - originalLoader.spineAtlas = spineAtlas; - originalLoader.spineAtlasLoader = atlasLoader; - // wait for textures to finish loading if needed - if (textureLoader.loadingCount > 0) - { - textureLoader.addEventListener('loadedBaseTexture', function (evt) - { - if (evt.content.content.loadingCount <= 0) - { - originalLoader.onLoaded(); - } - }); - } - else - { - originalLoader.onLoaded(); - } - }; - // start the loading // - atlasLoader.load(); - } - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoke when json file loaded - * - * @private - */ -JsonLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.dispatchEvent({ - type: 'loaded', - content: this - }); -}; - -/** - * Invoke when error occured - * - * @private - */ -JsonLoader.prototype.onError = function () -{ - - this.dispatchEvent({ - type: 'error', - content: this - }); -}; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js deleted file mode 100644 index 69bae21..0000000 --- a/src/loaders/SpineLoader.js +++ /dev/null @@ -1,84 +0,0 @@ -var core = require('../core'), - 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 - * - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function SpineLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -SpineLoader.prototype.constructor = SpineLoader; -module.exports = SpineLoader; - -core.utils.eventTarget.mixin(SpineLoader.prototype); - -/** - * Loads the JSON data - * - */ -SpineLoader.prototype.load = function () -{ - var scope = this; - 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. - * - * @private - */ -SpineLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.emit('loaded', { content: this }); -}; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js deleted file mode 100644 index a554e9d..0000000 --- a/src/loaders/SpriteSheetLoader.js +++ /dev/null @@ -1,93 +0,0 @@ -var core = require('../core'), - 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 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 - * @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 - */ -function SpriteSheetLoader(url, crossorigin) -{ - - /** - * The url of the atlas data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = null; - - /** - * The frames of the sprite sheet - * - * @member {object} - */ - this.frames = {}; -} - -// constructor -SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; -module.exports = SpriteSheetLoader; - -core.utils.eventTarget.mixin(SpriteSheetLoader.prototype); - -/** - * This will begin loading the JSON file - * - */ -SpriteSheetLoader.prototype.load = function () -{ - var scope = this; - 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) - * - * @private - */ -SpriteSheetLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { - content: this - }); -}; diff --git a/src/loaders/index.js b/src/loaders/index.js index 3b83499..c269ffb 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -9,11 +9,11 @@ * @namespace PIXI */ module.exports = { - AssetLoader: require('./AssetLoader'), - AtlasLoader: require('./AtlasLoader'), - BitmapFontLoader: require('./BitmapFontLoader'), - ImageLoader: require('./ImageLoader'), - JsonLoader: require('./JsonLoader'), - SpineLoader: require('./SpineLoader'), - SpriteSheetLoader: require('./SpriteSheetLoader') + Loader: require('asset-loader'), + loader: require('./loader'), + + // parsers + textureParser: require('./textureParser'), + spritesheetParser: require('./spritesheetParser'), + spineAtlasParser: require('./spineAtlasParser') }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js new file mode 100644 index 0000000..b1d9c1d --- /dev/null +++ b/src/loaders/loader.js @@ -0,0 +1,16 @@ +var Loader = require('asset-loader'), + textureParser = require('./textureParser'), + spritesheetParser = require('./spritesheetParser'), + loader = new Loader(); + +loader + // parse any json strings into objects + .use(Loader.middleware.parsing.json()) + // parse any blob into more usable objects (e.g. Image) + .use(Loader.middleware.parsing.json()) + // parse any Image objects into textures + .use(textureParser()) + // parse any spritesheet data into multiple textures + .use(spritesheetParser()) + +module.exports = loader; diff --git a/src/loaders/spineAtlasParser.js b/src/loaders/spineAtlasParser.js new file mode 100644 index 0000000..85849f2 --- /dev/null +++ b/src/loaders/spineAtlasParser.js @@ -0,0 +1,69 @@ +var Resource = require('asset-loader').Resource, + core = require('../core'), + spine = require('../spine'); + +module.exports = function () +{ + return function (resource, next) + { + // if this is a spritesheet object + if (resource.data && resource.data.bones) + { + /** + * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files + * that correspond to the spine file are in the same base URL and that the .json and .atlas files + * have the same name + */ + var atlasPath = resource.url.substr(0, resource.url.lastIndexOf('.')) + '.atlas'; + var atlasOptions = { crossOrigin: resource.crossOrigin, xhrType: Resource.XHR_RESPONSE_TYPE.TEXT }; + + this.loadResource(new Resource(atlasPath, atlasOptions), function (res) { + ///////////////////////////////////////////////// + // TODO: THIS IS OLD STYLE + + + // create a new instance of a spine texture loader for this spine object // + var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/'))); + + // create a spine atlas using the loaded text and a spine texture loader instance // + var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader); + + // now we use an atlas attachment loader // + var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas); + + // spine animation + var spineJsonParser = new spine.SkeletonJson(attachmentLoader); + var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); + + core.utils.AnimCache[originalLoader.url] = skeletonData; + originalLoader.spine = skeletonData; + originalLoader.spineAtlas = spineAtlas; + originalLoader.spineAtlasLoader = atlasLoader; + + // wait for textures to finish loading if needed + if (textureLoader.loadingCount > 0) + { + textureLoader.addEventListener('loadedBaseTexture', function (evt) + { + if (evt.content.content.loadingCount <= 0) + { + originalLoader.onLoaded(); + } + }); + } + else + { + originalLoader.onLoaded(); + } + + + ///////////////////////////////////////////////// + + next(); + }); + } + else { + next(); + } + }; +}; diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js new file mode 100644 index 0000000..22d41e6 --- /dev/null +++ b/src/loaders/spritesheetParser.js @@ -0,0 +1,54 @@ +var Resource = require('asset-loader').Resource, + core = require('../core'); + +module.exports = function () +{ + return function (resource, next) + { + // if this is a spritesheet object + if (resource.data && resource.data.frames) + { + var loadOptions = { + crossOrigin: resource.crossOrigin, + loadType: Resource.LOAD_TYPE.IMAGE + }; + + // load the image for this sheet + this.loadResource(new Resource(this.baseUrl + resource.data.meta.image, loadOptions), function (res) + { + resource.textures = {}; + + var frames = resource.data.frames; + + for (var i in frames) + { + var rect = frames[i].frame; + + if (rect) + { + var size = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h); + var trim = null; + + // Check to see if the sprite is trimmed + if (frameData[i].trimmed) + { + trim = new core.math.Rectangle( + frames[i].spriteSourceSize.x, + frames[i].spriteSourceSize.y, + frames[i].sourceSize.w, + frames[i].sourceSize.h + ); + } + + cresource.textures[i] = new core.Texture(resource.texture.baseTexture, size, size.clone(), trim); + } + } + + next(); + }); + } + else { + next(); + } + }; +}; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index aca919c..e53c3a2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -77,7 +77,7 @@ * @member {number} * @private */ - this._backgroundColor = 0xFFFFFF; + this._backgroundColor = 0x000000; /** * The background color as an [R, G, B] array. diff --git a/src/core/sprites/webgl/SpriteBatchRenderer.js b/src/core/sprites/webgl/SpriteBatchRenderer.js index 8c246c8..2e69c97 100644 --- a/src/core/sprites/webgl/SpriteBatchRenderer.js +++ b/src/core/sprites/webgl/SpriteBatchRenderer.js @@ -28,7 +28,7 @@ * * @member {number} */ - this.vertSize = 12; + this.vertSize = 10; /** * @@ -273,21 +273,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x0; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -300,21 +294,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x1; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -327,21 +315,17 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x2; vertices[index++] = uvs.y2; - // color vertices[index++] = sprite.alpha; - // ---- + + // xy vertices[index++] = w1; @@ -354,17 +338,12 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x3; vertices[index++] = uvs.y3; - // color vertices[index++] = sprite.alpha; @@ -455,8 +434,7 @@ gl.vertexAttribPointer(this.shader.attributes.aPositionCoord, 2, gl.FLOAT, false, stride, 5 * 4); gl.vertexAttribPointer(this.shader.attributes.aScale, 2, gl.FLOAT, false, stride, 7 * 4); - gl.vertexAttribPointer(this.shader.attributes.aSkew, 2, gl.FLOAT, false, stride, 9 * 4); - gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 11 * 4); + gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 9 * 4); }; /** diff --git a/src/core/sprites/webgl/SpriteBatchShader.js b/src/core/sprites/webgl/SpriteBatchShader.js index f689d1c..1f53252 100644 --- a/src/core/sprites/webgl/SpriteBatchShader.js +++ b/src/core/sprites/webgl/SpriteBatchShader.js @@ -18,7 +18,6 @@ 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', - 'attribute vec2 aSkew;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', @@ -34,8 +33,8 @@ 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', - ' v.x = (sv.x) * cos(aRotation + aSkew.y) - (sv.y) * sin(aRotation + aSkew.x);', - ' v.y = (sv.x) * sin(aRotation + aSkew.y) + (sv.y) * cos(aRotation + aSkew.x);', + ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', + ' v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);', ' v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;', @@ -69,7 +68,6 @@ { aPositionCoord: 0, aScale: 0, - aSkew: 0, aRotation: 0 } ); diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js deleted file mode 100644 index 16ee7c8..0000000 --- a/src/loaders/ImageLoader.js +++ /dev/null @@ -1,116 +0,0 @@ -var core = require('../core'); - -/** - * 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 Texture.fromFrame() and Sprite.fromFrame() - * When loaded this class will dispatch a 'loaded' event - * - * @class - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the image - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function ImageLoader(url, crossorigin) -{ - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = core.Texture.fromImage(url, crossorigin); - - /** - * if the image is loaded with loadFramedSpriteSheet - * frames will contain the sprite sheet frames - * - * @member {Array} - * @readOnly - */ - this.frames = []; -} - -// constructor -ImageLoader.prototype.constructor = ImageLoader; -module.exports = ImageLoader; - -core.utils.eventTarget.mixin(ImageLoader.prototype); - -/** - * Loads image or takes it from cache - * - */ -ImageLoader.prototype.load = function () -{ - if (!this.texture.baseTexture.hasLoaded) - { - this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); - this.texture.baseTexture.on('error', this.onError.bind(this)); - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoked when image file is loaded or it is already cached and ready to use - * - * @private - */ -ImageLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { content: this }); -}; - -/** - * Invoked when image file failed loading - * - * @method onError - * @private - */ -ImageLoader.prototype.onError = function () -{ - this.emit('error', { content: this }); -}; - -/** - * Loads image and split it to uniform sized frames - * - * @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 - */ -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 core.Texture( - this.texture.baseTexture, - new core.math.Rectangle( - x * frameWidth, - y * frameHeight, - frameWidth, - frameHeight - ) - ); - - this.frames.push(texture); - - if (textureName) - { - core.utils.TextureCache[textureName + '-' + i] = texture; - } - } - } - - this.load(); -}; diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js deleted file mode 100644 index 7aabeb4..0000000 --- a/src/loaders/JsonLoader.js +++ /dev/null @@ -1,253 +0,0 @@ -var core = require('../core'), - spine = require('../spine/SpineRuntime'), - ImageLoader = require('./ImageLoader'), - SpineTextureLoader = require('./SpineTextureLoader'); - -/** - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function JsonLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -// constructor -JsonLoader.prototype.constructor = JsonLoader; -module.exports = JsonLoader; - -core.utils.eventTarget.mixin(JsonLoader.prototype); - -/** - * Loads the JSON data - * - */ -JsonLoader.prototype.load = function () -{ - if (window.XDomainRequest && this.crossorigin) - { - this.ajaxRequest = new window.XDomainRequest(); - - // XDomainRequest has a few quirks. 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 = this.onError.bind(this); - this.ajaxRequest.ontimeout = this.onError.bind(this); - - this.ajaxRequest.onprogress = function () - {}; - - this.ajaxRequest.onload = this.onJSONLoaded.bind(this); - } - else - { - if (window.XMLHttpRequest) - { - this.ajaxRequest = new window.XMLHttpRequest(); - } - else - { - this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP'); - } - - this.ajaxRequest.onreadystatechange = this.onReadyStateChanged.bind(this); - } - - this.ajaxRequest.open('GET',this.url,true); - - this.ajaxRequest.send(); -}; - -/** - * Bridge function to be able to use the more reliable onreadystatechange in XMLHttpRequest. - * - * @private - */ -JsonLoader.prototype.onReadyStateChanged = function () -{ - if (this.ajaxRequest.readyState === 4 && (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1)) - { - this.onJSONLoaded(); - } -}; - -/** - * Invoke when JSON file is loaded - * - * @private - */ -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 textureUrl = this.baseUrl + this.json.meta.image; - var image = new ImageLoader(textureUrl, this.crossorigin); - var frameData = this.json.frames; - - this.texture = image.texture.baseTexture; - image.addEventListener('loaded', this.onLoaded.bind(this)); - image.addEventListener('error', this.onError.bind(this)); - - for (var i in frameData) - { - var rect = frameData[i].frame; - - if (rect) - { - var textureSize = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h); - var crop = textureSize.clone(); - var trim = null; - - // Check to see if the sprite is trimmed - if (frameData[i].trimmed) - { - var actualSize = frameData[i].sourceSize; - var realSize = frameData[i].spriteSourceSize; - trim = new core.math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); - } - core.utils.TextureCache[i] = new core.Texture(this.texture, textureSize, crop, trim); - } - } - - image.load(); - - } - else if (this.json.bones) - { - // check if the json was loaded before - if (core.utils.AnimCache[this.url]) - { - this.onLoaded(); - } - else - { - /** - * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files - * that correspond to the spine file are in the same base URL and that the .json and .atlas files - * have the same name - */ - var atlasPath = this.url.substr(0, this.url.lastIndexOf('.')) + '.atlas'; - var atlasLoader = new JsonLoader(atlasPath, this.crossorigin); - // save a copy of the current object for future reference // - var originalLoader = this; - // before loading the file, replace the "onJSONLoaded" function for our own // - atlasLoader.onJSONLoaded = function () - { - // at this point "this" points at the atlasLoader (JsonLoader) instance // - if (!this.ajaxRequest.responseText) - { - this.onError(); // FIXME: hmm, this is funny because we are not responding to errors yet - return; - } - // create a new instance of a spine texture loader for this spine object // - var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/'))); - // create a spine atlas using the loaded text and a spine texture loader instance // - var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader); - // now we use an atlas attachment loader // - var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas); - // spine animation - var spineJsonParser = new spine.SkeletonJson(attachmentLoader); - var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - core.utils.AnimCache[originalLoader.url] = skeletonData; - originalLoader.spine = skeletonData; - originalLoader.spineAtlas = spineAtlas; - originalLoader.spineAtlasLoader = atlasLoader; - // wait for textures to finish loading if needed - if (textureLoader.loadingCount > 0) - { - textureLoader.addEventListener('loadedBaseTexture', function (evt) - { - if (evt.content.content.loadingCount <= 0) - { - originalLoader.onLoaded(); - } - }); - } - else - { - originalLoader.onLoaded(); - } - }; - // start the loading // - atlasLoader.load(); - } - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoke when json file loaded - * - * @private - */ -JsonLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.dispatchEvent({ - type: 'loaded', - content: this - }); -}; - -/** - * Invoke when error occured - * - * @private - */ -JsonLoader.prototype.onError = function () -{ - - this.dispatchEvent({ - type: 'error', - content: this - }); -}; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js deleted file mode 100644 index 69bae21..0000000 --- a/src/loaders/SpineLoader.js +++ /dev/null @@ -1,84 +0,0 @@ -var core = require('../core'), - 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 - * - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function SpineLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -SpineLoader.prototype.constructor = SpineLoader; -module.exports = SpineLoader; - -core.utils.eventTarget.mixin(SpineLoader.prototype); - -/** - * Loads the JSON data - * - */ -SpineLoader.prototype.load = function () -{ - var scope = this; - 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. - * - * @private - */ -SpineLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.emit('loaded', { content: this }); -}; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js deleted file mode 100644 index a554e9d..0000000 --- a/src/loaders/SpriteSheetLoader.js +++ /dev/null @@ -1,93 +0,0 @@ -var core = require('../core'), - 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 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 - * @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 - */ -function SpriteSheetLoader(url, crossorigin) -{ - - /** - * The url of the atlas data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = null; - - /** - * The frames of the sprite sheet - * - * @member {object} - */ - this.frames = {}; -} - -// constructor -SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; -module.exports = SpriteSheetLoader; - -core.utils.eventTarget.mixin(SpriteSheetLoader.prototype); - -/** - * This will begin loading the JSON file - * - */ -SpriteSheetLoader.prototype.load = function () -{ - var scope = this; - 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) - * - * @private - */ -SpriteSheetLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { - content: this - }); -}; diff --git a/src/loaders/index.js b/src/loaders/index.js index 3b83499..c269ffb 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -9,11 +9,11 @@ * @namespace PIXI */ module.exports = { - AssetLoader: require('./AssetLoader'), - AtlasLoader: require('./AtlasLoader'), - BitmapFontLoader: require('./BitmapFontLoader'), - ImageLoader: require('./ImageLoader'), - JsonLoader: require('./JsonLoader'), - SpineLoader: require('./SpineLoader'), - SpriteSheetLoader: require('./SpriteSheetLoader') + Loader: require('asset-loader'), + loader: require('./loader'), + + // parsers + textureParser: require('./textureParser'), + spritesheetParser: require('./spritesheetParser'), + spineAtlasParser: require('./spineAtlasParser') }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js new file mode 100644 index 0000000..b1d9c1d --- /dev/null +++ b/src/loaders/loader.js @@ -0,0 +1,16 @@ +var Loader = require('asset-loader'), + textureParser = require('./textureParser'), + spritesheetParser = require('./spritesheetParser'), + loader = new Loader(); + +loader + // parse any json strings into objects + .use(Loader.middleware.parsing.json()) + // parse any blob into more usable objects (e.g. Image) + .use(Loader.middleware.parsing.json()) + // parse any Image objects into textures + .use(textureParser()) + // parse any spritesheet data into multiple textures + .use(spritesheetParser()) + +module.exports = loader; diff --git a/src/loaders/spineAtlasParser.js b/src/loaders/spineAtlasParser.js new file mode 100644 index 0000000..85849f2 --- /dev/null +++ b/src/loaders/spineAtlasParser.js @@ -0,0 +1,69 @@ +var Resource = require('asset-loader').Resource, + core = require('../core'), + spine = require('../spine'); + +module.exports = function () +{ + return function (resource, next) + { + // if this is a spritesheet object + if (resource.data && resource.data.bones) + { + /** + * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files + * that correspond to the spine file are in the same base URL and that the .json and .atlas files + * have the same name + */ + var atlasPath = resource.url.substr(0, resource.url.lastIndexOf('.')) + '.atlas'; + var atlasOptions = { crossOrigin: resource.crossOrigin, xhrType: Resource.XHR_RESPONSE_TYPE.TEXT }; + + this.loadResource(new Resource(atlasPath, atlasOptions), function (res) { + ///////////////////////////////////////////////// + // TODO: THIS IS OLD STYLE + + + // create a new instance of a spine texture loader for this spine object // + var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/'))); + + // create a spine atlas using the loaded text and a spine texture loader instance // + var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader); + + // now we use an atlas attachment loader // + var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas); + + // spine animation + var spineJsonParser = new spine.SkeletonJson(attachmentLoader); + var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); + + core.utils.AnimCache[originalLoader.url] = skeletonData; + originalLoader.spine = skeletonData; + originalLoader.spineAtlas = spineAtlas; + originalLoader.spineAtlasLoader = atlasLoader; + + // wait for textures to finish loading if needed + if (textureLoader.loadingCount > 0) + { + textureLoader.addEventListener('loadedBaseTexture', function (evt) + { + if (evt.content.content.loadingCount <= 0) + { + originalLoader.onLoaded(); + } + }); + } + else + { + originalLoader.onLoaded(); + } + + + ///////////////////////////////////////////////// + + next(); + }); + } + else { + next(); + } + }; +}; diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js new file mode 100644 index 0000000..22d41e6 --- /dev/null +++ b/src/loaders/spritesheetParser.js @@ -0,0 +1,54 @@ +var Resource = require('asset-loader').Resource, + core = require('../core'); + +module.exports = function () +{ + return function (resource, next) + { + // if this is a spritesheet object + if (resource.data && resource.data.frames) + { + var loadOptions = { + crossOrigin: resource.crossOrigin, + loadType: Resource.LOAD_TYPE.IMAGE + }; + + // load the image for this sheet + this.loadResource(new Resource(this.baseUrl + resource.data.meta.image, loadOptions), function (res) + { + resource.textures = {}; + + var frames = resource.data.frames; + + for (var i in frames) + { + var rect = frames[i].frame; + + if (rect) + { + var size = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h); + var trim = null; + + // Check to see if the sprite is trimmed + if (frameData[i].trimmed) + { + trim = new core.math.Rectangle( + frames[i].spriteSourceSize.x, + frames[i].spriteSourceSize.y, + frames[i].sourceSize.w, + frames[i].sourceSize.h + ); + } + + cresource.textures[i] = new core.Texture(resource.texture.baseTexture, size, size.clone(), trim); + } + } + + next(); + }); + } + else { + next(); + } + }; +}; diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js new file mode 100644 index 0000000..53d034a --- /dev/null +++ b/src/loaders/textureParser.js @@ -0,0 +1,16 @@ +var Resource = require('asset-loader').Resource, + core = require('../core'); + +module.exports = function () +{ + return function (resource, next) + { + // create a new texture if the data is an Image object + if (resource.data && resource.data.nodeName && resource.data.nodeName.toLowerCase() === 'img') + { + resource.texture = new core.Texture(new core.BaseTexture(resource.data)); + } + + next(); + }; +}; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index aca919c..e53c3a2 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -77,7 +77,7 @@ * @member {number} * @private */ - this._backgroundColor = 0xFFFFFF; + this._backgroundColor = 0x000000; /** * The background color as an [R, G, B] array. diff --git a/src/core/sprites/webgl/SpriteBatchRenderer.js b/src/core/sprites/webgl/SpriteBatchRenderer.js index 8c246c8..2e69c97 100644 --- a/src/core/sprites/webgl/SpriteBatchRenderer.js +++ b/src/core/sprites/webgl/SpriteBatchRenderer.js @@ -28,7 +28,7 @@ * * @member {number} */ - this.vertSize = 12; + this.vertSize = 10; /** * @@ -273,21 +273,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x0; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -300,21 +294,15 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x1; vertices[index++] = uvs.y1; - // color vertices[index++] = sprite.alpha; - // ---- // xy vertices[index++] = w0; @@ -327,21 +315,17 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x2; vertices[index++] = uvs.y2; - // color vertices[index++] = sprite.alpha; - // ---- + + // xy vertices[index++] = w1; @@ -354,17 +338,12 @@ vertices[index++] = sprite.scale.x; vertices[index++] = sprite.scale.y; - //skew - vertices[index++] = sprite.skew.x; - vertices[index++] = sprite.skew.y; - //rotation vertices[index++] = sprite.rotation; // uv vertices[index++] = uvs.x3; vertices[index++] = uvs.y3; - // color vertices[index++] = sprite.alpha; @@ -455,8 +434,7 @@ gl.vertexAttribPointer(this.shader.attributes.aPositionCoord, 2, gl.FLOAT, false, stride, 5 * 4); gl.vertexAttribPointer(this.shader.attributes.aScale, 2, gl.FLOAT, false, stride, 7 * 4); - gl.vertexAttribPointer(this.shader.attributes.aSkew, 2, gl.FLOAT, false, stride, 9 * 4); - gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 11 * 4); + gl.vertexAttribPointer(this.shader.attributes.aRotation, 1, gl.FLOAT, false, stride, 9 * 4); }; /** diff --git a/src/core/sprites/webgl/SpriteBatchShader.js b/src/core/sprites/webgl/SpriteBatchShader.js index f689d1c..1f53252 100644 --- a/src/core/sprites/webgl/SpriteBatchShader.js +++ b/src/core/sprites/webgl/SpriteBatchShader.js @@ -18,7 +18,6 @@ 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', - 'attribute vec2 aSkew;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', @@ -34,8 +33,8 @@ 'void main(void){', ' vec2 v;', ' vec2 sv = aVertexPosition * aScale;', - ' v.x = (sv.x) * cos(aRotation + aSkew.y) - (sv.y) * sin(aRotation + aSkew.x);', - ' v.y = (sv.x) * sin(aRotation + aSkew.y) + (sv.y) * cos(aRotation + aSkew.x);', + ' v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);', + ' v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);', ' v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;', @@ -69,7 +68,6 @@ { aPositionCoord: 0, aScale: 0, - aSkew: 0, aRotation: 0 } ); diff --git a/src/loaders/ImageLoader.js b/src/loaders/ImageLoader.js deleted file mode 100644 index 16ee7c8..0000000 --- a/src/loaders/ImageLoader.js +++ /dev/null @@ -1,116 +0,0 @@ -var core = require('../core'); - -/** - * 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 Texture.fromFrame() and Sprite.fromFrame() - * When loaded this class will dispatch a 'loaded' event - * - * @class - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the image - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function ImageLoader(url, crossorigin) -{ - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = core.Texture.fromImage(url, crossorigin); - - /** - * if the image is loaded with loadFramedSpriteSheet - * frames will contain the sprite sheet frames - * - * @member {Array} - * @readOnly - */ - this.frames = []; -} - -// constructor -ImageLoader.prototype.constructor = ImageLoader; -module.exports = ImageLoader; - -core.utils.eventTarget.mixin(ImageLoader.prototype); - -/** - * Loads image or takes it from cache - * - */ -ImageLoader.prototype.load = function () -{ - if (!this.texture.baseTexture.hasLoaded) - { - this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); - this.texture.baseTexture.on('error', this.onError.bind(this)); - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoked when image file is loaded or it is already cached and ready to use - * - * @private - */ -ImageLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { content: this }); -}; - -/** - * Invoked when image file failed loading - * - * @method onError - * @private - */ -ImageLoader.prototype.onError = function () -{ - this.emit('error', { content: this }); -}; - -/** - * Loads image and split it to uniform sized frames - * - * @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 - */ -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 core.Texture( - this.texture.baseTexture, - new core.math.Rectangle( - x * frameWidth, - y * frameHeight, - frameWidth, - frameHeight - ) - ); - - this.frames.push(texture); - - if (textureName) - { - core.utils.TextureCache[textureName + '-' + i] = texture; - } - } - } - - this.load(); -}; diff --git a/src/loaders/JsonLoader.js b/src/loaders/JsonLoader.js deleted file mode 100644 index 7aabeb4..0000000 --- a/src/loaders/JsonLoader.js +++ /dev/null @@ -1,253 +0,0 @@ -var core = require('../core'), - spine = require('../spine/SpineRuntime'), - ImageLoader = require('./ImageLoader'), - SpineTextureLoader = require('./SpineTextureLoader'); - -/** - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function JsonLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -// constructor -JsonLoader.prototype.constructor = JsonLoader; -module.exports = JsonLoader; - -core.utils.eventTarget.mixin(JsonLoader.prototype); - -/** - * Loads the JSON data - * - */ -JsonLoader.prototype.load = function () -{ - if (window.XDomainRequest && this.crossorigin) - { - this.ajaxRequest = new window.XDomainRequest(); - - // XDomainRequest has a few quirks. 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 = this.onError.bind(this); - this.ajaxRequest.ontimeout = this.onError.bind(this); - - this.ajaxRequest.onprogress = function () - {}; - - this.ajaxRequest.onload = this.onJSONLoaded.bind(this); - } - else - { - if (window.XMLHttpRequest) - { - this.ajaxRequest = new window.XMLHttpRequest(); - } - else - { - this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP'); - } - - this.ajaxRequest.onreadystatechange = this.onReadyStateChanged.bind(this); - } - - this.ajaxRequest.open('GET',this.url,true); - - this.ajaxRequest.send(); -}; - -/** - * Bridge function to be able to use the more reliable onreadystatechange in XMLHttpRequest. - * - * @private - */ -JsonLoader.prototype.onReadyStateChanged = function () -{ - if (this.ajaxRequest.readyState === 4 && (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1)) - { - this.onJSONLoaded(); - } -}; - -/** - * Invoke when JSON file is loaded - * - * @private - */ -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 textureUrl = this.baseUrl + this.json.meta.image; - var image = new ImageLoader(textureUrl, this.crossorigin); - var frameData = this.json.frames; - - this.texture = image.texture.baseTexture; - image.addEventListener('loaded', this.onLoaded.bind(this)); - image.addEventListener('error', this.onError.bind(this)); - - for (var i in frameData) - { - var rect = frameData[i].frame; - - if (rect) - { - var textureSize = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h); - var crop = textureSize.clone(); - var trim = null; - - // Check to see if the sprite is trimmed - if (frameData[i].trimmed) - { - var actualSize = frameData[i].sourceSize; - var realSize = frameData[i].spriteSourceSize; - trim = new core.math.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); - } - core.utils.TextureCache[i] = new core.Texture(this.texture, textureSize, crop, trim); - } - } - - image.load(); - - } - else if (this.json.bones) - { - // check if the json was loaded before - if (core.utils.AnimCache[this.url]) - { - this.onLoaded(); - } - else - { - /** - * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files - * that correspond to the spine file are in the same base URL and that the .json and .atlas files - * have the same name - */ - var atlasPath = this.url.substr(0, this.url.lastIndexOf('.')) + '.atlas'; - var atlasLoader = new JsonLoader(atlasPath, this.crossorigin); - // save a copy of the current object for future reference // - var originalLoader = this; - // before loading the file, replace the "onJSONLoaded" function for our own // - atlasLoader.onJSONLoaded = function () - { - // at this point "this" points at the atlasLoader (JsonLoader) instance // - if (!this.ajaxRequest.responseText) - { - this.onError(); // FIXME: hmm, this is funny because we are not responding to errors yet - return; - } - // create a new instance of a spine texture loader for this spine object // - var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/'))); - // create a spine atlas using the loaded text and a spine texture loader instance // - var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader); - // now we use an atlas attachment loader // - var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas); - // spine animation - var spineJsonParser = new spine.SkeletonJson(attachmentLoader); - var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); - core.utils.AnimCache[originalLoader.url] = skeletonData; - originalLoader.spine = skeletonData; - originalLoader.spineAtlas = spineAtlas; - originalLoader.spineAtlasLoader = atlasLoader; - // wait for textures to finish loading if needed - if (textureLoader.loadingCount > 0) - { - textureLoader.addEventListener('loadedBaseTexture', function (evt) - { - if (evt.content.content.loadingCount <= 0) - { - originalLoader.onLoaded(); - } - }); - } - else - { - originalLoader.onLoaded(); - } - }; - // start the loading // - atlasLoader.load(); - } - } - else - { - this.onLoaded(); - } -}; - -/** - * Invoke when json file loaded - * - * @private - */ -JsonLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.dispatchEvent({ - type: 'loaded', - content: this - }); -}; - -/** - * Invoke when error occured - * - * @private - */ -JsonLoader.prototype.onError = function () -{ - - this.dispatchEvent({ - type: 'error', - content: this - }); -}; diff --git a/src/loaders/SpineLoader.js b/src/loaders/SpineLoader.js deleted file mode 100644 index 69bae21..0000000 --- a/src/loaders/SpineLoader.js +++ /dev/null @@ -1,84 +0,0 @@ -var core = require('../core'), - 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 - * - * 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 - * @mixes eventTarget - * @namespace PIXI - * @param url {String} The url of the JSON file - * @param crossorigin {boolean} Whether requests should be treated as crossorigin - */ -function SpineLoader(url, crossorigin) -{ - /** - * The url of the bitmap font data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * Whether the data has loaded yet - * - * @member {boolean} - * @readOnly - */ - this.loaded = false; -} - -SpineLoader.prototype.constructor = SpineLoader; -module.exports = SpineLoader; - -core.utils.eventTarget.mixin(SpineLoader.prototype); - -/** - * Loads the JSON data - * - */ -SpineLoader.prototype.load = function () -{ - var scope = this; - 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. - * - * @private - */ -SpineLoader.prototype.onLoaded = function () -{ - this.loaded = true; - this.emit('loaded', { content: this }); -}; diff --git a/src/loaders/SpriteSheetLoader.js b/src/loaders/SpriteSheetLoader.js deleted file mode 100644 index a554e9d..0000000 --- a/src/loaders/SpriteSheetLoader.js +++ /dev/null @@ -1,93 +0,0 @@ -var core = require('../core'), - 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 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 - * @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 - */ -function SpriteSheetLoader(url, crossorigin) -{ - - /** - * The url of the atlas data - * - * @member {String} - */ - this.url = url; - - /** - * Whether the requests should be treated as cross origin - * - * @member {boolean} - */ - this.crossorigin = crossorigin; - - /** - * The base url of the bitmap font data - * - * @member {String} - * @readOnly - */ - this.baseUrl = url.replace(/[^\/]*$/, ''); - - /** - * The texture being loaded - * - * @member {Texture} - */ - this.texture = null; - - /** - * The frames of the sprite sheet - * - * @member {object} - */ - this.frames = {}; -} - -// constructor -SpriteSheetLoader.prototype.constructor = SpriteSheetLoader; -module.exports = SpriteSheetLoader; - -core.utils.eventTarget.mixin(SpriteSheetLoader.prototype); - -/** - * This will begin loading the JSON file - * - */ -SpriteSheetLoader.prototype.load = function () -{ - var scope = this; - 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) - * - * @private - */ -SpriteSheetLoader.prototype.onLoaded = function () -{ - this.emit('loaded', { - content: this - }); -}; diff --git a/src/loaders/index.js b/src/loaders/index.js index 3b83499..c269ffb 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -9,11 +9,11 @@ * @namespace PIXI */ module.exports = { - AssetLoader: require('./AssetLoader'), - AtlasLoader: require('./AtlasLoader'), - BitmapFontLoader: require('./BitmapFontLoader'), - ImageLoader: require('./ImageLoader'), - JsonLoader: require('./JsonLoader'), - SpineLoader: require('./SpineLoader'), - SpriteSheetLoader: require('./SpriteSheetLoader') + Loader: require('asset-loader'), + loader: require('./loader'), + + // parsers + textureParser: require('./textureParser'), + spritesheetParser: require('./spritesheetParser'), + spineAtlasParser: require('./spineAtlasParser') }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js new file mode 100644 index 0000000..b1d9c1d --- /dev/null +++ b/src/loaders/loader.js @@ -0,0 +1,16 @@ +var Loader = require('asset-loader'), + textureParser = require('./textureParser'), + spritesheetParser = require('./spritesheetParser'), + loader = new Loader(); + +loader + // parse any json strings into objects + .use(Loader.middleware.parsing.json()) + // parse any blob into more usable objects (e.g. Image) + .use(Loader.middleware.parsing.json()) + // parse any Image objects into textures + .use(textureParser()) + // parse any spritesheet data into multiple textures + .use(spritesheetParser()) + +module.exports = loader; diff --git a/src/loaders/spineAtlasParser.js b/src/loaders/spineAtlasParser.js new file mode 100644 index 0000000..85849f2 --- /dev/null +++ b/src/loaders/spineAtlasParser.js @@ -0,0 +1,69 @@ +var Resource = require('asset-loader').Resource, + core = require('../core'), + spine = require('../spine'); + +module.exports = function () +{ + return function (resource, next) + { + // if this is a spritesheet object + if (resource.data && resource.data.bones) + { + /** + * use a bit of hackery to load the atlas file, here we assume that the .json, .atlas and .png files + * that correspond to the spine file are in the same base URL and that the .json and .atlas files + * have the same name + */ + var atlasPath = resource.url.substr(0, resource.url.lastIndexOf('.')) + '.atlas'; + var atlasOptions = { crossOrigin: resource.crossOrigin, xhrType: Resource.XHR_RESPONSE_TYPE.TEXT }; + + this.loadResource(new Resource(atlasPath, atlasOptions), function (res) { + ///////////////////////////////////////////////// + // TODO: THIS IS OLD STYLE + + + // create a new instance of a spine texture loader for this spine object // + var textureLoader = new SpineTextureLoader(this.url.substring(0, this.url.lastIndexOf('/'))); + + // create a spine atlas using the loaded text and a spine texture loader instance // + var spineAtlas = new spine.Atlas(this.ajaxRequest.responseText, textureLoader); + + // now we use an atlas attachment loader // + var attachmentLoader = new spine.AtlasAttachmentLoader(spineAtlas); + + // spine animation + var spineJsonParser = new spine.SkeletonJson(attachmentLoader); + var skeletonData = spineJsonParser.readSkeletonData(originalLoader.json); + + core.utils.AnimCache[originalLoader.url] = skeletonData; + originalLoader.spine = skeletonData; + originalLoader.spineAtlas = spineAtlas; + originalLoader.spineAtlasLoader = atlasLoader; + + // wait for textures to finish loading if needed + if (textureLoader.loadingCount > 0) + { + textureLoader.addEventListener('loadedBaseTexture', function (evt) + { + if (evt.content.content.loadingCount <= 0) + { + originalLoader.onLoaded(); + } + }); + } + else + { + originalLoader.onLoaded(); + } + + + ///////////////////////////////////////////////// + + next(); + }); + } + else { + next(); + } + }; +}; diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js new file mode 100644 index 0000000..22d41e6 --- /dev/null +++ b/src/loaders/spritesheetParser.js @@ -0,0 +1,54 @@ +var Resource = require('asset-loader').Resource, + core = require('../core'); + +module.exports = function () +{ + return function (resource, next) + { + // if this is a spritesheet object + if (resource.data && resource.data.frames) + { + var loadOptions = { + crossOrigin: resource.crossOrigin, + loadType: Resource.LOAD_TYPE.IMAGE + }; + + // load the image for this sheet + this.loadResource(new Resource(this.baseUrl + resource.data.meta.image, loadOptions), function (res) + { + resource.textures = {}; + + var frames = resource.data.frames; + + for (var i in frames) + { + var rect = frames[i].frame; + + if (rect) + { + var size = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h); + var trim = null; + + // Check to see if the sprite is trimmed + if (frameData[i].trimmed) + { + trim = new core.math.Rectangle( + frames[i].spriteSourceSize.x, + frames[i].spriteSourceSize.y, + frames[i].sourceSize.w, + frames[i].sourceSize.h + ); + } + + cresource.textures[i] = new core.Texture(resource.texture.baseTexture, size, size.clone(), trim); + } + } + + next(); + }); + } + else { + next(); + } + }; +}; diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js new file mode 100644 index 0000000..53d034a --- /dev/null +++ b/src/loaders/textureParser.js @@ -0,0 +1,16 @@ +var Resource = require('asset-loader').Resource, + core = require('../core'); + +module.exports = function () +{ + return function (resource, next) + { + // create a new texture if the data is an Image object + if (resource.data && resource.data.nodeName && resource.data.nodeName.toLowerCase() === 'img') + { + resource.texture = new core.Texture(new core.BaseTexture(resource.data)); + } + + next(); + }; +}; diff --git a/src/spine/index.js b/src/spine/index.js index b6adfa2..401c473 100644 --- a/src/spine/index.js +++ b/src/spine/index.js @@ -9,5 +9,6 @@ * @namespace PIXI */ module.exports = { - Spine: require('./Spine') + Spine: require('./Spine'), + runtime: require('./SpineRuntime') };