Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
up vote 6 down vote accepted


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.

share|improve this answer
Is there any framework or library or editor for that? – ibrabeicker Jan 6 '12 at 11:46
There should be. One of the links I posted seemed to be although I never tried. – David Gouveia Jan 6 '12 at 15:39
Useful Note: The above concept is perfect for dealing with characters that can change their outfits. You simply swap out individual body parts for their visually distinct part. Stick with the Composite pattern and you can go from PvZ to Scribblenauts with ease. – DampeS8N Jan 9 '12 at 11:59

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.