Perspective drawing is the art of creating the illusion of three dimensional space on a two dimensional surface such as a piece of paper or your computer monitor screen. The principles of Perspective drawing are also very relevant to 2D animation - particularly when you want to move a character closer or further away from the camera.
In this series of articles on perspective I'm going to demonstrate how perspective can be taken into consideration when creating your animations. I'm going to try to keep things simple so you don't have to remember too much when applying these concepts in your own work.
I'll be using the GoAnimate studio to create my examples but the concepts also apply to any form of 2D animation. If you'd like a detailed explanation of Perspective Drawing then there is a great series of articles in Art Factories, Perspective Drawing Techniques for Artists.
Most people are aware of the key concept of perspective i.e. things get smaller as they move further away and bigger as they get closer. However applying that idea to moving characters can be quite a challenge. You'll often see this kind of Perspective failure (see animation below) with new animators where a character walks unnaturally off the bottom of the screen.
The trick to applying perspective well is to begin viewing your piece of paper or computer monitor screen as more of window into another world rather than a flat surface. Imagine you could reach right into it and touch the things you see on the other side. The mistake in the above video occurs because the creator has yet to learn how to visualize correctly the space at the other side of the screen.
Simple, One Point, Character Perspective
In the GoAnimate studio the most basic camera angle is a fixed position that shows you the entire background scene - as per the scene in the example video above. Most scenes use one point perspective.
(Note that, in GoAnimate, all the Lil' Peepz style themes use isometric perspective on many of backgrounds and props - which is problematic when trying to apply correct perspective to scenes and characters since isometric perspective has no horizon line or vanishing point).
One point perspective, at its simplest, works by drawing a horizon line across the middle of your scene and choosing a point in the exact middle of that line, which becomes your vanishing point. You then place your character in the scene at the initial size you want them to be.
Then, when you want the characters to move closer or further away from the camera in correct proportion to the scene, you just imagine some guidelines that extend from the vanishing point to the top and bottom of your characters and beyond, off the edge of the screen. (See still image below).
Notice that the left and right side of the scene (divided in half by the vanishing point) mirror each other. If one of these characters were to walk directly at the camera, in front of the vanishing point, they would get bigger in the scene until the middle of their stomach hit the camera.
By simply marking where the horizon line is in a scene and placing the vanishing point right in the middle of it. Then using guidelines, as I've shown, you can get by reasonably well with fairly convincing perspective of your characters in 2D animation.
In part 2 of this series I'll be looking at applying one point perspective to backgrounds to create realistic, horizontally scrolling backgrounds.
In this series of articles on perspective I'm going to demonstrate how perspective can be taken into consideration when creating your animations. I'm going to try to keep things simple so you don't have to remember too much when applying these concepts in your own work.
I'll be using the GoAnimate studio to create my examples but the concepts also apply to any form of 2D animation. If you'd like a detailed explanation of Perspective Drawing then there is a great series of articles in Art Factories, Perspective Drawing Techniques for Artists.
Most people are aware of the key concept of perspective i.e. things get smaller as they move further away and bigger as they get closer. However applying that idea to moving characters can be quite a challenge. You'll often see this kind of Perspective failure (see animation below) with new animators where a character walks unnaturally off the bottom of the screen.
The trick to applying perspective well is to begin viewing your piece of paper or computer monitor screen as more of window into another world rather than a flat surface. Imagine you could reach right into it and touch the things you see on the other side. The mistake in the above video occurs because the creator has yet to learn how to visualize correctly the space at the other side of the screen.
Simple, One Point, Character Perspective
In the GoAnimate studio the most basic camera angle is a fixed position that shows you the entire background scene - as per the scene in the example video above. Most scenes use one point perspective.
(Note that, in GoAnimate, all the Lil' Peepz style themes use isometric perspective on many of backgrounds and props - which is problematic when trying to apply correct perspective to scenes and characters since isometric perspective has no horizon line or vanishing point).
One point perspective, at its simplest, works by drawing a horizon line across the middle of your scene and choosing a point in the exact middle of that line, which becomes your vanishing point. You then place your character in the scene at the initial size you want them to be.
Then, when you want the characters to move closer or further away from the camera in correct proportion to the scene, you just imagine some guidelines that extend from the vanishing point to the top and bottom of your characters and beyond, off the edge of the screen. (See still image below).
If these two characters now either walk towards the vanishing point or towards the camera in a straight line, perpendicular to the camera, their size should increase or decrease proportionally so that the top of their head and feet are always in contact with a guideline.
You can see this in practice in the video demonstration below which finishes with a scene similar to our original perspective failure video above, showing how the characters should correctly move off screen when walking toward the camera.
Notice that the left and right side of the scene (divided in half by the vanishing point) mirror each other. If one of these characters were to walk directly at the camera, in front of the vanishing point, they would get bigger in the scene until the middle of their stomach hit the camera.
By simply marking where the horizon line is in a scene and placing the vanishing point right in the middle of it. Then using guidelines, as I've shown, you can get by reasonably well with fairly convincing perspective of your characters in 2D animation.
In part 2 of this series I'll be looking at applying one point perspective to backgrounds to create realistic, horizontally scrolling backgrounds.
NIce. Now let's hope a lot of people read this and then actual apply it. It sure would make for more viewing pleasure.
ReplyDeleteGreat advice TET. Have fun helping millions with these tutorials!
ReplyDeleteRunning to part 2, but how did you make the guidelines? did you import them? because I don't know of a prop in GA that trims down at the end to a point.
ReplyDeleteThere isn't a prop to do that. My guidelines are actually big white triangles with a big blue triangle on top for the sky and a big purple triangle down below for the ground.
DeleteIf you really need the guidelines then I'd recommend making a line prop with Flash that you can resize and rotate as needed.
wonderful blog, like it ......
ReplyDeleteI always had trouble with perspective drawing. It seems the only thing i could draw well with this technique is a set of train tracks or a conveyor belt disappearing into the horizon.
ReplyDeleteThat's pretty much where I started learning... lots of roads and train tracks disappearing into the distance. Followed by fence posts and power/light poles... from there it's not such a big jump towards buildings. With enough practice you eventually start seeing a piece of paper as a window rather than a flat surface.
Delete