AuthorTopic: The animation guide development thread  (Read 7330 times)

Offline 32

  • 0011
  • **
  • Posts: 535
  • Karma: +1/-0
    • @AngusDoolan
    • http://pixeljoint.com/p/19827.htm
    • View Profile

The animation guide development thread

on: March 09, 2015, 02:14:15 pm
This is a thread for us to develop a bit of a beginners guide to animation. I'd like for it to be more like a general knowledge bank than a tutorial as such. Though some tutorial components to go along might be nice, like some basic "how to set up and animate in GraphicsGale/ProMotion/Photoshop" type things.

Since we don't really have anything like this for pixel art techniques I'm not sure if this is the kind of thing the mods would want to keep around as a sticky but it would at least be nice to have all the basics in one pixel centric thread for people to link beginners to. My experience is that I'm fresh out of Uni with a bachelors in animation so there's plenty I don't know and heaps of room for me to be wrong so I'll need some help from the community.

So far I'm thinking the layout will be:

What is animation and how does it work?
   In this section I'll go over the basics of how we see animation through persistance of vision and some basic concepts like what frames are and frame rates etc.


Am I ready to animate?
   This will basically just be a brief run down to say that solid drawing skills will make animating a lot easier and that it's a dedicated craft with it's own unique set of problems so it's probably not the place to start learning art.


Basic principles of animation.
   This is the most important section where I'll go through the basic principles of animation, each section will have some visual aids as well as an analysis of at least one game asset demonstrating the principle in use. The sub-headings for this so far are:
      The physics of animation
      Basic movement
      Timing
      Ease in and ease out
      Anticipation and overshoot
      Arcs
      Follow through and overlapping action
      Stretch and squash


Cycles.
   Here I'll talk about cycling animation and give some examples of common cycles with game art examples. Below are the ones I can think of that are important but suggestions are welcome.
      Wheel Cycle
      Ball Bounce
      Pendulum
      Wave
      Dissipation (ripples/smoke etc.)
      Cats tail


Animating a character.
   Talking about the most important aspects of character animation. Haven't got a completely solid idea of how I'll approach this but something like:
      Character
      Weight
      Anatomy
      etc.


Techniques for developing an animation from scratch.
   I will go through the basics of building an animation.
      Key frames vs. straight ahead
      Key frames, Breakdowns and Inbetweens
      Referencing and acting it out
      Thumbnails
      Creating an animation roadmap (timing charts, arcs etc.)
      Putting it together (some info about frame management, onion skinning and scrubbing etc. here)

Things to be aware of when animating for a game.
   This will be particular pitfalls that come up when translating traditional animation techniques to games. How to make responsive feeling animation would be the primary subject to focus on I think. I'll need help with this cause I haven't got a whole lot of actual game development experience. As Cyangmou suggested we could probably use some words on what the workload is like when you've got animation in the mix and maybe suggestions for realistic movesets for a first game.

How to animate a...
   An analysis of some common video game animations.
      Walk
      Run
      Jump
      Attack


Advanced techniques.
   Self explanatory. Just a couple I can think of off the top of my head:
      Smears
      Multiples
      Subpixel animation


What software is available.
   Quick run down of the available pixel art animation software and their strengths and weaknesses. I'll need a hand with this one from people familiar with software other than GraphicsGale.


Tips and tricks
   Any other tidbits that don't fit into the main text.

Further reading
   Where we post links to as many animation resources as we can find.


I'll try to write up the bulk of it and draw the examples myself but if there's a topic you'd like to write about in particular any assistance would be greatly appreciated. I'll try to chip away at this over the next couple of weeks when I've got the energy. If you've got any suggestions for subjects to write on I'd like to hear them.

I'm hoping from this thread mostly to be discussion on the relevant techniques and to get feedback on what I've written, either from people who know animation and think I'm wrong or can expand on what I'm saying, or from people who are new to animation and can tell me what you found most helpful, what is clear, what is unclear, what subjects you'd like to know more about etc. I'd like the keep the language as clear and basic as possible and condense this as much as is reasonable so it's not a slog for people to read through. I'm not exactly the best at this so general editing help is encouraged.

I'd also love it if people could post good examples of pixel art animation from games or of their own that they think demonstrate a particular aspect of animation, I have some animations of my own to contribute but probably not enough to fill out a whole guide. Also links to online resources or books about animation for the further reading section would be great.

