flash as3 tiling background horizontally

Attached is code showing how you could do it on the timeline, but I can gladly port it to being a class if you would prefer.

It creates a new Bitmap with a width as wide as the stageWidth and a hight the size of the passed in bitmap, docked to the bottom of the stage.

If you would like me to modify the code in any way to suit your needs better, or if there is any part of the code you would like me to explain, just ask. There may be a bug or two in the code, but if you have any problems, just post the error message and I will fix it up.

There is more information on BitmapData.copyPixels() in these links:
http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/display/BitmapData.html#copyPixels%28%29
http://gamedev.michaeljameswilliams.com/2010/02/28/blitting-movie-clips-flash-as3/

Cheers,
Andreas

var imageToTile:Bitmap = ...;
var imageToTileBMD:BitmapData = imageToTile.bitmapData;

var tileBitmap = new Bitmap();
this.addChild(tileBitmap);

//Start the initial drawing
redrawTiles();

stage.addEventListener(Event.RESIZE, redrawTiles);

function redrawTiles(ev:Event):void
{
    //Figure out how many tiles need to be drawn to fill the stage width
    var totalTiles:int = Math.ceil(stage.stageWidth / imageToTileBMD.width);
    var bmd:BitmapData = new BitmapData(stage.stageWidth, imageToTileBMD.height);
    var sourceRect:Rectangle = new Rectangle(0, 0, imageToTileBMD.width, imageToTileBMD.height);
    
    for (var i:int = 0; i < totalTiles; i++)
    {
        bmd.copyPixels(imageToTile, sourceRect, new Point(i * imageToTileBMD.width, 0));
    }
    
    tileBitmap.bitmapData = bmd;
    
    tileBitmap.x = 0;
    tileBitmap.y = stage.stageHeight - tileBitmap.height;
}

Select allOpen in new window

Hello all,

Thanks for your replies...

@ iqandreas
I have tried your solution but it gives me an error:
1067: Implicit coercion of a value of type flash.display:Bitmap to an unrelated type flash.display:BitmapData.

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

stage.addEventListener(Event.RESIZE, resizeListener,false,0,true);

// Create a variable to hold the bitmapData of your image and fill it with
// the data from your PixPattern class
 var bmd:BitmapData=new grass(0,0);
   
// Create a shape to act as canvas
var canvas:Shape=new Shape();
addChild(canvas);
   
// Create a function to draw the tiles to your canvas
// 1  clear the canvas
// 2  use your bitmapData as paint - remember to set repeat=true (third parameter)
// 3  draw a rectangle using stageWidth and bitmapData height
// 4  stop painting
// 5  align to bottom of stage
function drawTiles(e:Event):void {
	canvas.graphics.clear();
	canvas.graphics.beginBitmapFill(bmd,null,true,false);
	canvas.graphics.drawRect(0,0,stage.stageWidth,bmd.height);
	canvas.graphics.endFill();
	canvas.y = Math.ceil(stage.stageHeight-canvas.height);
}

// resize stage
function resizeStuff():void{
	var movieWidth:Number = stage.stageWidth;
	var movieHeight:Number = stage.stageHeight;
	
	backgroundMC.width = movieWidth;
	backgroundMC.height = movieHeight;
	
	big_header.x = movieWidth/2;
	big_header.y = 100;
	
	drawTiles(null);
}

// resize stage listener function
function resizeListener(e:Event):void {
	resizeStuff();
}

resizeStuff();
// Call drawTiles to paint the canvas when your movie has loaded
drawTiles(null);

Select allOpen in new window

Hey, part of the previous comment is missing... strange..

@ jacob

Nice short code.. But somehow a tile gets copies on the TopLeft of the page.
Check: http://www.skyboxdevelopment.nl/clients/pepijn/

I have posted the code in the previous comment.

greetz,
walter

Hi Walter,

Be sure that the image is only in your library (not on the stage).

Best,
Jakob E  

As for my code, which value did you set the image as?

Let's say your Bitmap it named "BackgroundImage" in the library. The code should look like this:
var imageToTile:Bitmap = new BackgroundImage();var imageToTileBMD:BitmapData = imageToTile.bitmapData;

If you already have the bitmap you want to copy on the stage, do like this:
var imageToTile:Bitmap = myBitmapThatIsOnTheStage;
var imageToTileBMD:BitmapData = imageToTile.bitmapData;this.removeChild(myBitmapThatIsOnTheStage);

And then the rest of the code. Give it a try, and it should work.

If not, if you debug using CTRL+SHIFT+ENTER, you are told the exact line that the error is at. Post back EXACTLY what error it gives you, and it will be easier to debug.

@jakob

How stupid of me... yes it was the image in the stage... works perfectly!

@IqAndreas

Still getting errors...

line 27 1067: Implicit coercion of a value of type flash.display:Bitmap to an unrelated type flash.display:BitmapData.

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

stage.addEventListener(Event.RESIZE, resizeListener);

// --- tile
var imageToTile:Bitmap = new grass(0,0);
var imageToTileBMD:BitmapData = imageToTile.bitmapData;

var tileBitmap = new Bitmap();
this.addChild(tileBitmap);

//Start the initial drawing




function redrawTiles(ev:Event):void
{
    //Figure out how many tiles need to be drawn to fill the stage width
    var totalTiles:int = Math.ceil(stage.stageWidth / imageToTileBMD.width);
    var bmd:BitmapData = new BitmapData(stage.stageWidth, imageToTileBMD.height);
    var sourceRect:Rectangle = new Rectangle(0, 0, imageToTileBMD.width, imageToTileBMD.height);
    
    for (var i:int = 0; i < totalTiles; i++)
    {
        bmd.copyPixels(imageToTile, sourceRect, new Point(i * imageToTileBMD.width, 0));
    }
    
    tileBitmap.bitmapData = bmd;
    
    tileBitmap.x = 0;
    tileBitmap.y = stage.stageHeight - tileBitmap.height;
}
// ---



function resizeStuff():void{
	var movieWidth:Number = stage.stageWidth;
	var movieHeight:Number = stage.stageHeight;
	
	backgroundMC.width = movieWidth;
	backgroundMC.height = movieHeight;
	
	big_header.x = movieWidth/2;
	big_header.y = 100;
	
	redrawTiles(null);
}

resizeStuff();

function resizeListener(e:Event):void {
	resizeStuff();
}

Select allOpen in new window

Ey... again... whole pieces of my comments are ignored when posting strange..

@IqAndreas

here are the errors again:

@IqAndreas

Still getting errors...

line 27 1067: Implicit coercion of a value of type flash.display:Bitmap to an unrelated type flash.display:BitmapData.

And again pieces of my comments are ignored... now in richtext editing mode...

@IqAndreas

Still getting errors...

line 27 1067: Implicit coercion of a value of type flash.display:Bitmap to an unrelated type flash.display:BitmapData.
bmd.copyPixels(imageToTile, sourceRect, new Point(i * imageToTileBMD.width, 0));

line 7 1067: Implicit coercion of a value of type grass to an unrelated type flash.display:Bitmap.

var imageToTile:Bitmap = new grass(0,0);

I have posted the code below. The bitmap is in the library an has and the classname is 'grass'

By the way, what is the difference between your code and jakob's? Is one faster than the other or...

greetz,
walter