Get the latest Education e-news
 
  • An Introduction to 2D Curve Animation

    [01.22.13]
    - Paul Rayman
  • [In this tutorial, Paul Rayman explains how artists of all skill levels can use GameDev Animation Studio to create simple 2D animations.]

    Simply put, 2D animation is the movement and transformation of objects on the screen in two dimensions. Classic cartoons are good examples: multiple pictures of Mickey Mouse or Donald Duck alternate over time and produce the illusion of movement. Modern 2D animation software eases the animation process, eliminating the need to produce tons of frames.

    Frames and Keyframes

    Just like with classic animation, computer 2D animation also consists of frames. A frame is a single picture of an object illustrating position, size and other properties of that object. Adjacent frames are slightly different from each other, so that when the animation is played at full speed -- usually 24 frames per second -- the effect of motion appears. This is similar to cartoons and movies.

    In computer animation, however, you typically don't have to draw each and every frame manually. Most 2D animation software allows you to set up keyframes -- frames that specify intermediate positions of an object. The motion of the object between these keyframes is built by the software automatically. The result? You end up with creating keyframes only, while the animation tool calculates and builds the rest of the frames automatically. This process is called interpolation.

    Curve Animation

    The motion between two keyframes can be different -- accelerating, slowing down, coming to a rest, or even all of these in one move. The simplest way to specify how one keyframe should transition to another is to use curves. A curve defines how a specific parameter of an object -- such as a coordinate or a scale -- should vary over time.

    Let's take a look at a simple animation example made in the 2D animation program GameDev Animation Studio. We want to make a ball move up, down, and then bounce.


    Basically, this means that the vertical coordinate of the object -- the Y-coordinate -- should change from zero (the top of the screen) to the maximum value that corresponds to the bottom of the screen. Then the ball "bounces" -- more specifically, its form gets distorted vertically and is then restored again.

    After that, the ball moves up, which means that the Y-coordinate should decrease to zero. Note that due to gravity, the ball moves down with acceleration, while the upward movement must be decelerating. This is mirrored in the slope of the curve: a sharper slope means faster movement, and vice versa.

    Position Curve

    The curve determining vertical movement of the ball looks like this:


    Click for larger version.

    As you can see, the curve here gradually develops from zero to its maximum. Then, after the peak, it goes back to zero again. The highest value of the curve corresponds to the moment when the ball hits the ground -- this happens in the 30th frame on the timeline. After that, the ball starts moving up.

Comments

comments powered by Disqus