Computer Animation Week 2: The Twelve Principles of Animation

This week, we learned about the 12 principles of animation. These principles help to make animations more lifelike and help us develop emotional attachment to the characters. They are:

1. Squash and stretch

This principle gives objects the illusion of weight, but also flexibility. The basic idea is to make objects in an animation “squash” upon an impact (shorten along one axis and lengthen along the perpendicular axis), and “stretch” upon accelleration (opposite from squash, lengthens along first axis and shortens along second). This change in shape gives the object the illusion of being flexible and lively, as opposed to being completely rigid.

In the above image, A does not employ squash and stretch, while B does. As you can see, the shape remains the same for each frame in A, while in B the shape stretches for frames 2, 3, 5, and 6, squashes in frame 4, and is normal in frame 1 and 7.

2. Anticipation

Anticipation occurs when a character “winds up” prior to doing an action. It prepares the viewer for the action that is about to occur, and gives the action a more realistic feeling. It generally involves a character or object moving slightly in one direction before doing the main action in the opposite direction.

An example of anticipation can be found in the above image, where Donald Duck is winding up as he is about to start running. Even though people do not wind up before they start running in real life, it helps to increase realism in the animation.

3. Staging

The purpose of staging is to draw the viewer’s attention to the most important element in a scene. This is accomplished by framing, lighting, and viewing angle, among other things. This principle is important because it allows the viewer to focus on what is important in the scene, while being able to ignore details that may not be very important. With good staging, the animators are able to present any idea in such a way that it is completely clear and not misunderstood by the audience.

4. Straight ahead action and pose to pose

These are actually two different ways of drawing actions. Straight ahead is the process of drawing each frame one by one, from start to end. This results in more spontaneous and creative animation, as the poses are not planned out ahead of time. Pose to pose involves drawing out specific key frames that are most important for conveying the emotions or actions of the scene, and then filling in the rest of the frames later. As game developers, we will most likely be using the latter for our animation purposes because it is easier to have our artist make key frames of poses and let our animation engine interpolate between these key frames.

The above image shows an example of pose to pose action, where the black drawings are the key frames and the red drawings are frames that are filled in to complete the animation afterward.

5. Follow through and overlapping action

This principle demonstrates the fact that not all parts of a body will accelerate or decelerate at the same speed. For example, if a dog with floppy ears starts running, we expect its ears to start moving only after the rest of the body starts moving, showing that the ears are flexible and not rigid. Likewise, when the dog comes to a stop, the ears will follow through the stopping motion, and stop ahead of the dog and after it has stopped.

In the above image, one can see this principle in action when the character’s cape comes to rest long after the character has reached the ground.

6. Ease in and ease out

A character or other animate object is not capable of instantly accelerating or decelerating when it starts moving. Thus, in animation, putting extra frames at the beginning and end of movement gives the feeling of gradual acceleration and deceleration, which increases the realism of the movement. This is known as ease in and ease out, or slow in and slow out.

The above image demonstrates ease in and ease out. At the beginning and end of the movement, there are more frames than in the middle, indicating that the coin will move slower at the beginning and end than while it is in the middle of its movement.

7. Arcs

Living things generally move in arcs rather than straight lines. For example, when you throw a ball, your arm does not move straight out. Rather, your hand will move in an arc from behind you, up to above your head, and subsequently to your front. An example can be seen in the image below, where the club moves in an arc rather than a straight line.

8. Secondary action

In animation, secondary actions are those that add to and support the main action in a scene. For example, if the main action is a character walking, a secondary action could be the character swinging his arms while walking. An important aspect of secondary action is that it should not take away or distract from the main action, but rather accent it, making it more lively and life-like. In the image below, the primary action is the mouse running, and the secondary actions are the movement of its tail and its hat.

9. Timing

Timing refers to the number of frames that are used to produce an animation, which changes the speed of the animation. Timing is important because it is what forms the foundation for conveying emotion in a scene. For example, if a character is moving slow and sluggish, it can be deduced that the character is unhappy or tired. Timing can also be used for comical purposes, such as a pause before a very funny moment. It is also important for conveying that objects follow the laws of physics, increasing realism. For example, a large object should move slower than a very small object.

10. Exaggeration

