Question

I have three sprites, stacked on top of each other.

I modify their transform.matrix to give the appearance they are growing in unison.

However, small cracks sometimes appear between the tiles depending on the scaling factor.

cracks between sprites http://img21.imageshack.us/img21/7518/cracks.png

I am wondering how to fix this.

I know that text objects in AS3 have options for sub-pixel rendering. Maybe a similiar setting exists for all of AS3? Other ideas?

Tactics which don’t work: cacheAsBitmap.

package {  import flash.display.Sprite; import flash.geom.Matrix; import flash.geom.Point;  import mx.core.UIComponent;  public class tmpa extends UIComponent {      private var _scale:Number;      private var _s1:Sprite;     private var _s2:Sprite;     private var _s3:Sprite;      private var _s1Pt:Point;     private var _s2Pt:Point;     private var _s3Pt:Point;      private var _tileDim:int;       public function tmpa( ):void     {         _scale = 1;         _tileDim = 100;          _s1 = new Sprite();         _s2 = new Sprite();         _s3 = new Sprite();          paintSprite( _s1, _tileDim );         paintSprite( _s2, _tileDim );         paintSprite( _s3, _tileDim );          _s1Pt = new Point( 100, _tileDim );         _s1.x = _s1Pt.x;         _s1.y = _s1Pt.y;         _s2Pt = new Point( 100, _tileDim*2 );         _s2.x = _s2Pt.x;         _s2.y = _s2Pt.y;         _s3Pt = new Point( 100, _tileDim*3 );         _s3.x = _s3Pt.x;         _s3.y = _s3Pt.y;          addChild( _s1 );         addChild( _s2 );         addChild( _s3 );          scale = 1.0394; //cracks         //scale = 1.0306; // nocracks     }      private function paintSprite( s:Sprite, dim:int, color:int=0xFF0000 ):void     {   s.graphics.beginFill( color, .5 );         s.graphics.drawRect( 0, 0, dim, dim );         s.graphics.endFill( );     }       public function set scale( s:Number ):void     {   _scale = s;          var scaleFromPt:Point = new Point( 20, 20 );         updateSpriteMatrix( _s1, _s1.globalToLocal(scaleFromPt), _s1Pt );         updateSpriteMatrix( _s2, _s2.globalToLocal(scaleFromPt), _s2Pt );         updateSpriteMatrix( _s3, _s3.globalToLocal(scaleFromPt), _s3Pt );     }      public function get scale( ):Number     {   return _scale;     }      private function updateSpriteMatrix( t:Sprite, ctrPt:Point, regPt:Point ):void     {   var mx:Matrix = t.transform.matrix;         mx.identity();         mx.scale( _scale, _scale );         mx.translate( ctrPt.x*(1-_scale), ctrPt.y*(1-_scale));         mx.translate( regPt.x, regPt.y );         t.transform.matrix = mx;     }  } } 

And the mxml:

<mx:Application xmlns:mx='http://www.adobe.com/2006/mxml'             xmlns:a='*'             width='100%' height='100%'             paddingTop='0' paddingBottom='0' paddingLeft='0' paddingRight='0'             backgroundColor='0x000000'             backgroundGradientAlphas='undefined'>     <a:tmpa id='t' width='100%' height='100%' x='0' y='0' left='0' top='0'/> </mx:Application> 

Answer 1

The reason there are gaps is due to rounding errors. Flash can only position elements down to 1 twentieth of a pixel (a twip). You were setting the y positions at

• 3.152000000000008
• 7.092000000000018
• 11.032000000000028

respectively. Obviously this is much more precise than a twentieth so rounding occurs. Once rounding happens you are prone to errors.

In my opinion you should be putting all the items inside some other container and then scaling the container. The way you only perform one transform but get the same result.

However i understand there may be a need for this method in some situations. The way round this is to perform all the scale transforms first. Then perform the translations relative to the previous sprite. That way it’s always going to be based on the previously rounded potion. Here’s a quick example hacked out of your class. Obviously there are many ways to organise this but I’ve tried to stick toy the way you work for simplicity.

package {  import flash.display.Sprite; import flash.geom.Matrix; import flash.geom.Point;  import mx.core.UIComponent;  public class tmpa extends UIComponent {          private var _scale:Number;          private var _s1:Sprite;         private var _s2:Sprite;         private var _s3:Sprite;          private var _s1Pt:Point;         private var _s2Pt:Point;         private var _s3Pt:Point;          private var _tileDim:int;           public function tmpa( ):void         {                 _scale = 1;                 _tileDim = 100;                  _s1 = new Sprite();                 _s2 = new Sprite();                 _s3 = new Sprite();                  paintSprite( _s1, _tileDim );                 paintSprite( _s2, _tileDim );                 paintSprite( _s3, _tileDim );                  _s1Pt = new Point( 100, _tileDim );                 _s1.x = _s1Pt.x;                 _s1.y = _s1Pt.y;                 _s2Pt = new Point( 100, _tileDim*2 );                 _s2.x = _s2Pt.x;                 _s2.y = _s2Pt.y;                 _s3Pt = new Point( 100, _tileDim*3 );                 _s3.x = _s3Pt.x;                 _s3.y = _s3Pt.y;                  _s1.transform.matrix = new Matrix();                 _s2.transform.matrix = new Matrix();                 _s3.transform.matrix = new Matrix();                  addChild( _s1 );                 addChild( _s2 );                 addChild( _s3 );                  scale = 1.0394; //cracks                 //scale = 1.0306; // nocracks         }          private function paintSprite( s:Sprite, dim:int, color:int=0xFF0000 ):void         {       s.graphics.beginFill( color, .5 );                 s.graphics.drawRect( 0, 0, dim, dim );                 s.graphics.endFill( );         }          public function set scale( s:Number ):void         {       _scale = s;                  scaleSpriteMatrix( _s1 );                 scaleSpriteMatrix( _s2 );                 scaleSpriteMatrix( _s3 );                  translateSprite(_s2, _s1);                 translateSprite(_s3, _s2);         }          public function get scale( ):Number         {       return _scale;         }          private function scaleSpriteMatrix( targetSprite:Sprite):void         {       var mx:Matrix = targetSprite.transform.matrix;                 mx.scale( _scale, _scale );                 targetSprite.transform.matrix = mx;         }          private function translateSprite( targetSprite:Sprite, basedOnSprite:Sprite):void         {       var mx:Matrix = targetSprite.transform.matrix;                 mx.translate( basedOnSprite.x, basedOnSprite.y + basedOnSprite.height);                 targetSprite.transform.matrix = mx;         }  } } 

Hope that helps

James