Bitmap Parallax Techniques

OK so it’s go go GO on this huuuuge platform game – 9 levels and a 1st March deadline. Yes, Christmas is cancelled. So I suspect that I may go a little quiet on the blog for a bit…

But… I thought you may like to know, I’ve been doing a little test on the best way to do parallax scrolling. What I wanted to avoid is having assets that come off the edges of the screen. If you make a parallax tile that’s one screenwidth, you pretty much always have to have two copies of it on screen because the join will always have to be in the middle of the screen somewhere.

[kml_flashembed movie=”/wp-content/uploads/manual/2006/swfcontainer.swf” width=”450″ height=”200″ FVERSION=”8″ BGCOLOR=”#ffffff” fvars=”swfFile=/wp-content/uploads/manual/2006/parallaxdemo.swf ; frameSnapshot=20 ; swfScale=100 ; timeoutFrames=250″ /]

So what I thought I’d try is convert the parallax layers into bitmaps, and then do bitmap fills for each one. The bitmap fill is the size of the screen, and the beauty of this method is that the tiles automatically repeat, because you can do that with bitmap fills.

So having got that working, sadly it seems that the original way is faster, assuming you cacheAsBitmap the layers. Ho hum.

Examples are here :

Using bitmapFill()

Using big tiles that go off the edge of the screen

The number in the top left hand corner is the number of ms per frame (average over 100 frames).

Now I’m going to try drawing the layers into a single bitmap instead. Wish me luck!

Artwork by Plug-in’s creative genius Dominic Minns, if you wanna see the (old) Christmas game that these assets are from : Red Nose Racer

7 replies on “Bitmap Parallax Techniques”

Hey mate, I see the bitmap fill method as faster here:

flash player 9
firefox 2.01
1.3GHZ P4
256MB Rambus
(Old Machine)

Bitmap – Avg 33fps
MovieClip – Avg 22fps

Any chance of source 😀

Well I’m confused now! Anyone else have this result?


PS will post source when this project is all over 🙂

Heya Seb! Bitmap parallax looks really nice! The game will be a killer. Good luck with the deadline.

big tiles – 16
bitmap – 19

3.8 ghz, intel pc, winxp, firefox 2.02, fp9.

Yep i get the same results as Jon B

flash player 9
3.2GHZ P4

Hey Seb, I know this thread is very old at this point but I was wondering what the results of your other experiments were. Basically, I’m playing with something similar right now but instead of using bitmap fill or multiple copies of the source image I’m using .scroll on by frame buffer to scroll the layer, then using copypixels from my source bitmap to copy only the new areas of the image to the screen.

Hi Jason!

Yes this is very old and out-of-date. (and AS2!). I’m sure that scroll or copyPixels in AS3 will be a lot faster and probably the best method these days. But let me know how you get along!



Comments are closed.