I expect any assistance people provide in this thread to be available for me to use verbatim so if you'd rather I didn't do that with anything you post just let me know. We'll link back to this thread in the finished edition so people can see the discussion behind it and who exactly contributed what.
« Last Edit: March 09, 2015, 10:06:40 pm by 32 »

Offline 32

  • 0011
  • **
  • Posts: 535
  • Karma: +1/-0
    • @AngusDoolan
    • http://pixeljoint.com/p/19827.htm
    • View Profile

Re: The animation guide development thread

Reply #1 on: March 09, 2015, 02:14:34 pm
First Draft
Here's my rough draft of the basic principles section.

The physics of animation
   The key to convincing animation is creating movements that mimic what we see in the real world and that means being aware of the physics of movement. In animation we primarly deal with kinetic energy, this is the energy of movement and it can come from many places. The two most common sources of energy for an animator are muscles and gravity. Depending on what you're animating energy can come from many other places as well, for example: motors, explosions, the wind and water currents. What these sources have in common is that when applied to a mass they will accelerate that mass in some direction.

The most important laws of physics for an animator to be aware of are Newton's Three Laws of Motion. In particular understanding Newton's 1st law will help you to create more natural animation.

Newton's 1st Law
Quote
Every body persists in its state of being at rest or of moving uniformly straight forward, except insofar as it is compelled to change its state by force impressed.

Newton's 2nd Law
Quote
Law II: The alteration of motion is ever proportional to the motive force impress'd; and is made in the direction of the right line in which that force is impress'd.

Newton's 3rd Law
Quote
Law III: To every action there is always opposed an equal reaction: or the mutual actions of two bodies upon each other are always equal, and directed to contrary parts.

I intend to write a little digestion of each of these and how they're relevant to animation.


Basic movement
   The most basic form of animation is translation. That is, taking a drawing, and then in the next frame taking the same drawing and moving it to some other place. Most animation is going to be based on translation. If the frame is spaced correctly in relation to the previous and following frames, you will create the illusion of movement.


This the simplest kind of translation, in each frame the circle moves the same number of pixels, and each movement takes the same amount of time.


Timing

   Timing refers to the amount of time it takes to perform an action. Essentially how fast or slow a movement appears. This is manipulated by adding or removing frames. The timing of a motion is going to be extremely important to to the final appearance of an animation. A good sense of timing is imperitive, and a skill you will develop as you practice.


This is the same movement as we saw above however there are half as many frames so the motion is faster.


And this is that movement again but with twice as many frames so the motion is slower.


Ease in and ease out
   Ease in and ease out are two very similar concepts. As we know from Newton an object will resist a change in its motion. Because of this objects will rarely start or stop moving on a dime, they will accelerate and decelerate.


This object starts still and ends fast, it eases into it's movement. This is achieved by moving each frame slightly further on each successive frame, so in the first frame it moves 3 pixels, in the second 6, in the third 12 and so on. The movement is exponential, how dramatically so will depend on the force being applied to the object. This could probably be stated better, to address top speed but I can't think of easily understandable terminology to describe an s curve.


The exact opposite is when the object starts out fast and slows to a stop, it eases out of it's movement. This is achieved in the exact opposite way as you would ease in.


Here it is with both ease in and ease out.

Anticipation and overshoot
   Anticipation and overshoot are related concepts and are achieved in a similar manner however they occur for distinct reasons. When an object begins to move -and especially when that object is a character- you can create what is called an "anticipation" frame in which the object first moves in the opposite to intended direction. Think of it like winding up a punch. This frame primes the viewer to anticipate the following movement and makes it much easier to comprehend.



In the top image the circle immediately jumps into motion and it is difficult to follow and the eye may lose track of it. In the lower image the circle steps back a few pixels first and then jumps forward and is consequently much easier to follow.

Overshoot is almost like the opposite of an anticipation but it occurs when an object comes to an abrupt stop. Remember Newton's first law, that objects in motion will remain in motion unless another force acts upon them. Try punching the air, you will find that your fist tends to bounce back at the end. This is because your fist in motion has a lot of kinetic energy and wants to keep moving so it pulls your arm out to it's full extension before the opposing force of your body structure returns it to a resting position.



In the top image the circle stops immediately and you do not get a sense that it has any mass. In the bottom image the circle overshoots it's landing position and bounces back, creating the appearance of weight. I'm getting something strange here where the animations are out of sync, maybe because the webpage loaded them at different times? Probably doesn't matter, I can put them into the same .gif if it makes the difference easier to see.


