Top Down Zombies

Inkscape tutorial

The tutorial is about top down view graphics again. This time we create some zombies. I received a lot of feedback on the top down solider tutorial and a few requests for additions. One request was for enemies to go with the soldier. What’s better than a few zombies. I decided to make this tutorial a little different – rather than show a step by step on how to create things, I am going to take the zombie walk cycle apart and explain (or hope to explain) how it’s done.

The source files for the zombies are here.
You can use them for your presonal and commercial projects as long as you don’t resell the art itself or in a bundle.

If you open the inkscape files you will find the zombies in eight layers (one layer per animation frame).

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Let’s start…

2Dgameartguru - spacer
2dgameartguru - top down zombie

The soldier from the top down tutorial is our reference.

Here’s the first zombie in a matching style. Taking him apart reveals he consists of a head, arms, shoulders and legs/ feet.

The first walk will be close to a normal walk cycle. Let’s work out what’s going to be animated:

The main thing of course are the feet. The will move forward and back and do a little bit extra… ;)

We will also rotate the head just a little bit to make it look more lively.

2dgameartguru - top down zombie
2dgameartguru - top down zombie

The shoulders will move just a little bit as the body moves due to the hips turning.

The arms will move forward and back with the rotation of the shoulders.

The little extra that make the walk not look like a shuffle is the lifting of the feet.

2dgameartguru - top down zombie

This is the basic movement of the feet (the first 5 frames until the right foot reaches the position of the left foot in frame 1).
As we do a really simplified walk here I cut a few corners. Rather than show the knee as a new object I just flipped the leg image to show some of the blue trouser at the top.

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

More Steps…

2Dgameartguru - spacer
2dgameartguru - top down zombie

The left foot does the same movement in the next frames. If you want to show more of the foot being lifted – and your characters head is not covering it – you can add some sole in frame 2 and 6.

It could look something like this.

In this zombie animation I did leave these extra images out to keep it simple.

This would be the similar position in a side on view.

2dgameartguru - top down zombie
2dgameartguru - top down zombie

Looking at the combined frames again. The left foot and the right shoulder are forward.

Frame 2 has the left foot go in and the right foot disappearing – hidden under the body.

In frame 3 we have the knee come forward and the shoulders being nearly level.

Frame 4 has the right foot forward the furthest.

2dgameartguru - top down zombie
2dgameartguru - top down zombie

I did rotate the head a little each frame until frame 5 and from now on he’s moving back.

Frame 6 is a mirror image of frame 2 as far as the feet go. The arms and head move a little out of sync.

Frame 8 has to match frame 1 to make the loop work smoothly.

In the inkscape sample file I added a copy of frame 1 in the layer ontop of frame 8 to make it easier.

2dgameartguru - top down zombie
2Dgameartguru - spacer
After exporting the layers to bitmaps I made some animated sprites to show you the animation in action.
Note:
One key to making the animations look good is finding the right speed to play your animations.  
2Dgameartguru - spacer

Animation tests

2dgameartguru - top down zombie
This version is running too fast. The animation is clearly not a run but a walk. Slowing down the frames displayed per second will make it look more like a walk.
2dgameartguru - top down zombie

This one runs at 1/2 the speed. It still feels rather fast.

2dgameartguru - top down zombie

This is another reduction of the frames to 1/3 of the top one. It looks okay.

2dgameartguru - top down zombie

One more slower version. Now he seems to walk too slow.

2dgameartguru - top down zombie

This is a sample of the zombie2 animation showing more movement in the head and arms and turning the right foot outwards.

Conclusion

You can surely exaggerate the animation even more . Try different styles, variations and speeds. Dragging limbs, static, stiff or missing limbs make the walk animation more unique.
Have fun playing with the Top Down Zombie.
Note:
Seeing it’s zombies walking. You want to consider adjusting the animation to make it less smooth. Have him shuffle one leg, move the body/ head in an odd way, reach out with his arms, or just move one arm.
I hope this tutorial was helpful. Please let me know in the comments. Enjoy and have fun with vectors!

Get the source file (svg, pdf, and png)  for this tutorial for free!
(it includes 3 different types of top down zombies – easy to alter to make more)

more top down tutorials and assets