Skip to main content

Pt2: Simple Perspective for 2D Animation - Parallax Scrolling Backgrounds

In part 2 of this series I'll show you how to create a horizontally scrolling, parallax background. If you're not sure what that is just know that it will make your chase scenes look amazing by adding a kind of 3D depth to them.

You will understand the concepts better in this article if you've read Part 1 in the series before hand - which covers basic one point perspective.

Parallax Scrolling Perspective - What is it?

Look at almost any 2D side scrolling video game from the late 1980's or early 1990's (such as Super Mario Brothers or Sonic the Hedgehog games) and you can see Parallax Scrolling Perspective at work. Objects in the foreground of the game appear larger and move side to side (and even up and down) quicker than those in the background even though everything is drawn in two dimensions.

The technique is not new and grew out of 1940's animation where a multiplane camera was used to shoot through several layers of backgrounds to create the illusion of three dimensional depth in a scene.

You can see my very first attempt at creating a horizontally scrolling parallax scene in the Domo cartoon I created below. Notice in the scenes where the car is driving how the lamp posts move across the scene faster than the hills, trees and clouds in the background. This is the kind of scene I'm going to show you how to make with GoAnimate.




Parallax Scrolling Perspective - The Physics of the Scene

In order to understand how to create a parallax scrolling background you need to know the physics behind why things that are further away move more slowly than those up close. The diagram below should help.
Distance traveled by Objects across
the camera's line of sight.

The grey area in the diagram above represents what the camera can see through the lens. You'll notice that objects moving across the camera's line of sight, close to the camera, have less distance to travel than those far away.

Visually, this has the effect of making objects passing the camera at a close distance appear to move faster across the line of sight than those further away. Also, the further away an object is from the camera, the slower it will appear to travel across the line of sight.

In GoAnimate it is useful to remember this diagram in reverse - items you want to move slower across the scene should have a shorter, dotted slider arrow between them (you'll see what I mean in the next section).

Obviously, in terms of perspective, objects further away from the camera should appear smaller in the scene.


Creating a Parallax Perspective, Horizontally Scrolling
Scene in GoAnimate


Before I begin I'll show you my demonstration animation of a spaceman running which I will then refer back to as I talk about how it was made. You'll see each GoAnimate Scene (i.e. one scene in the studio) is numbered so I can refer directly to it in my discussion.

Parallax Scrolling Demo by etourist

Like it? Create your own at GoAnimate.com. It's free and fun!

Initially you'll probably think it doesn't look all that much but by the time you get to scenes 4 and 5 you'll see the effect becomes more convincing the more objects you have moving past the camera. The goal is to create a single scene that will seamlessly repeat that you can then just copy and paste to create the illusion of  a continuous scrolling scene.

Step 1: Choose Background

The illusion of movement and depth works best if you choose a ground surface that will always look the same no matter how far you scroll. In my demo you can see the ground is a uniform grey colour. In my Domo animation at the top of this post you'll see I've created a road with the grass, pavement and road all being the same continuous colour.

Step 2: CUT Frame

Reduce the size of the scene using the cut tool. This will give you more room to work and enable you to add those objects that have to move extra fast.


Step 3: Add Horizon Objects

If your scene is like my spaceman scene where you can see right to the horizon, then you can safely add some distant mountains (and even a moon). These things are so far away that they will barely move. You can get away with them being stationary in the scene without spoiling the illusion.

Step 4: Add Other Objects and Character

Now you're ready to add your first few objects in the landscape. In placing your first objects remember the one point perspective concepts I covered in part 1. You don't need to draw the guidelines and vanishing point (as shown in the image of Scene 1 below) but keep them in mind when sizing different objects. Things closer to the horizon will appear smaller than things close to the camera.


We're creating a single scene that loops seamlessly so all of your moving objects need to be placed outside the CUT frame. Start with the object that is the furthest away (in my case that's a space base). This should be placed right on the edge of the CUT frame - but out of view - and very close to the horizon line.