Arcs
   Almost everything that moves on Earth moves in an arc. In some cases this is due to gravity and the nature of acceleration. In others it is due to the motion of levers. When you animate you need to ensure that any object not moving in a straight line is moving in an arc, all objects should follow a smooth path, if the object strays from this path your animation will appear to jitter.


This is a ball being shot out horizontally and being pulled toward the ground by gravity. Observe that in each successive frame the ball decelerates horizontally as it looses forward momentum and accelerates downward due to gravity. When the ball hits the gound the downward force is reflected into upwards force and the ball bounces. Simply by applying these two natural forces you can see that the motion creates a smooth, natural arc.


A pendulum is a simple lever system with the pivot at the top and the weight at the bottom. Because the length of the rod doesn't change as the weight moves side to side it also moves up and down, creating an arc. The human body is a more complicated lever system with multiple joints but for the same reason; When we move we tend to do so in arcs.


Follow through and overlapping action
   Follow through and overlapping action is the way we describe the effects of inertia. As we know objects want to stay in their current motion so when a force is applied an object it will resist change. Depending on where the force is applied to a system different parts will move at different rates and in different synchronicities. Simply put, everything doesn't move together, and everything doesn't come to a stop at once.




In this example the force is being applied to the pink ball, from which a pendulum hangs. In the top image everything moves at the same rate and we don't get a sense that there is a joint at all. In the centre image the pink ball stays in motion and the pendulum drags behind it, this is overlapping action. In the bottom image the pendulum drags behind and then when the pink ball stops the pendulum follows through on it's movement.


Here there is a pink ball to which force is being applied and another ball attached to it by a string. As the pink ball comes down the black ball continues to rise and as the pink ball begins to move up the black ball continues downwards.


Stretch and squash
   All objects have some elasticity. Depending on the materials the object may be able to deform a little or a lot. When an object is able to deform that means follow through and overlapping action will come into effect, if the force is being applied to a particular part of an object then parts of the object which do not have force applied to them will lag behind. This causes objects to stretch and squash in when in motion. The mass of the object always stays the same; So if an object stretches is will get longer and thinner, and if it squashes it will get shorter and fatter.


This is the same visualisation as above however instead of two balls connected by string this is a single ball with the force being applied to the top and the energy being transferred around the elastic surface of the ball to the bottom.This example is probably a bit confusing due to looking like theres actually a ball inside at the bottom stretching it out


I'm thinking I should add timing charts to all of these. I'll also be adding an analysis of a relevant animation to each as stated above.

Also might be fun to add some way of the pixel theming to this, swords and kunai on chains and ninja stars and stuff. I dunno if there's mockups for the future re-skin but I wouldn't mind making the examples fit in with the theme.

Is there a way to format this so it doesn't stretch out across the whole length of the frame?



The Physics of Animation
    The key to convincing animation is creating movements that mimic what we see in the real world and that means being aware of the physics of movement. In animation we primarily deal with kinetic energy, this is the energy of movement and it can come from many places. The two most common sources of energy for an animator are muscles and gravity. Depending on what you're animating energy can come from many other places as well, for example: motors, explosions, the wind and water currents. What these sources have in common is that when applied to a mass they will accelerate that mass in some direction.

The most important laws of physics for an animator to be aware of are Newton's Three Laws of Motion. In particular understanding Newton's 1st law will help you to create more natural animation.

Newton's 1st Law
Quote
Every body persists in its state of being at rest or of moving uniformly straight forward, except insofar as it is compelled to change its state by force impressed.

Newton's 2nd Law
Quote
Law II: The alteration of motion is ever proportional to the motive force impress'd; and is made in the direction of the right line in which that force is impress'd.

Newton's 3rd Law
Quote
Law III: To every action there is always opposed an equal reaction: or the mutual actions of two bodies upon each other are always equal, and directed to contrary parts.

By mimicking and exaggerating these laws in animation we are able to convince the viewer that objects have mass. This is the single most important goal if you want to create natural looking animation. A character will not look real if they glide when they run and a giant sword won’t look dangerous if the character can wield it like a stick.

Basic Movement
    The most basic form of animation is translation. That is, taking a drawing, and then in the next frame taking the same drawing and moving it to some other place. Most animation is going to be based on translation. If the frame is spaced correctly in relation to the previous and following frames, you will create the illusion of movement.


