How can I implement parallax scrolling into my 2D game?

Question

Let's say I have three layers: a foreground, an intermediate-ground and a background. What is involved in using these three layers to create parallax scrolling?

Answer 1

You want to create a couple of variables representing the camera position - cameraX and cameraY. You then want to set these to equal the position of your character, possibly adding on a bit extra in the direction of movement.

To position the main layer, it's just:

mainLayer.x = -cameraX;

for the middle layer, something like:

middleLayer.x = -cameraX * 0.5;

for the far layer:

farLayer.x = -cameraX * 0.2;

Answer 2

Basically you want objects to move faster, the closer they are to the 'camera'. How you implement that is up to you.

I assign each of my layers a depth, and then as I scroll the scene, for each layer I divide that scroll by the depth of the layer, so that layers that are further away move slower.

Answer 3

A layer that's "further back" would need to scroll at a fraction of the speed of the foreground layer. Half the speed implies double the distance. Other effects like tinting to simulate fog, etc, might also add to the illusion.

Answer 4

The best way to do this is to simply render sprites as billboarded quads in 3D. The "gameplay" can happen all on one plane, while the background and foreground can be positioned closer or further in 3d space. That way, the parallax effect is handled for you without you having to do any special coding :-)

Answer 5

Make the bottom layer scroll by subtracting from its position, draw the middle layer as normal, and make the top layer scroll at the speed of the bottom layer divided by two.