Place your second object (mine's a rock) mid way between the bottom of your first object and the bottom of the CUT frame. Space it across about half way between the edge of the scene frame and the edge of the CUT frame.

Place your third object (I've chosen a clump of grass) about mid way between the bottom of your second object and the bottom of the CUT frame. Position it across from the edge of the CUT frame so it's almost touching the edge of the scene.

Next add whatever it is the camera will be tracking horizontally (such a s my running spaceman) inside the CUT frame so that it's almost but not quite touching the bottom of the CUT frame.

Step 5: Add Movement

Now to make everything move. If you're using a running character like my spaceman, you'll need to select the run action. This will make the space man run but will also cause him to slide forward in the scene. We don't want that so, with the character still selected, click the Slide button (located next to the Action drop down menu). This will keep the running action but remove the slide movement.

Select each of your objects in turn and click the Slide button (usually the first icon/button next to the props thumbnail image in the object properties window). Then drag the objects ghosted destination image in an exact, horizontal straight line, through the CUT frame window and  then past it's opposite edge to about an equal distance away on the opposite side (see diagram below).

Scene 1: Click to enlarge.
Once you've done this with all three objects set the scene length to a custom length - I used 13 seconds for my scenes but it will depend on how fast your character is moving.

At this point your scene is all set up and you can see how it looks by watching Scene 1 in the demonstration animation above. You'll notice that all my objects line up behind each other when they get to the middle of the CUT frame and then separate again as they reach the opposite edge. This is how objects that are all lined up should move across the frame.

At this point you could copy this scene two or three times and preview the animation. The spaceman would appear to run across the landscape for all scenes without the viewer seeing the scene changes. However it wouldn't take long for the viewer to realize the same objects are going past each time.

Step 6: Add More Objects

The illusion of this effect looks more realistic if you add more objects to the scene and stagger their positions (so they don't all line up in the center of the CUT frame). In Scene 2 below you can see I'm adding a second clump of grass at the same level as the first clump of grass but closer to the CUT frame.

Scene 2: Click to enlarge.
In order to keep how fast this grass clump moves across the CUT frame consistent with the first clump it must move the same number as pixels as the first (427px). Which is why you can see in the above diagram that the second clump of grass moves so far past the opposite edge of the CUT frame.

The effect can be enhanced even more by adding objects that pass in front of your character. In Scene 3  below I'm adding another clump of grass that passes in front of the spaceman across the bottom of the CUT frame.

Scene 3: Click to enlarge.
Notice that I've made the grass clump bigger than the others because it's much closer to the camera. Also notice that it slides much further than everything in order to make it pass in front of the camera quicker.

Keep that in mind. The closer something is, the faster it needs to move past the camera. Also keep in mind that everything added needs to begin and end its slide path outside the CUT frame area. This will allow you to duplicate the scene over and over for longer sequences.

As I said at the start, the more you add to the scene the more convincing the effect looks. Though be careful not to over load the scene as too many moving objects may slow the GoAnimate player down on some computers.

Hopefully I've explained the concepts for creating your own horizontally scrolling, parallax backgrounds that give the illusion of depth and correct perspective, clearly enough for you to follow. It's a good technique to learn and can be used to make even interior scenes look more dynamic.

Popular posts from this blog

AE Juice - Animation Presets, Motion Graphics, Templates, Transitions for After Effects, Premiere Pro, and Other Video Applications

Level up you video edits and animations with AE Juice's motion graphics and templates. Some days you just don't have the time to create flashy motion graphics for your latest video or animation. For some of us it's more a question of our own artistic abilities being a little less than the awesome we'd like them to be. Whatever reason a resource like AE Juice's animation presets, motion graphics, templates, and transitions packs for After Effects , Premiere Pro , and other video applications can really make your work stand out very quickly. AE Juice gives you access to an instant library of free, premade content elements and sound effects, which you can add to with additional purchases of various themed packs from their store. There are three ways to manage their content, all of which can be used in commercial projects . The AE Juice Standalone Package Manager makes it easy to browse previews of all your pack contents and to download and find just the elements yo

Should You Buy or Upgrade to MOHO 13? *Spoiler* Yes. Yes You Should!

MOHO 13's New Character Set. Smith Micro released MOHO 13 , their all in one, 2D animation studio, this week. The question is should you buy or upgrade to the latest version? Obviously I've already spoiled this in the title, so the actual question is why do I think you should buy or upgrade? To be clear, I'm only talking about MOHO 13 Pro. If you're considering MOHO 13 Debut be aware that you're missing out on some of the new features, and a lot of existing features that are only available in the Pro version. Debut is fine if the budget doesn't stretch to Pro, but, if you never want to be disappointed about not having a feature, it's Pro or nothing! The other thing I need to be transparent about is I'm not, by any stretch, a frequent MOHO user/animator. However I took the time to learn MOHO 12 Pro fairly extensively, blogging about my process and sorting out 104 free MOHO training videos into a logical viewing order in the process. I think I ha

TimeBolt: Fast Video Editing for Anyone Creating Online Courses, Podcasts, or Vlogs.

I resisted making tutorial videos for a long time because I don't like editing. Specifically I don't like editing me teaching as I step students through a process during a screen record. I have a tendency to insert long pauses not just in the middle of sentences but between multiple words in the middle of sentences as my pace matches what I'm doing onscreen. This makes for very long and very slow paced video tutorials. To counteract this I have to edit out all the pauses. This can take hours, or even days on particularly long tutorials. For example, when I created my main course, The Lazy Animator Beginner's Guide to Cartoon Animator , I literally injured the thumb on my right hand, operating my mouse, as I spent weeks taking out all my pauses (seriously, I had to wear a thumb brace for a few weeks to fix the pain). Recently I came across TimeBolt , a very affordable, fast editing application with the featured purpose of removing all the pauses from your video (and even

Make Disney/Pixar Style Characters with Reallusion's Character Creator and Toon Figure Bases

The Extraordinary Tourist Classic Coat outfit created using Reallusion's Toon Designer for CC3. I've talked before how I've wanted to get into 3D Disney/Pixar style character animation since I first saw the animated cutscenes for the very first Tomb Raider game back in 1996. It's why I initially bought Reallusion's iClone 3D studio app as soon as I could afford a computer that would run it. But then Reallusion released their 3D Character Creator (CC) for iClone and I wanted to create my characters with that (and I did try with Bat Storm ). But the focus of CC was realism, even with ToKoMotion's stylised body morphs . Now with Reallusion's Cartoon Designer bundle for CC3 which features two packs, Toon Figures , and Toon Hair , designing Disney/Pixar style 3D characters just got a whole lot quicker. The two packs are the bare essentials for creating Toon style characters. Five body morphs (2 male, 2 female, and one adolescent body morph that w

Can You Learn Reallusion's Cartoon Animator 5 for Free Using Their 137 Official YouTube Video Tutorials Sorted Into a Logical Learning Order?

Or you could just buy The Lazy Animator Beginner's Guide to Cartoon Animator . While Reallusion's Cartoon Animator is one of the easiest 2D animation studios to get up and running with quickly, learning it from all of the official, free, video tutorials can be more overwhelming than helpful. With more than 137 videos totaling more than 28 and a half hours of tutorials, spread across three generations of the software (Cartoon Animator 3 through 5) it's hard to know if what you're learning is a current or legacy feature that you either need to know or can be skipped. Many of the official tutorials only teach specific features of the software and don't relate at all to previous or later tutorials. As a result there are many features either not mentioned or are hard to find. To make your learning easier, on this page, I've collected together all of the essential, official, free video tutorials and sorted them into a learning order that makes sense. Simply start at

Review: CrazyTalk Animator 3 vs Moho Studio Pro 12

Reallusion's CrazyTalk Animator 3 or Smith Micro's Moho Studio Pro 12. Which of these 2D animation applications is right for you? Regular readers of this blog will know I'm a strong supporter, and fairly proficient user of CrazyTalk Animator since version 1. It's a great piece of software for producing 2D animations from purchased content quickly and, with version 3, is easier than ever to create animations from your own art. Lesser known is that I first purchased Moho Studio Pro 12 (then known as Anime Studio Pro 9) back in October of 2012 and have been upgrading it to the latest version ever since because I believed in it as an application for creating great 2D animation to TV quality standard. As such, it's a much more complex application than CTA3 that I only got around to learning properly late last year. I'm still in the process of blogging my progress . Despite this I feel I've learned enough of Moho to compare it to CTA3 to help you determ

Creating a G3-360 Head From a Single Photo in Reallusion's Cartoon Animator

Source Photo from Generated Photos . Ever since Reallusion introduced the G3-360 Character Head into Cartoon Animator 4 I've wanted to see if their 360 Head Creator tool could be used to create an animated head using a photo. Part of the reason I've never given this a shot, until now, is that I just assumed it would be difficult, and require a lot of photo editing to blend out the sprite edges. It turns out, creating a photographic G3-360 head is not that much more difficult than creating a cartoon head, and can be done using a single photographic image using my own G3-360 head rigging system . While this article isn't intended to be a full tutorial, I'll run through the basic steps of how I achieved my photographic G3-360 head, shown in the comparison below, of a Cartoon Animator Morph-based head on the left, and my G3-360 head on the right. Pros and Cons Cartoon Animator's morph-based head system is ideal for animating photographic faces. It uses a semi 3D wire me