Multilayer Parallax

This forum is currently in read-only mode.
From the Asset Store
Set of 10 Parallax Background to make pixel art game.
  • 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 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.

    <img src="http://huzzah.files.wordpress.com/2009/04/construct_layers1.png?w=500&h=375">

    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.

    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!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 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

  • Just read it, thanks for the tutorial .

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

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

  • Ah I just tried using it again as I was finding I was having errors, foundation layer helps, thanks for the tutorial.

  • 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!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)