Game Creation with XNA/Mathematics Physics/Character Animation

Character Animation

Here we have to distinguish between skeletal and keyframed animation. The main point is to show how to get both types of animation working with XNA. Special attention should be places on constraints given by the XNA framework (e.g. the shader 2.0 model does not allow more than 59 joints).

Introduction

Animation is just an illusion- it is created by a series of images. Each is a little different from the last. We just feel such a group of images as a changing scene.
The most common method of presenting animation is as a motion picture or video program, although there are other methods. [1]
In Computer based animation there are two forms of it: The little more "classical", from flip-books known keyframe animation and the skeletal animation, which is by default known from 3d-animation.

Keyframed Animation

Keyframe Anim.
http://commons.wikimedia.org/wiki/File:Muybridge_race_horse_animated.gif

Keyframe animation is an animation technique, that originally was used in classical cartoons. A Keyframe defines the start- and endpoint of an animation. they are filled with so called interframes or inbetweens.

History, Traditional Keyframe Animation

In the traditional keyframe animation, which e.g. was used for hand-drawn trickfilms, the senior artist (or key artist) would draw the keyframes. (Just the important pictures of an animation) After testing of the rough animation, he gives this to his assistant, and the assistant does the necessary "inbetweens and the clean up.

Computergraphics

In Computergraphics it is the same concept like in cartoon: The keyframes are created by the user and the interframes are supplemented by the computer. The "Keyframe" saves parameters such as position, rotation and scale of an object The following inbetweens are interpolated by the computer.

Example

An Object will move from one corner to an other. The first keyframe shows the object in the top left corner and the second keyframe shows it in the bottom right corner. Everything in between is interpolated.

Example usage
The Starting Keyframe
The Ending Keyframe
The Completed Animation

Interpolation methods

The preceding sections mentioned that some key-frame animations support multiple interpolation methods. An animation's interpolation describes how an animation transitions between values over its duration. By selecting which key frame type you use with your animation, you can define the interpolation method for that key frame segment. There are three different types of interpolation methods: linear, discrete, and splined.
[2]

linear

The individual segments are pass with constant speed.

Discrete

With discrete interpolation, the animation function jumps from one value to the next without interpolation.

Spline Interpolation

http://msdn.microsoft.com/uk-en/library/ms742524.aspx

Keyframe Animation in XNA

to be edited die einzelnen Parameter werden in einer Liste gespeichert. Wenn man nun die Länge der Timeline und die anzahl der elemente hat, kann man hier draus schließen, auf welchen Keyframe man zu welcher Zeit zugreifen kann. (in dem der Timeline- Zähler hochgezählt wird und dann der entsprechende keyframe aufgerufen wird, ist es, als ob man z.b. bei einem daumenkino, bei dem 1 seite 1 keyframe ist, auf die enstsprechende Seite blättern würde).

Folgend ist eine klasse dargestellt, mit welcher dies umgesetzt werden kann. Die Quelle ist hier drunter zu finden.

A little keyframe animation class

using System.Collections.Generic;
using Microsoft.Xna.Framework;

namespace PuzzleGame
{
    /// <summary>
    /// Keyframe animation helper class.
    /// </summary>
    public class Animation
    {
        /// <summary>
        /// List of keyframes in the animation.
        /// </summary>
        List<Keyframe> keyframes = new List<Keyframe>();

        /// <summary>
        /// Current position in the animation.
        /// </summary>
        int timeline;

        /// <summary>
        /// The last frame of the animation (set when keyframes are added).
        /// </summary>
        int lastFrame = 0;

        /// <summary>
        /// Marks the animation as ready to run/running.
        /// </summary>
        bool run = false;

        /// <summary>
        /// Current keyframe index.
        /// </summary>
        int currentIndex;

        /// <summary>
        /// Construct new animation helper.
        /// </summary>
        public Animation()
        {
        }

        /// <summary>
        /// Add a keyframe to the animation.
        /// </summary>
        /// <param name="time">Time for keyframe to happen.</param>
        /// <param name="value">Value at keyframe.</param>
        public void AddKeyframe(int time, float value)
        {
            Keyframe k = new Keyframe();
            k.time = time;
            k.value = value;
            keyframes.Add(k);
            keyframes.Sort(delegate(Keyframe a, Keyframe b) { return a.time.CompareTo(b.time); });
            lastFrame = (time > lastFrame) ? time : lastFrame;
        }

        /// <summary>
        /// Reset the animation and flag it as ready to run.
        /// </summary>
        public void Start()
        {
            timeline = 0;
            currentIndex = 0;
            run = true;
        }

        /// <summary>
        /// Update the animation timeline.
        /// </summary>
        /// <param name="gameTime">Current game time.</param>
        /// <param name="value">Reference to value to change.</param>
        public void Update(GameTime gameTime, ref float value)
        {
            if (run)
            {
                timeline += gameTime.ElapsedGameTime.Milliseconds;
                value = MathHelper.SmoothStep(keyframes[currentIndex].value, keyframes[currentIndex + 1].value
                (float)timeline / (float)keyframes[currentIndex + 1].time);
                if (timeline >= keyframes[currentIndex + 1].time && currentIndex != keyframes.Count) { currentIndex++; }
                if (timeline >= lastFrame) { run = false; }
            }
        }

