Soldier in Top-Down Perspective

Inkscape tutorial

This tutorial is another request to show an easy approach to creating characters in top-down perspective. I know I am jumping wildly from iso to shading and now to a top-down view. My apologies for the lack of order in the tutorial posts at the moment. I just felt like writing this one after creating something similar for an art request.

Top-down characters have one major problem: There really is not that much to see. When you look straight down on a character, you see the top of the head, the shoulders, a bit of the legs and the arms when they move.

2Dgameartguru - spacer
2dgameartguru - top down soldier Show0a

One way to show what the shape really represents is by adding a nice long shadow of the shape – which works well in 3D engines but it a proper pain to reproduce in 2D as the shadow needs to move with the character. 

2dgameartguru - top down soldier Show0b
2Dgameartguru - spacer
Alternatively you can add more detail to describe the parts better and make them recognizable.
In the case of the top down soldier it’s going to be a matter of creating a helmet that is visibly a helmet, show parts of the gun he’s carrying and give him a pose that connects the gun to helmet in a believable way (e.g. a rifle standing out to in the centre of the figure is not really believable as it would ram into his stomach).
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Let’s start with the Top-Down Soldier

2Dgameartguru - spacer
2Dgameartguru - top-down soldier

Let’s start with three circles to create the helmet.

Combine the circles and adjust the nodes to form the main shape of the helmet.

Duplicate the shape, remove the stroke and scale it down in a lighter main colour.

Create a triangle using the straight lines tool, mirror it and curve the nodes to give the helmet more shape.

Create six more circles for the highlights, convert them to paths and modify the nodes.

Give those circles a light yellow colour with a linear gradient to transparency.

2Dgameartguru - top-down soldier
2dgameartguru - top down soldier

Next up we create the shoulders from two circles – base shape and highlight.

Mirror the shoulder and place them below the helmet (Page Down).

The gun barrel is made from 3 rectangles plus 2 high-lights

Place the gun barrel below the helmet and the shoulders (Page Down) and create two more circles for the hands.

Add another two deformed circle for the arms.

Move the arms underneath everything else.

2Dgameartguru - top-down soldier
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar
2Dgameartguru - top-down soldier

The shoe is either just seen at the tip or at the very back. A deformed circle forms the base.

A deformed circle for the highlight and some lines for added detail.

The leg is another circle plus a highlight for the front leg…

…and a darker circle for the back leg.

Place the feet below the other shapes.

For some added detail I added a simple backpack made of squares and to the character.

2Dgameartguru - top-down soldier
2Dgameartguru - spacer
2Dgameartguru - top-down soldier sample
2Dgameartguru - spacer

Animating in Top-Down Perspective

When animating the character, it’s pretty much just down to the feet. The shoulders correspond with the leg movement. In this case, in a far more limited way as our soldier holds his gun with both hands. This restricts the shoulder/ arm movement.
2Dgameartguru - spacer
2Dgameartguru - top-down soldier animation
2Dgameartguru - spacer

more top down tutorials and assets

As with all the tutorials, it’s a matter of taking this and playing around with the ideas and create variations. How would a knight in armor look from above or a caveman or a girl with piggy tails?

Note:
I didn’t go into great detail on topics covered in earlier tutorial posts (e.g. the manipulation of nodes or the gradients). If you have problems with those please check out the earlier posts on this blog. Thanks!

I hope you enjoyed this tutorial as much as I did while creating the art.


Get the source art (svg file) of this tutorial for free!