Parallax class for Flash iPhone games

What is Parallax?

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.

Demo

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.

60 FPS on the iPhone

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.

The Class

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.

Notes

• The key to making the layer graphics is to make the bitmap sizes smaller as they go further into the background. If you think about the fact that the background image moves less than the foreground it’s easy to see that there needs to be less of an image area the further back the layer is.
• The difference in scrolling speed between the layers is automatically determined by the size of each layer, so in this way you have control over the stength of the parallax effect by choosing what size you make each layer.
• The engine is set up to allow unlimited layers, meaning you don’t have to stick to just 3 layers as seenin the demo – of course each new layer is going to add to the resource requirements of your scene, but by all means – push it as far as you can.

Download

You can download the Class along with an example FLA here.