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.

Comments

  1. Really cool article and very clearly explained. And there's always that little hint of humor in everything you present. Love it! :o)

    ReplyDelete
    Replies
    1. Thanks Nicolas. Can't seem to help myself with the humor... it just creeps in ;-)

      Delete
  2. Very well presented TET and packed with some wonderful helpful information.

    ReplyDelete
  3. I actually discovered the movement action without sliding on my latest. Wild Thing. I wanted the illusion of running with out movement for my speech bubble sequence near the end. Been here a year and it took me that long to figure it out. This will help others learn the trick sooner.

    ReplyDelete
    Replies
    1. You're not alone on that. I think it was just as long for me too. I accidentally discovered that you could remove the slide from a movement action at some point. It wasn't even something I was trying to do.

      It really does pay to experiment in the studio so you can discover some of these less obvious techniques.

      Delete
  4. I'll be keeping this all in mind. I've been paying too much attention to my story lines, and not enough attention to what the GA studio is capable of ... to be honest TET, I would pay for a subscription to these types of lessons ----my nit picking Virgo nature knows quick that they are top of the line. Sprinting to part 3.

    ReplyDelete
  5. nice tutorial, I've learn many things from this bog .......

    ReplyDelete

Post a Comment

This blog is monitored by a real human. Generic or unrelated spam comments with links to sites of dubious relativity may be DELETED.

I welcome, read, and respond to genuine comments relating to each post. If your comment isn't that save me some time by not posting it.

Popular posts from this blog

Inochi2D - Free Open Source 2D VTuber Avatar Rigging and Puppeteering Software (Part 1)

Inochi2D Creator - Free Open Source VTuber Software. If you've been looking for a way to live perform as a 2D cartoon avatar on camera, whether it be for a live stream or for pre-recorded content like educational videos, then VTuber software is a low cost (or even no cost) option worth looking into. In my previous post, How to Become a VTuber - 2D and 3D Software for Creating and Controlling Your Avatar , I took a brief look at the relatively new but completely free and open source Inochi2D  which I thought showed great potential for my own needs of creating a live performance character rig for my own TET Avatar that I use for all my promotional materials. While it is possible to live perform my character using Cartoon Animator itself, Reallusion's MotionLive2D capture system isn't great - with lip sync in particular. More importantly though, I can't exactly teach people how to use Cartoon Animator if I'm using Cartoon Animator to control my Avatar. What is Inochi2D...

Learn Reallusion's Cartoon Animator 5 Fast by Creating Fun, 2D, Animated Christmas Holiday Messages - Free Course by The Lazy Animator

H ave you ever wanted to send your friends and family fun, 2D animated, holiday messages, or just create 2D animated characters that you can make move and talk without learning difficult to master animation skills or spending hours drawing frame by frame? Reallusion's Cartoon Animator 5 is a professional quality, 2D animation studio software that is also very easy to produce impressive results with, even if you've never animated before, or can't draw. Don't Have Cartoon Animator 5 Download a free, 30 day trial . Easy Beginner Course I've created a completely free beginners course that teaches you my fast, easy way to rig and animate your first 2D custom character in Cartoon Animator 5 without complicated templates or any drawing skills at all. My online video course includes everything you need, including eight AI generated character sprite graphics, and four AI generated Human voice samples, so you can start learning right away. Eight AI generated character image...

Krita AI Diffusion - Generative Image AI For Krita is Seriously Useful, Powerful and Free (If You Can Install it Locally)

Generative AI sequence of a woman in a business suit. From sketch to refined image using Krita AI Diffusion - by TET G enerative image AI, where you describe an image with a text prompt to an Artificial Intelligence model and it produces a new image based on your prompt, is gaining a strong hold as a tool for many artists. Krita AI Diffusion brings generative AI image tools right into your favourite free and opensource, graphics editor, Krita. Not only that, if you have a computer with decent specs (and at least 10GB of hard drive space), Krita AI Diffusion is completely free. What If I Don't Have a Powerful Computer? If you're in my situation, with a computer that was around before anyone in the mainstream had even heard of generative AI, you can still access Krita AI Diffusion for free, using a cloud based AI server, Interstice  and 300 tokens, to get you started. Once your initial tokens run out, purchase 5000 more for 10€ (approx US$11.00). Tokens never expire. I would...

Glif (Alpha) - Make Your Own Tiny AI Powered Niche Image Generator Apps

I  first heard about Glif through a YouTube video that mentioned you could get access to Flux Pro (the latest 'game changer AI' generative image model) through the site for free. While I had a vague notion from the video of what Glif was, I wasn't expecting it to be so easy to get started with, and so good with my very first results. Glif is an easy to use, low-code platform for creating tiny AI-powered generators called Glifs. While that may not sound inspiring, what Glifs allow you to do is create a tiny app that niches down to a specific type of AI generation that the user modifies with their own inputs. The best way to really understand is with an example.  My First Glif I've recently been using VivaGo's AI platform  (free and unlimited at the time of writing) to consistently generate full body characters in a front facing T-Pose that I can rig as front facing characters in Cartoon Animator. Unfortunately it can be a bit hit or miss maintaining the T-Pose part...

The Ultimate Independent Animator's App and Resource List - Animation and Video Life

Image created with Cartoon Animator 4. Being an independent animator is not like a studio animation job. There's so much more to do that is indirectly related to the actual task of animating. Over the years I've sought out many apps, tools, and services that can help me achieve that one single task, expressing myself through animation. Below is my Ultimate Independent Animator's Resource List for 2024 (last updated Oct 2024). It started out as a list of free or low cost apps that could help you in every stage of producing either 2D or 3D animation, and then just kind of grew from there. You may not have been looking for a Time Management App as much as you needed something to get you started in 3D animation but when those commissioned projects start coming in you'll have a head start on maximizing your time. All the apps and services on this list had to meet two main criteria: They had to be useful and relevant to an Indy Animator/artist. The base app/se...

Wonder Unit Storyboarder - Free Storyboarding Software for People Who Can (or Can't) Draw

Wonder Unit Storyboarder.  As an independent and solo animator I'm always tempted to try and skip storyboarding my animated shorts because they're usually only single scene sketch comedy type jokes. As a result I have many unfinished projects that kind of petered out due to having no clear finishing line. Storyboarding your productions, no matter how small, gives you a step by step guide of every shot that needs to be completed (no planning shots as you animate). It also allows you to create an animatic that gives you a rough preview of the finished production. In short, you shouldn't skip storyboards as they, generally, increase the chance of the project being completed. Disclaimer - I'm Not a Fan of Storyboarder Upfront, Wonder Unit's Storyboarder  is not my preferred storyboarding software. However it's completely free, has a number of very compelling featu...

LTX Studio (Beta): AI-Powered Visual Storytelling, From Script to Screen in One App.

LTX Studio can generate consistent characters across storyboard panels - even if one character is a dragon! W hile text to image, and text to video (and image to video) AI tend to be getting a lot of the press, the real exciting aspect of generative AI implementation is how it can be used to speed up creator workflow. Being able to realize your creative vision in a shorter length of time can lead to more ambitious projects. Particularly if you're a team of one, with a very limited budget, but you one day dream of creating your own epic animated feature film. LTX Studio (beta), a new 'all-in-one' AI film making tool, is not going to let you realize that dream from a single text prompt but, by bringing a bunch of generative AI technologies together, the developers have created a one platform workflow that can help anyone rapidly visualize and deliver a story from initial idea to finished film in days rather than weeks (depending upon how ambitious the project is). Even bette...