Exaggeration is used to make realistic animation seem less static and boring. It can also be used to make it more obvious to the audience what emotions are being conveyed in the scene. For example, in the below image, Wile E. Coyote is extremely surprised by something. This emotion is made very obvious, and also comical, by the fact that his jaw has literally dropped to the ground.

11. Solid drawing

Solid drawing is the idea of conveying characters and objects in three dimensions, to give them a feeling of volume and weight. This is accomplished via correct anatomy, perspective, and shading. This is an important principle for hand-drawn animations, but thanks to the ability of computers to automate 3D image rendering from defined models, it is not as great of a concern to us as game developers.

12. Appeal

Appeal in an animated character is its ability to convince the viewer that it is real and interesting. Of particular importance here is the animator’s ability to convey emotion through the character’s facial expressions and body movement.

Computer Animation Week 1: History, Locomotion, and Animation

In the first week of our computer animation course, we were given a brief overview of the history of animation, and we also discussed simple locomotion and animation techniques. Animation is essentially a way to “bring to life” static images, to give the illusion of movement. This functions thanks to persistence of vision, which is a phenomenon where our eyes/brain retain images for a short period of time after they are gone. This causes quick, successive changes in static images to give the illusion of fluid motion instead of discrete images. Early techniques at animation included the thaumatrope, zoetrope, and praxinoscope, which were all devices that would rapidly swap physical images.

In a 2D game engine, sprites are used to represent characters. Sprites are essentially boxes that have a texture (the actual image of the character) mapped to them. The box itself has three properties: size, position, and rotation. These properties are what define the locomotion of the sprite. That is, locomotion is how the sprite (the box, and not the texture) move around on screen. The actual animation is defined by how the texture changes within the box, either by swapping the visible image (e.g. via a spritesheet) or by modifying the colour of the texture.

Setting up SFML to work with Visual Studio 2013

If you’ve been trying to setup SFML with VS2013, you’ve probably been having some trouble since they don’t have a version for VS2013 on their downloads page. Luckily, I found a short tutorial which includes binaries for VS2013, which can be found here. I did do a couple things differently though, namely dropping the .dll’s into my project folder rather than the VS folder. If you don’t feel like making the jump, or you want to do the same thing I did, I’ll outline the installation steps below.

The first thing you should do is to download the binaries and source code for SFML that is compatible with VS2013, which can be found at https://dl.dropboxusercontent.com/u/88413086/SFML-2.1-VS2013-RC.rar. Next, create a new folder C:\SFML\, and extract the above rar to it. Once done, the folder structure should look like “C:\SFML\SFML-2.1”. It’s important to use this folder structure, because the template that we will be using later to create our SFML projects uses this to specify the location of the libraries that SFML uses.

The next step is to download the template file, which can be found at https://dl.dropboxusercontent.com/u/88413086/SFML%20Game%20Template.rar. Once downloaded, extract it to Visual Studio’s VC\vcprojects folder, which should be located somewhere similar to “C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC\vcprojects”. The final folder structure should look like “C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC\vcprojects\SFML Game”.

This is where I deviate from the tutorial I found. Rather than placing the .dll’s into Visual Studio’s bin folder, I place them into my project’s debug and release folders. To do this, we’re first going to create a project using the template we just installed. In VS, hit File>New>Project, and under Installed>Templates>Visual C++ (on the left) you should find a template called “SFML Game”. If you can’t find this template, you should double-check that you put the template folder in the right spot (see above). Name your project, and hit OK. The next thing we have to do is to build the project in both debug and release mode so that the required folders will be created in your project folder. So, once the project is created, set the project to debug mode (see the image below) and hit Build>Build Solution. Once done, do the same thing for release mode. If you navigate to your project’s folder in windows explorer, you should now see Debug and Release folders in the main folder, which have .exe’s along with a couple other files.

The final step is to grab the .dll’s and drop them into the appropriate folders. All of the .dll’s can be found in “C:\SFML\SFML-2.1\bin”. You should notice that half of them end in “-2.dll” and the other half end in “-d-2.dll”. We’re gonna copy the ones that end with “-d-2.dll” into our project’s Debug folder, and the rest into our project’s Release folder. Once that is done, go back into Visual Studio, set the project to debug mode again, and hit F5. A console and a window with a green circle should pop up. If so, you’re ready to start developing with SFML!

 

Source: SFML community forums – SFML 2.1 Visual Studio 2013 binaries + source + template