Posts Tagged ‘parallax’

Basic Construction: Adding Realism/Parallax Scrolling

April 8, 2009 Leave a comment

[Parallax: Parallax is an apparent displacement or difference of orientation of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines.]

Now if you are anything like me, that definition just went about as far over your head as a Saturn V rocket. In plainer english, parallax is 3D depth of movement. An object farther away moves at a different rate than an object closer to us. Here’s a visual example in 3D:

See? Nice and simple example, it’s much easier to SHOW you than to explain THAT. Parallax in 2D games is a whole other ballgame. It is a trick older than time. You use 3 backgrounds instead of 2. As the player moves through a level, each background layer scrolls at different speeds to mimic 3D movement. They don’t even have to be the correct speeds, the bottom layer just had to move at a slower rate than the upper layer. In Construct, this can easily be achieved with 3 or more layers. The beauty of Construct is that you are not limited by merely 3 layers. My space shooter’s first introductory level uses a layer for the player (hey, that rhymed!), 3 layers for parallax backgrounds, and a foundation layer to preserve our original scroll rate. So our layout is thus:

  1. player

  2. background1

  3. background2

  4. background3

  5. foundation

The key here is scroll rate. In Construct, go to the layers tab and create 5 layers.

A view of Construct’s layer tab.

Name them per the order listed above. Once you have them, set the ‘Scroll X Rate’ and ‘Scroll Y Rate’ for ‘background1’ to 75%, set ‘background2’ to 50%, and ‘background3’ to 25%. Leave the ‘player’ and ‘foundation’ layers at 100%. To test this, add some sprites (any sprites) to each layer, add a test sprite to the ‘player’ layer, and add an 8 direction behavior to it. Now test your game by hitting the computer monitor icon in the upper left, next to ‘File’. Boom, you can now see triple parallax at work. If you want even more depth, add more layers between ‘player’ and ‘foundation’, simply adjust your scroll rates and you’re off to the races.

What we’re doing here is creating a parallax sammich where our player (and everything on his layer) moves with our main background (‘foundation’ layer) correctly. Meanwhile, our parallax layers do their thing and don’t screw anything up. If you want to create a game where the entire background moves then leave the ‘foundation’ layer completely blank – put it in, but don’t use it at all. In my case, I put my star field in background3 while using asteroids of different shapes in background2 and background1. This gives me triple parallax while preserving the player’s scroll rate. The general rule of thumb is the very bottom layer and the very top layer MUST have the same scroll rate for this to work. It’s that easy once you know the concept. Have fun!

Categories: Game Development Tags: , ,