For those of you who don’t know what parallax is, the best way to describe it is the way objects in the background tend to move less than objects closer to the viewer. Here’s a wiki link for something more indepth. Side scrolling 2D games provide the perfect opportunity to use the effect, giving the environments a great sense of three dimensional depth. This sort of trickery is often known as 2.5D as it sits somewhere between the second and third dimensions.
The best way to explain it is to see it in action, click on the image below to view a quick demo.
You can see in the demo that the environment is made of three layers with the closet layer (layer 1) moving much faster than the layers behind it. The furthest back layer (layer 3) in this case doesn’t move at all. The overall effect is quite an engaging illusion of depth.
Before going in to a description about the class I should probably mention that it doesn’t only relate just to iPhone games and of course you can use the class in any Flash project. Having said that, one of the great things about this class (and this demo) is that they run extremely well on the iPhone (on iOS4, compiling with Air 3.0). This demo is running beautifully at 60fps and you couldn’t ask for anything better (quite literally). That sounds great, and it really is, but if you’ve done any game programming in Flash before, and especially for mobile, you’ll realise that you can hit a bottle neck at any point, especially if you start working with high volumes of animated sprites or collision detection. But it’s a good starting point at least.
For the sake of demonstration I’ve bult the class here as a little stand alone item that you can easily declare and add to the stage. If you’d like to edit, rip it apart or use as is, go ahead that’s up to you. I actually use a different version for my production work that fits better into my programming structure, but it’s a good base. The usage is simple:
var myParallax:EnvironmentParallax = new EnvironmentParallax(480, 320,[bitmap_1, bitmap_2,bitmap_3])
addChild(myParallax)
The three arguments for the constructor specify the view width, view height and an array of bitmaps to use as the background layers. The order of bitmaps in the array specifies the stacking order of the layers in the movieclip with the 0 position being closer to the viewer with each additional layer being further into the background.
You can download the Class along with an example FLA here.