        /// <summary>
        /// Represents a keyframe on the timeline.
        /// </summary>
        public struct Keyframe
        {
            public int time;
            public float value;
        }
    }
}

resource: http://tcsavage.org/2011/04/keyframe-animation-in-xna/

References

http://xnanimation.codeplex.com/
http://msdn.microsoft.com/uk-en/library/ms742524.aspx
http://en.wikipedia.org/wiki/Animation
http://msdn.microsoft.com/uk-en/library/ms752312.aspx
http://tcsavage.org/2011/04/keyframe-animation-in-xna/
http://de.wikipedia.org/wiki/Spline-Interpolation
http://en.wikipedia.org/wiki/Spline_interpolation

Author

ARei

Skeletal Animation

Skeletal animation is the technique in computer animation which is represented in two parts, the skin part (called mesh) and the skeleton part (called rig). The skin is represented as a combination of surfaces and the skeleton is a combination of bones. These bones are connected to each other like real bones and part of a hierarchical set. The result is, you move one bone and the bones which should interact move too. The bones animate the mesh (the surfaces) in the same way. While this technique is often used to animate humans or more generally for organic modeling, it only serves to make the animation process more intuitive and the same technique can be used to control the deformation of any object, a building, a car, and so on.

Bones(green)

This technique is quite useful for the animators because in all animation systems is this simple technique a port of. So they don't need any complex algorithms to animate the models. Without this technique it is virtually impossible to animate the mesh in combination with the bones.
http://en.wikipedia.org/wiki/Skeletal_animation

Rigging

Skeleton-Legs)

Rigging is the technique to create a skeleton to animate a model. This skeleton consists of bones(rigs) and joins which are the connetion between the bones. Regularly you associates this bones and joins with the property of an real skeleton. For example you create first the upper leg as a bone and afterwards you build the knee as a join.
http://de.wikipedia.org/wiki/Rigging_%28Animation%29

Skinning

Skin and Bones

Skinning is the technique to create a skin which is assigned to a wired frame (the bones) and the movement of the skin is like the movement of the bones.The skinning comes intuitive after the rigging. The differences between skinning and rigging is, skinning is the visual deformation of the body(your model). Useful is the fact that it is possible to setup every single sufaces, this is very helpful in situations like the motion of an arm. Even you move your arm (or the arm of the model), your skin (the surfaces of the model) interact with the motion differently, determined by the position like at the inside of your elbow or at the outside of your elbow. It is also possible to simulate muscular movement in this context. http://de.wikipedia.org/wiki/Skinning

The bones and polygons of your model have a limit in XNA:

Bones: 59 up to 79 in 4.0
Polygons: depends on the hardware

Typical programs are:

Animations in XNA

The simplest way to get animations from your model in XNA is to create animations in your 3d development tool. These animations are automatically a part of your exported .x flile or .fbx file.

A simple way to show the handling with animations in XNA is a nice demo from http://create.msdn.com/en-US/education/catalog/sample/skinned_model.

First we need a model and a animation:

Model currentModel;
        AnimationPlayer animationPlayer;

The next step is to update the LoadContent() method:

protected override void LoadContent()
        {
            // Load the model.
            currentModel = Content.Load<Model>("dude");

            // Look up our custom skinning information.
            SkinningData skinningData = currentModel.Tag as SkinningData;

            if (skinningData == null)
                throw new InvalidOperationException
                    ("This model does not contain a SkinningData tag.");

            // Create an animation player, and start decoding an animation clip.
            animationPlayer = new AnimationPlayer(skinningData);

            AnimationClip clip = skinningData.AnimationClips["Take 001"];

            animationPlayer.StartClip(clip);
        }

If you setup your clib variable as an array you can save a lot of different animations:

AnimationClip clips= new AnimationClip[skinningData.AnimationClips.Keys.Count];
clips[0] = skinningData.AnimationClips["moveleft"];
clips[1] = skinningData.AnimationClips["moveright"];
clips[2] = skinningData.AnimationClips["jump"];

After that is is easy to call the different animations, for example by dragging the jump key.

animationPlayer.StartClip(clip[2]);

The same applies to all the others animations.

Different Movements

References

http://de.wikipedia.org/wiki/Skinning
http://create.msdn.com/en-US/education/catalog/sample/skinned_model
http://de.wikipedia.org/wiki/Rigging_%28Animation%29
http://www.mit.edu/~ibaran/autorig/
http://www.mixamo.com/c/auto-rigger
http://www.der-softwareentwickler-blog.de/2011/05/30/video-tutorials-rigging-und-animation/
http://www.digitalproducer.com/2004/01_jan/tutorials/01_26/maya_rigging.htm

Author

FixSpix

Summary

What we learnt in this chapter

In this chapter we learned, how to animate our character in two different ways. First the keyframe-animation and than the skeleton-animation. These two techniques are the most important in xna.

But which one is better?

Better in this context is the wrong word, lets replace the word "better" with the words "better in which situation". Its simple... use the skeleton-animation in 3D and the keyframe-animation in the 2D area.

Author

fixspix

Authors

A.Rei and FixSpix