diff --git a/packages/spritesheet/src/Spritesheet.js b/packages/spritesheet/src/Spritesheet.js index 4f66a77..64d932d 100644 --- a/packages/spritesheet/src/Spritesheet.js +++ b/packages/spritesheet/src/Spritesheet.js @@ -156,20 +156,24 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { const i = this._frameKeys[frameIndex]; - const rect = this._frames[i].frame; + const data = this._frames[i]; + const rect = data.frame; if (rect) { let frame = null; let trim = null; + const sourceSize = data.trimmed !== false && data.sourceSize + ? data.sourceSize : data.frame; + const orig = new Rectangle( 0, 0, - Math.floor(this._frames[i].sourceSize.w) / this.resolution, - Math.floor(this._frames[i].sourceSize.h) / this.resolution + Math.floor(sourceSize.w) / this.resolution, + Math.floor(sourceSize.h) / this.resolution ); - if (this._frames[i].rotated) + if (data.rotated) { frame = new Rectangle( Math.floor(rect.x) / this.resolution, @@ -189,11 +193,11 @@ } // Check to see if the sprite is trimmed - if (this._frames[i].trimmed) + if (data.trimmed !== false && data.spriteSourceSize) { trim = new Rectangle( - Math.floor(this._frames[i].spriteSourceSize.x) / this.resolution, - Math.floor(this._frames[i].spriteSourceSize.y) / this.resolution, + Math.floor(data.spriteSourceSize.x) / this.resolution, + Math.floor(data.spriteSourceSize.y) / this.resolution, Math.floor(rect.w) / this.resolution, Math.floor(rect.h) / this.resolution ); @@ -204,7 +208,7 @@ frame, orig, trim, - this._frames[i].rotated ? 2 : 0 + data.rotated ? 2 : 0 ); // lets also add the frame to pixi's global cache for fromFrame and fromImage functions diff --git a/packages/spritesheet/src/Spritesheet.js b/packages/spritesheet/src/Spritesheet.js index 4f66a77..64d932d 100644 --- a/packages/spritesheet/src/Spritesheet.js +++ b/packages/spritesheet/src/Spritesheet.js @@ -156,20 +156,24 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { const i = this._frameKeys[frameIndex]; - const rect = this._frames[i].frame; + const data = this._frames[i]; + const rect = data.frame; if (rect) { let frame = null; let trim = null; + const sourceSize = data.trimmed !== false && data.sourceSize + ? data.sourceSize : data.frame; + const orig = new Rectangle( 0, 0, - Math.floor(this._frames[i].sourceSize.w) / this.resolution, - Math.floor(this._frames[i].sourceSize.h) / this.resolution + Math.floor(sourceSize.w) / this.resolution, + Math.floor(sourceSize.h) / this.resolution ); - if (this._frames[i].rotated) + if (data.rotated) { frame = new Rectangle( Math.floor(rect.x) / this.resolution, @@ -189,11 +193,11 @@ } // Check to see if the sprite is trimmed - if (this._frames[i].trimmed) + if (data.trimmed !== false && data.spriteSourceSize) { trim = new Rectangle( - Math.floor(this._frames[i].spriteSourceSize.x) / this.resolution, - Math.floor(this._frames[i].spriteSourceSize.y) / this.resolution, + Math.floor(data.spriteSourceSize.x) / this.resolution, + Math.floor(data.spriteSourceSize.y) / this.resolution, Math.floor(rect.w) / this.resolution, Math.floor(rect.h) / this.resolution ); @@ -204,7 +208,7 @@ frame, orig, trim, - this._frames[i].rotated ? 2 : 0 + data.rotated ? 2 : 0 ); // lets also add the frame to pixi's global cache for fromFrame and fromImage functions diff --git a/packages/spritesheet/test/Spritesheet.js b/packages/spritesheet/test/Spritesheet.js index 17ea65f..665f52a 100644 --- a/packages/spritesheet/test/Spritesheet.js +++ b/packages/spritesheet/test/Spritesheet.js @@ -27,6 +27,32 @@ done(); }); }; + + this.parseFrame = function (frameData, callback) + { + const data = { + frames: { frame: frameData }, + meta: { scale: 1 }, + }; + const baseTexture = BaseTexture.fromCanvas( + document.createElement('canvas') + ); + + baseTexture.imageUrl = 'test.png'; + + const sheet = new Spritesheet(baseTexture, data); + + sheet.parse(() => + { + const { frame } = sheet.textures; + + expect(frame).to.be.instanceof(Texture); + + callback(frame); + + sheet.destroy(true); + }); + }; }); it('should exist on PIXI', function () @@ -102,4 +128,86 @@ this.validate(spritesheet, done); }; }); + + it('should parse full data untrimmed', function (done) + { + const data = { + frame: { x: 0, y: 0, w: 14, h: 16 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 14, h: 16 }, + sourceSize: { w: 14, h: 16 }, + }; + + this.parseFrame(data, (texture) => + { + expect(texture.width).to.equal(14); + expect(texture.height).to.equal(16); + done(); + }); + }); + + it('should parse texture from trimmed', function (done) + { + const data = { + frame: { x: 0, y: 28, w: 14, h: 14 }, + rotated: false, + trimmed: true, + spriteSourceSize: { x: 0, y: 0, w: 40, h: 20 }, + sourceSize: { w: 40, h: 20 }, + }; + + this.parseFrame(data, (texture) => + { + expect(texture.width).to.equal(40); + expect(texture.height).to.equal(20); + done(); + }); + }); + + it('should parse texture from minimal data', function (done) + { + const data = { frame: { x: 0, y: 0, w: 14, h: 14 } }; + + this.parseFrame(data, (texture) => + { + expect(texture.width).to.equal(14); + expect(texture.height).to.equal(14); + done(); + }); + }); + + it('should parse texture without trimmed or sourceSize', function (done) + { + const data = { + frame: { x: 0, y: 14, w: 14, h: 14 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 20, h: 30 }, + }; + + this.parseFrame(data, (texture) => + { + expect(texture.width).to.equal(14); + expect(texture.height).to.equal(14); + done(); + }); + }); + + it('should parse as trimmed if spriteSourceSize is set', function (done) + { + // shoebox format + const data = { + frame: { x: 0, y: 0, w: 14, h: 16 }, + spriteSourceSize: { x: 0, y: 0, w: 120, h: 100 }, + sourceSize: { w: 120, h: 100 }, + }; + + this.parseFrame(data, (texture) => + { + expect(texture.width).to.equal(120); + expect(texture.height).to.equal(100); + done(); + }); + }); });