This the simplest kind of translation, in each frame the circle moves the same number of pixels, and each movement takes the same amount of time.


Timing and Spacing

    Timing refers to the amount of time it takes to perform an action. Essentially how fast or slow a movement appears. This is manipulated by adding or removing frames. The timing of a motion is going to be extremely important to to the final appearance of an animation. A good sense of timing is imperative, and a skill you will develop as you practice.

Spacing is closely tied to timing and refers to the distance an object travels between frames. The timing will inform the spacing and vice versa.


This is the same movement as we saw above however there are half as many frames, and the spaces between the frames are larger, so the motion is faster.


And this is that movement again but with twice as many frames, and reduced spacing, so the motion is slower.


Ease
    Ease is a basic animation technique which is very closely tied to timing and spacing. As we know from Newton an object will resist a change in its motion. This is a concept known as inertia and has ramifications on every aspect of animation. Simulating inertia is how we communicate that an imaginary object has mass.

Due to inertia objects will rarely start or stop moving on a dime, they will accelerate and decelerate. Ease is used when an object is changing speeds, usually when an object which is transitioning from rest into motion or from motion to rest. Ease gives an object the appearance of weight, it implies that the object requires sustained energy to accelerate it to top speed or decelerate it to rest. The amount of ease which is used will give the viewer differing impressions of the weight of an object and also the power of the force being applied to it.

In animation you will hear the terms ease in and ease out. These terms are often used interchangeably and refer to different things in different contexts to different people. The most important thing to understand is at which point in a movement you have placed an ease and what the effect is on the perception of motion.


This object starts still and ends fast. This is achieved by moving each frame slightly further on each successive frame, so in the first frame it moves 3 pixels, in the second 6, in the third 12 and so on. The movement is exponential, how dramatically so will depend on the force being applied to the object and its mass.


The exact opposite is when the object starts out fast and slows to a stop. This is achieved in the exact opposite way as you would ease in.


Here it is with both ease in and ease out.

Anticipation and Overshoot
    Anticipation and overshoot are related concepts and are achieved in a similar manner however they occur for distinct reasons. When an object begins to move -and especially when that object is a character- you can create what is called an "anticipation" frame in which the object first moves in the opposite to intended direction. Think of it like winding up a punch. This frame primes the viewer to anticipate the following movement and makes it much easier to comprehend.


In the top image the circle immediately jumps into motion and it is difficult to follow and the eye may lose track of it. In the lower image the circle steps back a few pixels first and then jumps forward and is consequently much easier to follow.

Overshoot is almost like the opposite of an anticipation but it occurs when an object comes to an abrupt stop. Remember Newton's first law, that objects in motion will remain in motion unless another force acts upon them. Try punching the air, you will find that your fist tends to bounce back at the end. This is because your fist in motion has a lot of kinetic energy and wants to keep moving so it pulls your arm out to it's full extension before the opposing force of your body structure returns it to a resting position.


In the top image the circle stops immediately and you do not get a sense that it has any mass. In the bottom image the circle overshoots its landing position and bounces back, creating the appearance of weight.


Arcs
    Almost everything that moves on Earth moves in an arc. In some cases this is due to gravity and the nature of acceleration. In others it is due to the motion of levers. When you animate you need to ensure that any object not moving in a straight line is moving in an arc, all objects should follow a smooth path, if the object strays from this path your animation will appear to jitter.


This is a ball being shot out horizontally and being pulled toward the ground by gravity. Observe that in each successive frame the ball decelerates horizontally as it loses forward momentum and accelerates downward due to gravity. When the ball hits the ground the downward force is reflected into upwards force and the ball bounces. Simply by applying these two natural forces you can see that the motion creates a smooth, natural arc.


A pendulum is a simple lever system with the pivot at the top and the weight at the bottom. Because the length of the rod doesn't change as the weight moves side to side it also moves up and down, creating an arc. The human body is a more complicated lever system with multiple joints but for the same reason; When we move we tend to do so in arcs.


Inertia and Leading Action
    As touched on in the ease section, inertia is the resistance of an object to changes in its motion. In this section we will be looking at how inertia affects complex articulated systems. Depending on where the force is applied to a system different parts will move at different rates and in different synchronicities. Simply put, everything doesn't move together, and everything doesn't come to a stop at once. The point in the system which moves first, the source of the energy, is called the leading action.

