Création d'une parallaxe sur un fond de mosaïque

Question

J'utilise la technique de fusion que Jeff de 8bitrocket.com utilise pour créer des carreaux. J'essaie de peindre 2 couches de bitmapdata sur un bitmap. Une première couche est l'arrière-plan (1 image). et la deuxième couche est les tuiles. Dans cette classe ci-dessous. le updateMap est la méthode qui est appelée dans la boucle pour repeindre l'image.

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

    } 

} 

Ce n'est pas le code complet, mais si je retire canvas.copyPixels(background,bgRect,bgPoint); ou canvas.copyPixels(buffer,bufferRect,bufferPoint); je peux voir ou. Si je les peins tous les deux alors je ne vois que celui qui a peint en dernier. Mon image de tuile est 128 x 32. 0 - 3. Le tableau 3 est l'image transparente. Je l'ai utilisé en espérant que je pourrais voir à travers l'image et voir le fond. J'avais tort.

Au début, il s'agissait d'un arrière-plan entièrement noir, mais j'ai ensuite modifié le constructeur transparent pour qu'il soit vrai sur la variable tampon. Maintenant, il montre un fond blanc (comme la scène), mais toujours pas d'image de fond.

Answer 1

J'ai pris un MovieClip séparé et l'ai utilisé comme parallaxe derrière les carreaux de fusion.

Answer 2

Je ne suis pas sûr de comprendre complètement l'exemple, mais il semble que le problème est que vous utilisez copyPixels - cela devrait remplacer les anciens pixels dans le canvas bmp avec de nouvelles valeurs.

Essayez d'utiliser draw pour le premier plan à la place:

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

Aussi, je ne sais pas pourquoi vous dessinez l'image d'arrière-plan à un rect différent de premier plan? Il peut y avoir quelque chose là-bas.