How Plants vs Zombies animation is done?

Question

I really like the plants vs zombies style of animation and it doesn't look complicated yet the result is really good. I doubt it's made of sprites seeing there's a large number of animations, combinations, distortions, outfits. So how that kind of animation is done?

Answer 1

Concept

To me it looks like a 2D Skeletal Animation system. In other words, animations are constructed out of smaller pieces, which are transformed and put together to create each frame of the animation.

Optionally, there may even be a bone hierarchy (i.e. a skeleton) in place, so that for instance, arms will be attached to the torso and moved automatically whenever the torso moves, etc. That's not strictly necessary though, since it's possible to just place each of the pieces manually, at the root level. That's the equivalent of having only one bone in the system.

It's a bit outdated by now, but James Silva (who created The Dishwasher: Dead Samurai for XBox Live Arcade) wrote a XNA book where he goes into great detail on this topic, even providing a full implementation. And here's a few other links that might also be relevant: this and this.

Very Basic Implementation

Here's an example (with C# syntax but a bit as pseudocode) of how to implement the most basic system of this type:

class AnimationPart
{
     Texture2D texture;
     Vector2 position;
     float rotation;
     float scale;
}

class AnimationFrame
{
    var parts = new List<AnimationPart>();
    void Draw(Vector2 position)
    {
        foreach(var p in parts)
            DrawTexture(p.texture, p.position + position, p.rotation, p.scale);
    }
}

class Animation
{
    var frames = new List<AnimationFrame>();
    int currentFrame = 0;
    void AdvanceFrame() { currentFrame = (currentFrame + 1) % frames.Count; }
    void Draw(Vector2 position) { frames[currentFrame].Draw(position); }
}

That's really as simple as it gets though. The sprites themselves can only be translated, not rotated or scaled, and the hierarchy is flat, meaning that there are no parts inside/attached of/to other parts.

Also this simple system only supports translation, rotation and uniform scaling of animation parts, but it's possible to support other types as well, such as mirroring, non-uniform scaling, or skewing.