Animators will often refer to these effects as follow through and secondary action. And are confusingly intermingled with the separate concept of overlapping action. For the sake of this guide we will be ignoring this terminology as it hinders the explanation of what is a fairly intuitive concept.




In this example the leading action is the pink ball, from which a pendulum hangs. In the top image everything moves at the same rate and we don't get a sense that there is a joint at all. In the centre image the pink ball stays in motion and the pendulum drags behind it, this is because the inertia of the pink ball was overcome more quickly than the inertia of the pendulum. In the bottom image the pendulum drags behind and then when the pink ball stops the pendulum continues to swing beyond the pink ball. Due to its inertia it won’t stop its motion until the forces of gravity and the weight of the pink ball pulling on it via the string overcome the energy of the ball's motion.


Here there is a pink ball to which force is being applied and another ball attached to it by a string. As the pink ball comes down the black ball continues to rise and as the pink ball begins to move up the black ball continues downwards. When the string is taut energy is being transferred, however when the string is loose there is no force to counteract the inertia of the lower ball so it continues on it’s path until gravity overcomes it.


Stretch and Squash
    All objects have some elasticity. Depending on the materials the object may be able to deform a little or a lot. When an object is able to deform that means that the effects of inertia will affect different parts of the object at different times, if the force is being applied to a particular part of an object then parts of the object which do not have force applied to them will lag behind. This causes objects to stretch and squash in when in motion. The mass of the object always stays the same; So if an object stretches is will get longer and thinner, and if it squashes it will get shorter and fatter.

Stretch and squash may be applied to any object regardless of it’s elasticity in order to increase the appeal of an animation. Common uses are when an object is moving quickly it will stretch and when it stops suddenly it will squash. The amount of stretch and squash will change the feel of an animation dramatically. Stretchy animation often appears more cartoonish.


This is the same visualisation as above however instead of two balls connected by string this is a single ball with the force being applied to the top and the energy being transferred around the elastic surface of the ball to the bottom.



This is a standard bouncing ball animation and one of the most common examples of stretch and squash.
« Last Edit: June 16, 2015, 06:55:11 am by 32 »

Offline PixelPiledriver

  • 0011
  • **
  • Posts: 997
  • Karma: +6/-0
  • Yo!
    • View Profile
    • My Blog

Re: The animation guide development thread

Reply #2 on: March 09, 2015, 05:44:11 pm
Solid effort.  :y:

Only part that is a little weird:
You try to relate Follow Through and Overlapping Action.
And then show examples of why they are different.

Quote
In the centre image the pink ball stays in motion and the pendulum drags behind it, this is overlapping action. In the bottom image the pendulum drags behind and then when the pink ball stops the pendulum follows through on it's movement.

You're showing the same thing in these 2 examples, but one keeps moving and one stops.
Even during the motion the act of the pendulum "drags" behind the pink ball is still considered Follow Through.
Not just when it comes to rest.
However some people have come to make a distinction between what happens during motion and what happens during the stop.
You also use the word "drag", when Drag is a keyword you could use here that is more directly related to Follow Through than Overlapping Action.
Drag is basically what you are trying to describe here, only slightly different, and stretches the term less.

While using Overlapping Action to describe that isn't harmful, it re purposes a term that already has a very different meaning.
"Traditionally", meaning Disney theory, Overlapping Action is making more than one thing happen at the same time.
Usually a character giving attention to multiple things at once. --> altho it does not have to be limited to a single character

Some made up examples:
1. A guy walking, chewing gum, blowing bubbles, and flipping and catching a coin --> continues to walk the whole time
2. A man writing, sweating, swats at fly, blows hair out of eyes --> continues to write the whole time.

An old example:
3. Whistling, shaking/swaying hips, tapping foot, spins wheel


I think this mix up comes from the fact that Follow Through is sometimes called Secondary Action.
And the terms Secondary and Overlapping are very similar and can have their meanings swapped quite easily.
It is not uncommon for some to say the Steam Boat Willie example is Secondary Action.



I'm not challenging what you have as wrong.
Just realize that not all animators agree on what terms mean what.
So it's good to know all the various interpretations.

Slow In and Slow Out being a prime example.

I was taught it as:
Slowing IN to POSITION --> coming to a stop slowly
Slowing OUT of POSITION --> moving into motion slowly

