Fixed resolution issues with sprites.

Author: Andrew Start

bin/pixi.js

@@ -108,11 +108,11 @@ Object.defineProperties(Sprite.prototype, {
     width: {
         get: function ()
         {
-            return this.scale.x * this.texture._frame.width;
+            return this.scale.x * this.texture.width;
         },
         set: function (value)
         {
-            this.scale.x = value / this.texture._frame.width;
+            this.scale.x = value / this.texture.width;
             this._width = value;
         }
     },
@@ -126,11 +126,11 @@ Object.defineProperties(Sprite.prototype, {
     height: {
         get: function ()
         {
-            return  this.scale.y * this.texture._frame.height;
+            return  this.scale.y * this.texture.height;
         },
         set: function (value)
         {
-            this.scale.y = value / this.texture._frame.height;
+            this.scale.y = value / this.texture.height;
             this._height = value;
         }
     },
@@ -182,12 +182,12 @@ Sprite.prototype._onTextureUpdate = function ()
     // so if _width is 0 then width was not set..
     if (this._width)
     {
-        this.scale.x = this._width / this.texture.frame.width;
+        this.scale.x = this._width / this.texture.width;
     }
 
     if (this._height)
     {
-        this.scale.y = this._height / this.texture.frame.height;
+        this.scale.y = this._height / this.texture.height;
     }
 };
 
@@ -215,8 +215,8 @@ Sprite.prototype.getBounds = function (matrix)
     if(!this._currentBounds)
     {
 
-        var width = this._texture._frame.width;
-        var height = this._texture._frame.height;
+        var width = this._texture.width;
+        var height = this._texture.height;
 
         var w0 = width * (1-this.anchor.x);
         var w1 = width * -this.anchor.x;
@@ -430,16 +430,16 @@ Sprite.prototype._renderCanvas = function (renderer)
             dy = (texture.trim) ? texture.trim.y - this.anchor.y * texture.trim.height : this.anchor.y * -texture._frame.height;
         }
 
-
+        var resolution = texture.baseTexture.resolution;
 
         // Allow for pixel rounding
         if (renderer.roundPixels)
         {
             renderer.context.setTransform(
-                wt.a,
-                wt.b,
-                wt.c,
-                wt.d,
+                wt.a / resolution,
+                wt.b / resolution,
+                wt.c / resolution,
+                wt.d / resolution,
                 (wt.tx * renderer.resolution) | 0,
                 (wt.ty * renderer.resolution) | 0
             );
@@ -451,19 +451,17 @@ Sprite.prototype._renderCanvas = function (renderer)
         {
 
             renderer.context.setTransform(
-                wt.a,
-                wt.b,
-                wt.c,
-                wt.d,
+                wt.a / resolution,
+                wt.b / resolution,
+                wt.c / resolution,
+                wt.d / resolution,
                 wt.tx * renderer.resolution,
                 wt.ty * renderer.resolution
             );
 
 
         }
 
-        var resolution = texture.baseTexture.resolution;
-
         if (this.tint !== 0xFFFFFF)
         {
             if (this.cachedTint !== this.tint)
@@ -478,8 +476,8 @@ Sprite.prototype._renderCanvas = function (renderer)
                 this.tintedTexture,
                 0,
                 0,
-                width * resolution,
-                height * resolution,
+                width,
+                height,
                 dx * renderer.resolution,
                 dy * renderer.resolution,
                 width * renderer.resolution,
@@ -490,10 +488,10 @@ Sprite.prototype._renderCanvas = function (renderer)
         {
             renderer.context.drawImage(
                 texture.baseTexture.source,
-                texture.crop.x * resolution,
-                texture.crop.y * resolution,
-                width * resolution,
-                height * resolution,
+                texture.crop.x,
+                texture.crop.y,
+                width,
+                height,
                 dx  * renderer.resolution,
                 dy  * renderer.resolution,
                 width * renderer.resolution,

bin/pixi.js.map

@@ -203,11 +203,13 @@ SpriteRenderer.prototype.render = function (sprite)
     var index = this.currentBatchSize * this.vertByteSize;
 
     var worldTransform = sprite.worldTransform;
+    
+    var resolution = texture.baseTexture.resolution;
 
-    var a = worldTransform.a;
-    var b = worldTransform.b;
-    var c = worldTransform.c;
-    var d = worldTransform.d;
+    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;
 

bin/pixi.min.js

@@ -127,17 +127,16 @@ function Texture(baseTexture, frame, crop, trim, rotate)
     {
         if (this.noFrame)
         {
-            frame = new math.Rectangle(0, 0, baseTexture.width, baseTexture.height);
-
-            // if there is no frame we should monitor for any base texture changes..
-            baseTexture.on('update', this.onBaseTextureUpdated, this);
+            frame = new math.Rectangle(0, 0, baseTexture.realWidth, baseTexture.realHeight);
         }
         this.frame = frame;
     }
     else
     {
         baseTexture.once('loaded', this.onBaseTextureLoaded, this);
     }
+    //we should monitor for any base texture changes in case the resolution is changed, etc.
+    baseTexture.on('update', this.onBaseTextureUpdated, this);
 
     /**
      * Fired when the texture is updated. This happens if the frame or the baseTexture is updated.
@@ -164,8 +163,10 @@ Object.defineProperties(Texture.prototype, {
 
             this.noFrame = false;
 
-            this.width = frame.width;
-            this.height = frame.height;
+            var resolution = this.baseTexture.resolution;
+            
+            this.width = frame.width / resolution;
+            this.height = frame.height / resolution;
 
 
 
@@ -180,8 +181,8 @@ Object.defineProperties(Texture.prototype, {
             if (this.trim)
             {
 
-                this.width = this.trim.width;
-                this.height = this.trim.height;
+                this.width = this.trim.width / resolution;
+                this.height = this.trim.height / resolution;
                 this._frame.width = this.trim.width;
                 this._frame.height = this.trim.height;
             }
@@ -217,7 +218,7 @@ Texture.prototype.onBaseTextureLoaded = function (baseTexture)
     // TODO this code looks confusing.. boo to abusing getters and setterss!
     if (this.noFrame)
     {
-        this.frame = new math.Rectangle(0, 0, baseTexture.width, baseTexture.height);
+        this.frame = new math.Rectangle(0, 0, baseTexture.realWidth, baseTexture.realHeight);
     }
     else
     {
@@ -229,8 +230,15 @@ Texture.prototype.onBaseTextureLoaded = function (baseTexture)
 
 Texture.prototype.onBaseTextureUpdated = function (baseTexture)
 {
-    this._frame.width = baseTexture.width;
-    this._frame.height = baseTexture.height;
+    if(this.noFrame)
+    {
+        this._frame.width = baseTexture.realWidth;
+        this._frame.height = baseTexture.realHeight;
+    }
+    else
+    {
+        this.frame = this._frame;
+    }
 
     this.emit('update', this);
 };

bin/pixi.min.js.map

@@ -31,8 +31,8 @@ module.exports = TextureUvs;
  */
 TextureUvs.prototype.set = function (frame, baseFrame, rotate)
 {
-    var tw = baseFrame.width;
-    var th = baseFrame.height;
+    var tw = baseFrame.realWidth;
+    var th = baseFrame.realHeight;
 
     if(rotate)
     {