diff --git a/src/core/const.js b/src/core/const.js index 5017541..ae7c9f3 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -103,6 +103,8 @@ */ RETINA_PREFIX: '@2x', + RESOLUTION:2, + /** * The default render options if none are supplied to {@link PIXI.WebGLRenderer} * or {@link PIXI.CanvasRenderer}. diff --git a/src/core/const.js b/src/core/const.js index 5017541..ae7c9f3 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -103,6 +103,8 @@ */ RETINA_PREFIX: '@2x', + RESOLUTION:2, + /** * The default render options if none are supplied to {@link PIXI.WebGLRenderer} * or {@link PIXI.CanvasRenderer}. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 9804b07..49c5d61 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -248,10 +248,10 @@ var worldTransform = sprite.worldTransform; - var a = worldTransform.a / resolution; - var b = worldTransform.b / resolution; - var c = worldTransform.c / resolution; - var d = worldTransform.d / resolution; + var a = worldTransform.a// / resolution; + var b = worldTransform.b// / resolution; + var c = worldTransform.c// / resolution; + var d = worldTransform.d// / resolution; var tx = worldTransform.tx; var ty = worldTransform.ty; diff --git a/src/core/const.js b/src/core/const.js index 5017541..ae7c9f3 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -103,6 +103,8 @@ */ RETINA_PREFIX: '@2x', + RESOLUTION:2, + /** * The default render options if none are supplied to {@link PIXI.WebGLRenderer} * or {@link PIXI.CanvasRenderer}. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 9804b07..49c5d61 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -248,10 +248,10 @@ var worldTransform = sprite.worldTransform; - var a = worldTransform.a / resolution; - var b = worldTransform.b / resolution; - var c = worldTransform.c / resolution; - var d = worldTransform.d / resolution; + var a = worldTransform.a// / resolution; + var b = worldTransform.b// / resolution; + var c = worldTransform.c// / resolution; + var d = worldTransform.d// / resolution; var tx = worldTransform.tx; var ty = worldTransform.ty; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 017790b..c547872 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -10,7 +10,7 @@ * @param source {Image|Canvas} the source object of the texture. * @param [scaleMode=scaleModes.DEFAULT] {number} See {@link SCALE_MODES} for possible values */ -function BaseTexture(source, scaleMode) +function BaseTexture(source, scaleMode, resolution) { this.uuid = utils.uuid(); @@ -19,7 +19,7 @@ * * @member {number} */ - this.resolution = 1; + this.resolution = resolution || 1; /** * The width of the base texture set when the image has loaded @@ -37,6 +37,11 @@ */ this.height = 100; + // TODO docs + // used to store the actual dimensions of the source + this.realWidth = 100; + this.realHeight = 100; + /** * The scale mode to apply when scaling this texture * @@ -274,8 +279,12 @@ { this.hasLoaded = true; - this.width = this.source.naturalWidth || this.source.width; - this.height = this.source.naturalHeight || this.source.height; + this.realWidth = this.source.naturalWidth || this.source.width; + this.realHeight = this.source.naturalHeight || this.source.height; + + this.width = this.realWidth / this.resolution; + this.height = this.realHeight / this.resolution; + this.isPowerOfTwo = utils.isPowerOfTwo(this.width, this.height); @@ -371,10 +380,7 @@ utils.BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if ( imageUrl.indexOf(CONST.RETINA_PREFIX + '.') !== -1) - { - baseTexture.resolution = 2; - } + this.resolution = utils.getResolutionOfUrl(imageUrl); } return baseTexture; diff --git a/src/core/const.js b/src/core/const.js index 5017541..ae7c9f3 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -103,6 +103,8 @@ */ RETINA_PREFIX: '@2x', + RESOLUTION:2, + /** * The default render options if none are supplied to {@link PIXI.WebGLRenderer} * or {@link PIXI.CanvasRenderer}. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 9804b07..49c5d61 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -248,10 +248,10 @@ var worldTransform = sprite.worldTransform; - var a = worldTransform.a / resolution; - var b = worldTransform.b / resolution; - var c = worldTransform.c / resolution; - var d = worldTransform.d / resolution; + var a = worldTransform.a// / resolution; + var b = worldTransform.b// / resolution; + var c = worldTransform.c// / resolution; + var d = worldTransform.d// / resolution; var tx = worldTransform.tx; var ty = worldTransform.ty; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 017790b..c547872 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -10,7 +10,7 @@ * @param source {Image|Canvas} the source object of the texture. * @param [scaleMode=scaleModes.DEFAULT] {number} See {@link SCALE_MODES} for possible values */ -function BaseTexture(source, scaleMode) +function BaseTexture(source, scaleMode, resolution) { this.uuid = utils.uuid(); @@ -19,7 +19,7 @@ * * @member {number} */ - this.resolution = 1; + this.resolution = resolution || 1; /** * The width of the base texture set when the image has loaded @@ -37,6 +37,11 @@ */ this.height = 100; + // TODO docs + // used to store the actual dimensions of the source + this.realWidth = 100; + this.realHeight = 100; + /** * The scale mode to apply when scaling this texture * @@ -274,8 +279,12 @@ { this.hasLoaded = true; - this.width = this.source.naturalWidth || this.source.width; - this.height = this.source.naturalHeight || this.source.height; + this.realWidth = this.source.naturalWidth || this.source.width; + this.realHeight = this.source.naturalHeight || this.source.height; + + this.width = this.realWidth / this.resolution; + this.height = this.realHeight / this.resolution; + this.isPowerOfTwo = utils.isPowerOfTwo(this.width, this.height); @@ -371,10 +380,7 @@ utils.BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if ( imageUrl.indexOf(CONST.RETINA_PREFIX + '.') !== -1) - { - baseTexture.resolution = 2; - } + this.resolution = utils.getResolutionOfUrl(imageUrl); } return baseTexture; diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 84df39f..222cb87 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -134,6 +134,27 @@ }, /** + * get the resolution of an asset by looking for the prefix + * used by spritesheets and image urls + * TODO make this smarter! + * + * @param width {number} + * @param height {number} + * @return {boolean} + */ + getResolutionOfUrl: function (url) + { + if ( url.indexOf(CONST.RETINA_PREFIX + '.') !== -1) + { + return 2; + } + else + { + return 1; + } + }, + + /** * Logs out the version and renderer information for this running instance of PIXI. * If you don't want to see this message you can set `PIXI.utils._saidHello = true;` * so the library thinks it already said it. Keep in mind that doing that will forever diff --git a/src/core/const.js b/src/core/const.js index 5017541..ae7c9f3 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -103,6 +103,8 @@ */ RETINA_PREFIX: '@2x', + RESOLUTION:2, + /** * The default render options if none are supplied to {@link PIXI.WebGLRenderer} * or {@link PIXI.CanvasRenderer}. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 9804b07..49c5d61 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -248,10 +248,10 @@ var worldTransform = sprite.worldTransform; - var a = worldTransform.a / resolution; - var b = worldTransform.b / resolution; - var c = worldTransform.c / resolution; - var d = worldTransform.d / resolution; + var a = worldTransform.a// / resolution; + var b = worldTransform.b// / resolution; + var c = worldTransform.c// / resolution; + var d = worldTransform.d// / resolution; var tx = worldTransform.tx; var ty = worldTransform.ty; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 017790b..c547872 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -10,7 +10,7 @@ * @param source {Image|Canvas} the source object of the texture. * @param [scaleMode=scaleModes.DEFAULT] {number} See {@link SCALE_MODES} for possible values */ -function BaseTexture(source, scaleMode) +function BaseTexture(source, scaleMode, resolution) { this.uuid = utils.uuid(); @@ -19,7 +19,7 @@ * * @member {number} */ - this.resolution = 1; + this.resolution = resolution || 1; /** * The width of the base texture set when the image has loaded @@ -37,6 +37,11 @@ */ this.height = 100; + // TODO docs + // used to store the actual dimensions of the source + this.realWidth = 100; + this.realHeight = 100; + /** * The scale mode to apply when scaling this texture * @@ -274,8 +279,12 @@ { this.hasLoaded = true; - this.width = this.source.naturalWidth || this.source.width; - this.height = this.source.naturalHeight || this.source.height; + this.realWidth = this.source.naturalWidth || this.source.width; + this.realHeight = this.source.naturalHeight || this.source.height; + + this.width = this.realWidth / this.resolution; + this.height = this.realHeight / this.resolution; + this.isPowerOfTwo = utils.isPowerOfTwo(this.width, this.height); @@ -371,10 +380,7 @@ utils.BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if ( imageUrl.indexOf(CONST.RETINA_PREFIX + '.') !== -1) - { - baseTexture.resolution = 2; - } + this.resolution = utils.getResolutionOfUrl(imageUrl); } return baseTexture; diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 84df39f..222cb87 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -134,6 +134,27 @@ }, /** + * get the resolution of an asset by looking for the prefix + * used by spritesheets and image urls + * TODO make this smarter! + * + * @param width {number} + * @param height {number} + * @return {boolean} + */ + getResolutionOfUrl: function (url) + { + if ( url.indexOf(CONST.RETINA_PREFIX + '.') !== -1) + { + return 2; + } + else + { + return 1; + } + }, + + /** * Logs out the version and renderer information for this running instance of PIXI. * If you don't want to see this message you can set `PIXI.utils._saidHello = true;` * so the library thinks it already said it. Keep in mind that doing that will forever diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 5e22e70..5a519d5 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -16,6 +16,8 @@ var route = path.dirname(resource.url.replace(this.baseUrl, '')); + var resolution = core.utils.getResolutionOfUrl( resource.url ) + // load the image for this sheet this.add(resource.name + '_image', this.baseUrl + route + '/' + resource.data.meta.image, loadOptions, function (res) { @@ -43,11 +45,11 @@ if (frames[i].trimmed) { trim = new core.math.Rectangle( - frames[i].spriteSourceSize.x, - frames[i].spriteSourceSize.y, - frames[i].sourceSize.w, - frames[i].sourceSize.h - ); + frames[i].spriteSourceSize.x / resolution, + frames[i].spriteSourceSize.y / resolution, + frames[i].sourceSize.w / resolution, + frames[i].sourceSize.h / resolution + ); } // flip the width and height! @@ -58,6 +60,11 @@ size.height = temp; } + size.x /= resolution; + size.y /= resolution; + size.width /= resolution; + size.height /= resolution; + resource.textures[i] = new core.Texture(res.texture.baseTexture, size, size.clone(), trim, frames[i].rotated); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/core/const.js b/src/core/const.js index 5017541..ae7c9f3 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -103,6 +103,8 @@ */ RETINA_PREFIX: '@2x', + RESOLUTION:2, + /** * The default render options if none are supplied to {@link PIXI.WebGLRenderer} * or {@link PIXI.CanvasRenderer}. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 9804b07..49c5d61 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -248,10 +248,10 @@ var worldTransform = sprite.worldTransform; - var a = worldTransform.a / resolution; - var b = worldTransform.b / resolution; - var c = worldTransform.c / resolution; - var d = worldTransform.d / resolution; + var a = worldTransform.a// / resolution; + var b = worldTransform.b// / resolution; + var c = worldTransform.c// / resolution; + var d = worldTransform.d// / resolution; var tx = worldTransform.tx; var ty = worldTransform.ty; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 017790b..c547872 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -10,7 +10,7 @@ * @param source {Image|Canvas} the source object of the texture. * @param [scaleMode=scaleModes.DEFAULT] {number} See {@link SCALE_MODES} for possible values */ -function BaseTexture(source, scaleMode) +function BaseTexture(source, scaleMode, resolution) { this.uuid = utils.uuid(); @@ -19,7 +19,7 @@ * * @member {number} */ - this.resolution = 1; + this.resolution = resolution || 1; /** * The width of the base texture set when the image has loaded @@ -37,6 +37,11 @@ */ this.height = 100; + // TODO docs + // used to store the actual dimensions of the source + this.realWidth = 100; + this.realHeight = 100; + /** * The scale mode to apply when scaling this texture * @@ -274,8 +279,12 @@ { this.hasLoaded = true; - this.width = this.source.naturalWidth || this.source.width; - this.height = this.source.naturalHeight || this.source.height; + this.realWidth = this.source.naturalWidth || this.source.width; + this.realHeight = this.source.naturalHeight || this.source.height; + + this.width = this.realWidth / this.resolution; + this.height = this.realHeight / this.resolution; + this.isPowerOfTwo = utils.isPowerOfTwo(this.width, this.height); @@ -371,10 +380,7 @@ utils.BaseTextureCache[imageUrl] = baseTexture; // if there is an @2x at the end of the url we are going to assume its a highres image - if ( imageUrl.indexOf(CONST.RETINA_PREFIX + '.') !== -1) - { - baseTexture.resolution = 2; - } + this.resolution = utils.getResolutionOfUrl(imageUrl); } return baseTexture; diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 84df39f..222cb87 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -134,6 +134,27 @@ }, /** + * get the resolution of an asset by looking for the prefix + * used by spritesheets and image urls + * TODO make this smarter! + * + * @param width {number} + * @param height {number} + * @return {boolean} + */ + getResolutionOfUrl: function (url) + { + if ( url.indexOf(CONST.RETINA_PREFIX + '.') !== -1) + { + return 2; + } + else + { + return 1; + } + }, + + /** * Logs out the version and renderer information for this running instance of PIXI. * If you don't want to see this message you can set `PIXI.utils._saidHello = true;` * so the library thinks it already said it. Keep in mind that doing that will forever diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 5e22e70..5a519d5 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -16,6 +16,8 @@ var route = path.dirname(resource.url.replace(this.baseUrl, '')); + var resolution = core.utils.getResolutionOfUrl( resource.url ) + // load the image for this sheet this.add(resource.name + '_image', this.baseUrl + route + '/' + resource.data.meta.image, loadOptions, function (res) { @@ -43,11 +45,11 @@ if (frames[i].trimmed) { trim = new core.math.Rectangle( - frames[i].spriteSourceSize.x, - frames[i].spriteSourceSize.y, - frames[i].sourceSize.w, - frames[i].sourceSize.h - ); + frames[i].spriteSourceSize.x / resolution, + frames[i].spriteSourceSize.y / resolution, + frames[i].sourceSize.w / resolution, + frames[i].sourceSize.h / resolution + ); } // flip the width and height! @@ -58,6 +60,11 @@ size.height = temp; } + size.x /= resolution; + size.y /= resolution; + size.width /= resolution; + size.height /= resolution; + resource.textures[i] = new core.Texture(res.texture.baseTexture, size, size.clone(), trim, frames[i].rotated); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 4db89a3..0b054df 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,9 @@ // 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)); + console.log(resource); + + resource.texture = new core.Texture(new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url))); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions core.utils.TextureCache[resource.url] = resource.texture; }