And you have:
it eases OUT of it's MOVEMENT --> coming to a stop slowly
it eases IN to it's movement --> moving into motion slowly

Depending on whether you set the subject of Slow In/Out as position or movement makes the meaning reverse.
Continue to think about it your way if it makes sense.
But others out there will tell you the exact opposite.



Here's some alternate examples to some of the stuff you've written about.

Time



Linear/Constant Spacing


Slow In


Slow Out


Slow Out and Slow In


Overshoot

And knowing that it is, we seek what it is... ~ Aristotle, Posterior Analytics, Chapter 1

Offline 32

  • 0011
  • **
  • Posts: 535
  • Karma: +1/-0
    • @AngusDoolan
    • http://pixeljoint.com/p/19827.htm
    • View Profile

Re: The animation guide development thread

Reply #3 on: March 09, 2015, 09:53:09 pm
The follow through and overlapping action/ secondary action thing is definitely one of my biggest problems. It's just something I have had to try to understand implicitly by looking at a whole bunch of different people's writing. I'm not sure that I've EVER heard someone able to really delineate the problems so my breakdown is just the terminology as I think of it personally. Do you feel that there are actually 3 distinct concepts between them? I agree that both of my examples are effectively the exact same thing.

Overlapping action vs secondary action I've always sort of distinguished in my mind as the kind of "things caused by by physics" and "things caused by the character". So overlapping action I'd think of as like a feather in the hat flapping and secondary action I'd think of a person waving as they walked. Probably not what the Disney guys were thinking originally but the subject is so muddled now. I'll probably bust out the animators survival kit and see what Richard Williams has to say about the subject.

Maybe it's better to just lose the terms altogether and start over talking about inertia and drag which is more relatable. It would be nice to be able to present this guide without having to load the readers up with the tons of conflicting information about traditional animation that is out there.

Drag and inertia is really what I wanted to talk about under the heading "follow through and overlapping action," I didn't really talk about multiple actions at once because I think it's probably not going to come up as much in game animation. Do you think I should touch on it?

Ease in and ease out is horrible terminology :blind: the number of confusions it has me caused in a group setting... Honestly I just flipped a coin and went with that one haha, maybe I'll just re-title it ease and note that the two terms are pretty much inter-changeable depending on your frame of reference and who you're talking to.  The terminology itself isn't really helpful to understanding the concept.

I like all of your examples ;D It's definitely a good idea to put the explanations into the graphic, and the charts overlayed on the animation is nice and clear. The exaggerated overshoot example is much better than mine, mines probably invisible to the untrained eye haha. Linear spacing is a much more descriptive term too, I'll use it.
« Last Edit: March 09, 2015, 09:55:24 pm by 32 »

Offline Eli_Shane

  • 0001
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile

Re: The animation guide development thread

Reply #4 on: March 10, 2015, 12:52:54 am
This is all really really really helpful! Thanks so much. One suggestion, could you do something instead of a ball? Like maybe a person doing all those things?
Life is everything. Simple as that.

Offline 32

  • 0011
  • **
  • Posts: 535
  • Karma: +1/-0
    • @AngusDoolan
    • http://pixeljoint.com/p/19827.htm
    • View Profile

Re: The animation guide development thread

Reply #5 on: March 10, 2015, 01:17:40 am
The intention is to add examples of character animations that employ each of these later but it's important to have the effects displayed in isolation first I think. I'll also be doing a section just about character animation later cause there is a lot of complexity in it. Good to hear it helps ;D

Offline Conzeit

  • 0100
  • ***
  • Posts: 1448
  • Karma: +3/-0
  • Camus
    • conzeit
    • View Profile
    • CONZEIT

Re: The animation guide development thread

Reply #6 on: June 10, 2015, 09:55:49 pm
FUCKING AMAZING! this is great. this is what pixelation is all about =)

funny that you made this over a month ago and I was just giving a critique related to this! I had some confusion with secondary action and follow trough as well, since I am more empirical than PPD but thankfully in my actual crit I came to the same terminology as he did.

Drag and inertia is really what I wanted to talk about under the heading "follow through and overlapping action," I didn't really talk about multiple actions at once because I think it's probably not going to come up as much in game animation. Do you think I should touch on it?

Overlapping action does come up in game animation! I mean, have you ever had a character run AND attack at the same time? megaman, doing overlapping action since 1987!

