Infinite Scrolling Bitmap Backgrounds in AS3

This movie requires Flash Player 10

I recently did the website for the movie Cherry. the design we came up with involved making it seem like the website existed on the surface of a single infinite piece of scuffed-up graph paper. [Check the site out here]

And making that site I came up with a simple  little snipped of code for making scrolling backgrounds. I think this could be a good simple way to add a scrolling background to a space shooter. In fact, I just might try making one of those.

But for now, here is the source code for how to make your own infinite backgrounds.

The ScrollingLayer class takes a BitmapData and uses it as a bitmap fill for a shape. And you can make it scroll by changing its transform matrix.

I’ve exposed the x and y aspects of the transform matrix and made them accessible through the properties .dx, .dy, and the function move(dx:Number, dy:Number). the “D” stand for “displacement”.

Here is the ScrollingLayer Class:

package layers
{
	import flash.display.BitmapData;
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Matrix;
	/**
	 * ...
	 * @author Zachary Foley
	 */
	public class ScrollingLayer extends Sprite
	{
		protected var bitmapResource:Class;
		protected var scrollingBitmap:BitmapData;
		protected var _parallaxAmount:Number = 1;
		protected var graphPaperBmp:BitmapData;
		protected var canvas:Graphics;
		protected var matrix:Matrix;
 
		public function ScrollingLayer()
		{
 
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		protected function init(e:Event):void
		{
			matrix = this.transform.matrix.clone();
			removeEventListener(Event.ADDED_TO_STAGE, init);
			canvas = this.graphics;
			drawCanvas();
			stage.addEventListener(Event.RESIZE, handleResize);
		}
 
		protected function handleResize(e:Event):void
		{
			drawCanvas();
		}
 
		public function move(dx:Number, dy:Number):void {
			matrix.translate(dx, dy);
			drawCanvas();
		}
 
		public function get dy():Number { return matrix.ty; }
 
		public function set dy(value:Number):void
		{
			matrix.ty = value * _parallaxAmount;
			drawCanvas();
		}
 
		protected function drawCanvas():void
		{
			canvas.clear();
			canvas.beginBitmapFill(scrollingBitmap, matrix, true, true);
			canvas.drawRect(0,0,stage.stageWidth, stage.stageHeight);
		}
 
		public function get dx():Number { return matrix.tx; }
 
		public function set dx(value:Number):void
		{
			matrix.tx = value * _parallaxAmount;
			drawCanvas();
		}
 
		public function get parallaxAmount():Number { return _parallaxAmount; }
 
		public function set parallaxAmount(value:Number):void
		{
			_parallaxAmount = value;
		}
 
	}
 
}

The ScrollingLayer Class needs to be extended to use it. So just make your own class like so and tell it where to find the bitmap you want to use as a tile.

package layers
{
	import flash.display.Sprite;
	/**
	 * ...
	 * @author Zachary Foley
	 */
	public class StarField extends ScrollingLayer
	{
		[Embed(source = '../images/starfield.jpg')]
		private var bitmapClass:Class
		public function StarField()
		{
			scrollingBitmap = new bitmapClass().bitmapData;
		}
	}
 
}

Its that simple to make a new infinite scrolling layer.

You might also find you want to add some non-infinite decorations to your scrolling background. For that I created the “decal” class. Think of this as a non-repeatign version foteh Scrolling layer. You tell it where it shoudl appear, and it stays there. When it goes off stage, it hides itself to save processor cycles.

If you’re looking for maximum performance, this method will not work as well as blitting. But for most cases in flash, you will find this does well enough.

Both the ScrollingLayer and Decal class can be adjusted to float at different rates from each other, creating a parallax effect. You set this by setting the “parallaxAmount”.

Download the files for a complete working example.

UPDATE: Thanks to Ian at munchie games for this. If you use the Decal class in the downloadable files, the wil appear to wobble a bit. This is because the default setting of a Bitmap.pixelSnapping is “Auto”. If you set it to PixelSnapping.NEVER, it will move smoothly, though with a small performance hit. But in most cases this smooth motion is what is desirable.

About The Plastic Sturgeon

This is my site. It gets pretty biographical on the About page.
This entry was posted in Tutorials. Bookmark the permalink.

5 Responses to Infinite Scrolling Bitmap Backgrounds in AS3

  1. hmmm says:

    Slightly laggy at first but then smooths out after a while. I think you might need a preloader.

  2. Pingback: Super-fast scrolling of huge Bitmaps » Plastic Sturgeon

  3. if you scroll way to much in one direction, matrix ty & tx gets way too big to handle and the scrollig gets stucked.

    changing the “move” function to:

    public function move(dx:Number, dy:Number):void{
    matrix.translate(dx*parallaxScrolling, dy*parallaxScrolling);

    if(dx!=0)
    matrix.tx%=scrollingBitmap.width;
    if(dy!=0)
    matrix.ty%=scrollingBitmap.height;

    drawCanvas();
    }

    should do the trick

  4. Great suggestion Mariano. In all of the cases I have used this the action remains constrained withing about 2000 pixels of the origin(0,0), so I never ran into this bug. Thanks a lot!

  5. Oskil says:

    heloo ;)
    i need tutorial scroling background like this game_ http://www.youtube.com/watch?v=dsVIvUpRJbo

    you can help me? please

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>