Multilayer Parallax

Post your own tutorials, guides and demos.

Post » Thu Apr 16, 2009 6:09 pm

I thought I'd put up a short tutorial I made on multi-level parallax layers. This is for total, complete noobs, so if you already know about parallax, skip it. I made a tut with a few pics here:

http://huzzah.wordpress.com/2009/04/08/100/

Reposted here:


[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.

Parallax in 2D games is a trick older than time. You use 3 (or more) backgrounds instead of 2. As the player moves through a level, each background layer scrolls at different speeds to mimic 3D movement. They dont 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 shooters 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.



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 youre off to the races.

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. Its that easy once you know the concept. Have fun!
B
2
G
3
Posts: 18
Reputation: 886

Post » Mon Apr 20, 2009 11:04 am

Nice tutorial :)

Paralax is pretty easy, but for a beginner this can be an essential thing to give any game that touch of polish. Everyone has to start somewhere, and this tutorial makes it easy to understand how to make basic paralaxing.

Good job!

~Sol
Tired of crappy file hosts that are crappy? Get DROPBOX - https://db.tt/uwjysXJF
Moderator
B
45
S
17
G
37
Posts: 2,853
Reputation: 25,966

Post » Mon Apr 20, 2009 11:35 am

Just read it, thanks for the tutorial :).
B
3
S
2
G
5
Posts: 1,777
Reputation: 5,529

Post » Mon Apr 20, 2009 11:45 am

Well it sounds simple enough.

I'll have a bash using your tutorial and tell you how I do, only started using construct yesterday (no other experience) so I guess I'll be a pretty good test.

Now what to use as my background, hmm...
B
2
G
3
Posts: 40
Reputation: 930

Post » Mon Apr 20, 2009 1:41 pm

...I don't get it...

Is the 3 layers just for having an increased sense of depth? I feel like I'm missing something here, I need a video or .cap
B
2
G
3
Posts: 40
Reputation: 930

Post » Tue Apr 21, 2009 5:00 pm

Ah I just tried using it again as I was finding I was having errors, foundation layer helps, thanks for the tutorial.
B
2
G
3
Posts: 40
Reputation: 930

Post » Wed Apr 29, 2009 8:41 pm

np, sit's why I wrote the tutorial . . . so others didn't have to fight Construct in this one area like I did, back when I was just starting fresh. Multilayer parallax is basic, but it just does so much for a background. I just hope it stays out of same cliche as lens flares for photoshop. Too useful of a basic tool!
B
2
G
3
Posts: 18
Reputation: 886


Return to Your tutorials & example files

Who is online

Users browsing this forum: No registered users and 2 guests