矩陣轉換在相鄰的精靈造成子像素的差距

Question

我有三個精靈，堆疊在彼此的頂部。

我修改了他們的transform.matrix以使它們的外觀一致。

但是，根據比例因子，瓷磚之間有時會出現小裂紋。

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

我想知道如何解決這個問題。我知道，text objects in AS3 have options for sub-pixel rendering。也許所有的AS3都有類似的設置？其他想法？

不工作的策略：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; 
    } 

} 
} 

而且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

有差距的原因是由於舍入誤差。 Flash只能將元素定位到像素的二十分之一（緹）。你在

• 3.152000000000008
• 7.092000000000018
• 11.032000000000028

分別設置y的位置。顯然，這比第二十次更精確，因此四捨五入。一旦發生舍入，你很容易出錯。

在我看來，你應該把所有的物品放在其他容器內，然後縮放容器。您只能執行一次轉換，但得到相同結果的方式。

但是我明白在某些情況下可能需要這種方法。這種方法是首先執行所有的比例變換。然後執行相對於前一個精靈的翻譯。這樣它總是會基於以前的四捨五入藥水。這裏有一個簡單的例子，從你的課堂上被黑掉。顯然有很多方法來組織這個，但我試圖堅持玩你工作的方式爲了簡單。

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; 
     } 

} 
} 

希望幫助

詹姆斯