But even when it's not two separately animated actions played together in engine, it' something we do all the time and I think a must to differentiate personality trough characterization
http://www.animatorisland.com/beyond-the-bouncing-tail/
Overlapping action goes hand in hand with leading action, what was once the leading action and becomes overlapping action depending on what leads the movement. Big deal for characterization.

I think it's really confusing to think of a feather as a overlapping action, it's a particularly flashy form of followtrough but it doesnt have will of it's own, it follows. I think that should be where we draw the line between secondary ACTION and FOLLOW trough. Maybe a tail/tentacle/flailing arm is a better example.

The ease-in ease-out diferentiation has always sounded incredibly silly to me. I just talk of acceleration, inertia. I mean, why not use phisics related terms for phisics phenomenoms and keep the purely animation terms to purely animation related concepts? I'd go for intertia and drag.

On that same line of thought, squash and stretch IS a phisical trait but it has taken a meaning of it's own in animation. Maybe you should also talk about takes, and the concept of taking advantage of how one drawing only registers emotionally, so in that situation bending and breaking the laws of phisics temporarily is useful for emotional effects, and give the example of a squash and stretch of a supposedly solid cranium in a surprised take as an example.
« Last Edit: June 10, 2015, 10:30:36 pm by Conceit »

Offline 32

  • 0011
  • **
  • Posts: 535
  • Karma: +1/-0
    • @AngusDoolan
    • http://pixeljoint.com/p/19827.htm
    • View Profile

Re: The animation guide development thread

Reply #7 on: June 11, 2015, 03:25:13 am
Good timing bumping this now, I just wrote myself a note yesterday that I needed to finish this. Got busy with work faster than I expected and then something about animating sticks and balls seemed very dull  :crazy:

Shooting and moving is a good example of overlapping action, I hadn't considered it. I've never done it personally but I assume you'd just handle it like an upper body and lower body and put them together in game?

Animation terminology sure is useless haha. Would be nice to be able to start over but I think it's probably not useful to people in the long run if this guide has it's own set of terms. Leading action is a term I wasn't using but I should definitely bring it in since I'm already talking about it a bit with "sources of energy". Good point about leading action sometimes becoming secondary action. It's quite hard to break animation down to a set of basic techniques since they're all so muddied together once you get to a complex system like a character. Case studies might be the only way to convey things like that.

Hmm maybe that works as a distinction for secondary action and follow through. Ultimately the technique for both is pretty much the same though. Maybe the difference is that secondary action are actions which are caused by active forces exerted on the objects and follow through is an object which is trying to come to a rest. In the case of say and arm moving in a standard walk we might call the elbow and wrist secondary action but the hand dragging follow through. But there's also some degree of follow through acting on the wrist :'( I suppose the question is a) how do you explain that simply and b) is the distinction useful?

And I think the more useful concept out of all of that is the idea that the energy travels outwards from the source, and that everything doesn't always move at once. Maybe these concepts are better touched on in the character animation portion since that's largely where you'd be thinking about them. For the basic techniques I might stick to just follow through since that gets you thinking about how inertia and drag effect things in motion. Realistically I think these are concepts everyone understands implicitly once you see them so maybe fretting over the terminology is a waste of time.

You're right about non-physics based stretch and squash. It also has some overlap with motion blur. Might have to get a bit rambly about everything, hard to be succinct on a subject that has a million footnotes to every point.

I'll try to work on this today and hopefully get a little bit closer to something that's both comprehensive and easy to follow :blind:

Offline 32

  • 0011
  • **
  • Posts: 535
  • Karma: +1/-0
    • @AngusDoolan
    • http://pixeljoint.com/p/19827.htm
    • View Profile

Re: The animation guide development thread

Reply #8 on: June 16, 2015, 03:17:23 am
I've updated the basic principles section above. I updated my examples a bit to include timing charts and frame numbers. Got a bit tight on some of them, might only make the current frame number visible? My thought was that it would make it easier to tell what order the frames go in if it was hard to pick it up just by looking.

I've also updated my explanations for most of the stuff and tried to focus more on the physics rather than just talking about the animation techniques in isolation. Gotten rid of those pesky animation terms.

I think it should be a bit clearer now and hopefully doesn't need too much more work. Next step is to integrate PPD's examples as well as some sprite analysis to go along with each section. Hopefully sooner rather than later  :lala: