在拼贴背景上创建视差

Question

我使用的是来自8bitrocket.com的Jeff用于创建拼贴的blitting技术。我试图在bitmap上绘制2层bitmapdata。第一层是背景（1张图片）。第二层是瓷砖。在下面的那堂课。 updateMap是在循环中调用重新绘制图像的方法。

package com.eapi 
{ 
    /** 
    * ... 
    * @author Anthony Gordon 
    */ 
    import com.objects.XmlManager; 
    import flash.display.MovieClip; 
    import flash.display.Sprite; 
    import flash.events.*; 
    import flash.display.BitmapData; 
    import flash.display.Bitmap 
    import flash.geom.Rectangle; 
    import flash.geom.Point; 
    import flash.display.DisplayObject; 

    public class EngineApi extends MovieClip 
    { 
     public var images:Array; 
     public var world:Array; 
     //w stands for world, how big it is in columns and rows 
     private var wCols:Number = 50; 
     private var wRows:Number = 16; 

     public var wWidth:Number; 
     public var wHeight:Number; 
     //v stands for view, which means your field of view 
     public var vRows:Number; 
     public var vCols:Number; 

     public var vWidth:Number = 540; 
     public var vHeight:Number = 360; 
     //how big your indivual tile is 
     public var tileW:Number = 80; 
     public var tileH:Number = 80; 

     public var offsX:Number = 0; 
     public var offsY:Number = 0; 
     public var xEnd:Number = 0; 
     public var yEnd:Number = 0; 
     public var tilex:int; 
     public var tiley:int; 

     public var scrollx:Number = 0; 
     public var scrolly:Number = 0; 

     private var screen:Bitmap; 
     private var canvas:BitmapData; 
     private var buffer:BitmapData; 
     public var mapHolder:Array; 
     private var scrollLoop:Boolean; 

     private var minLoop:Number; 
     private var maxLoop:Number; 

     public var currentMap:Number = 0; 
     private var queue:Array; 

     public var currentCol:Number = 0; 
     public var currentRow:Number = 0; 
     public var enviroment:Array; 
     public var currentTileSheet:Number = 0; 

     private var layer1:Sprite; 
     private var layer2:Sprite; 
     private var layer3:Sprite; 
     private var layer4:Sprite; 
     private var layer5:Sprite; 

     public var background:BitmapData 

     protected var stageObject:Array; 
     protected var gameObjects:Array; 

     public function EngineApi(w:Number = 540,h:Number = 360, tw:Number = 50, th:Number = 50) 
     { 

      stageObject = new Array(); 
      gameObjects = new Array(); 

      //Add Layers 
      layer1 = new Sprite(); 
      layer2 = new Sprite(); 
      layer3 = new Sprite(); 
      layer4 = new Sprite(); 
      layer5 = new Sprite(); 
      //end 

      images = new Array(); 
      vWidth = w; 
      vHeight = h; 
      tileW = tw; 
      tileH = th; 
      queue = new Array(); 

      mapHolder = new Array(); 

      vCols = Math.floor(vWidth/tileW); 
      vRows = Math.floor(vHeight/tileH); 

      wWidth = wCols * tileW; 
      wHeight = wRows * tileH; 

      canvas = new BitmapData(vWidth,vHeight,true,0x000000); 
      buffer = new BitmapData(vWidth + 2 * tileW, vHeight + 2 * tileH ,false,0x000000);   
      screen = new Bitmap(canvas); 

      addChild(screen); 

      addChild(layer1); 
      addChild(layer2); 
      addChild(layer3); 
      addChild(layer4); 
      addChild(layer5); 
     } 

     public function addGameChild(object:IGameObject, layer:Number):void 
     { 
      switch(layer) 
      { 
       case 1: 
        layer1.addChild(DisplayObject(object)); 
       break; 
       case 2: 
        layer2.addChild(DisplayObject(object)); 
       break; 
       case 3: 
        layer3.addChild(DisplayObject(object)); 
       break; 
       case 4: 
        layer4.addChild(DisplayObject(object)); 
       break; 
       case 5: 
        layer5.addChild(DisplayObject(object)); 
       break; 
       default: 
      } 

      if (object.IsDisplay == true) 
       gameObjects.push(object); 

      stageObject.push(object); 
     } 

     public function UpDateMap():void 
     { 
      offsX += scrollx; 
      offsY += scrolly; 

      tilex = int(offsX/tileW); 
      tiley = int(offsY/tileH); 

      xEnd = tilex + vWidth; 
      yEnd = tiley + vHeight; 

      var tileNum:int; 

      var tilePoint:Point = new Point(0,0); 
      var tileRect:Rectangle = new Rectangle(0, 0, tileW, tileH); 

      var rowCtr:int=0; 
      var colCtr:int=0; 

      for (rowCtr=0; rowCtr <= vRows; rowCtr++) { 
       for (colCtr = 0; colCtr <= vCols; colCtr++) { 

        currentCol = colCtr+tilex; 
        currentRow = rowCtr+tiley; 
        tileNum = mapHolder[currentMap][rowCtr+tiley][colCtr+tilex]; 
        tilePoint.x = colCtr * tileW; 
        tilePoint.y = rowCtr * tileH; 
        tileRect.x = int((tileNum % 100))* tileW; 
        tileRect.y = int((tileNum/100))* tileH; 
        buffer.copyPixels(images[currentTileSheet],tileRect,tilePoint); 
       }    
      }//End Loop 
      var bgRect:Rectangle = new Rectangle(0, 0, 544, 510); 
      var bgPoint:Point = new Point(0, 0); 

      var bufferRect:Rectangle = new Rectangle(0,0,vWidth,vHeight); 
      var bufferPoint:Point = new Point();    

      bufferRect.x = offsX % tileW; 
      bufferRect.y = offsY % tileH; 

      canvas.copyPixels(background,bgRect,bgPoint); 
      canvas.copyPixels(buffer,bufferRect,bufferPoint); 

     }//End UpdateMap 

     public function StartRender():void 
     { 
      addEventListener(Event.ENTER_FRAME, loop); 
     } 

     protected function loop(e:Event):void 
     {   
      UpDateMap(); 
      UpdateObjects(); 
     } 

     protected function UpdateObjects():void 
     { 
      for (var i:Number = 0; i < stageObject.length; i++) 
      { 
       stageObject[i].UpdateObject(); 
      } 

      for (var g:Number = 0; g < stageObject.length; g++) 
      { 
       if (stageObject[g].Garbage && stageObject[g].IsDisplay) 
       { 
        removeChild(DisplayObject(stageObject[g])); 
        stageObject[g] = null; 
       } 
       else if (stageObject[g].Garbage == true && stageObject[g].IsDisplay == false) 
       { 
        stageObject[g] = null;     
       } 
      } 

     } 

     public function StopRender():void 
     { 
      removeEventListener(Event.ENTER_FRAME, loop); 
     } 

    } 

} 

这不是完整的代码，但如果我删除canvas.copyPixels(background,bgRect,bgPoint);或canvas.copyPixels(buffer,bufferRect,bufferPoint);我可以看到或。如果我把它们都画出来，那么我只能看到最后画的那个。我的瓷砖图像是128 x 32。0 - 3.阵列3是透明图像。我希望能透过图像看到背景。我错了。

起初，它是一个全黑的背景，但后来我改变了缓冲区变量的透明构造函数为true。现在它显示了一个白色背景（如舞台），但仍然没有背景图像。

Answer 1

我拍摄了一个单独的动画片段，并将其用作位于贴图片背后的视差。

Answer 2

我不确定我是否完全理解该示例，但看起来问题是您正在使用copyPixels - 此应该用新值替换canvas bmp中的旧像素。

尝试使用draw的前景，而不是：

canvas.copyPixels(background, bgRect, bgPoint); 
canvas.draw(buffer, transform, null, null, clipRect); 

而且，我不知道为什么你绘制背景图像的矩形不同比前景？那里可能有些东西。