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.
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.
Let’s start with the 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.
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.
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.
Animating in Top-Down Perspective
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!
Hi – I'm a bit of a lurker coming out of the shades to tell you that even though I never comment (except for now), I greatly appreciate your efforts to create exactly the kind of topics I was looking for. I'm new to Inkscape and not much of an artist so the techniques posted here are a great help to me to help create game graphics. I'm also convinced there are more silent watchers just like me.
Now that I'm here, a question. What interests me is a step I often do not succeed in – thinking up some of the shapes. Most of them in this article are straightforward, but for example the helmet has a shape I wouldn't have thought of as a helmet until I saw it shaded.
Do you have any kind of mental image of what you're going to make, do you make quick paper drafts, or are you simply looking up shapes to get ideas?
Thanks… I am glad you like them… As for the art – most of the time I have a mental image I work from – with the soldiers helmet it derived from past works on 2D illustrations and 3D models for games like "Little Soldiers". A lot of the time I check my image with reference photos on google image search to make sure my take on it is somewhat related to reality. Sadly there is rarely time to sit down and sketch prior to working on the game assets – it happens every now and then and I do enjoy it – but in order to cut corners and keep deadlines I usually skip the sketch part.
Great tutorial! One question – how do you combine (merge) objects in inkscape? :)
Select the objects and use either 'Path/ Combine' (this can be undone by breaking the objects apart again) or 'Path/ Union' (joins the objects permanently).
Excellent tutorial, always picking up some new techniques from you!
What would be super helpful to see is a follow on in the Isometric tutorial regarding characters. Something like an 8-directional process silhouetting the characters outlines.
Excellent! I will be using this style for a tech demo of my top down zombie shooter. The question is, how do I make it unique? :P
Great tutorial, very usefull
Love the top-down tutorial. Any chance for more? (I am specifically looking for anything mechanical – cars, truck, ships, spacecraft, factories, etc). Thanks and keep up the outstanding work!
Yes, this is exactly what I was looking for…I have no art skills, strictly a programmer but these tutorials might give me hope. Better then searching the internet for weeks for free art that hasn't already been used over and over.
Thanks man!
You have my respect! This tutorial is awesome!
I found your blog a couple days ago and I'm working my way through each tutorial. I haven't dived into actually creating my own art yet, I'm just soaking it all in, but you make some amazing tutorials.
Since I've been nothing but a programmer for years, art has always intimidated me. Thanks for pulling the veil away and making me a bit more confident to jump in.
This tutorial is particularly cool because I'm working on a top-down game right now and it needs a bit of art to make it pop. Right now I'm just using rectangles via code, but I can't wait to see what the game looks like with some sharp looking art.
Thanks for taking the time, can't wait to get through the rest of your tutorials and finally get to work myself.
Translate Google:
Good tutorial even I unable to repeat it. I have problems because they do not know the commands. Example: How to attach objects to.
I would like you to do a tutorial teaching how to do things like this.
Thanks for the tutorial. It really looks interesting to me. Unfortunately, I am not comfortable with bezier tool. I am stuck in step 4. In which direction should I draw a triangle?
I paid the $5 for the little army guy a few days ago and never received a file, email back or anything.
I apologize for the delay. I started the year with a stomach bug and was out of action for the first couple of days of 2014. I sent the file today.
Great tutorials! here's one thing I can't figure out…how to animate a top down sprite, like the soldier I've been mostly playing around with, so that it looks like he's crouching…or falling on his back…anything that involves, I guess, changing the shapes to accomodate for the change in perspective?
Really nice top down :) Would be sweet if you made something similar but for a cartoon mage/wizard! :)
may i use the soldier for my game? i only need the 3 png files as they are shown in the tutorial. no svg file.
sure… go ahead… I am not sure the quality is good enough if you take them off the jpg image
I can give it a try, Jonas… It shouldn't be too hard.
thank you!
i scaled it down, cropped the gun and changed the color for the player itself. is this ok for you? may i mention this website in the credits?
https://www.pic-upload.de/view-22946449/screenshotLGS.jpg.html
cool… yes… feel free to mention me in the credits. Good luck with the game!
Hey I am a student in school is there anyway I get to use this image to for a game we are making. If so how could I get it and It would be posted on my school blog for my teacher to mark.
Hi Aidan, the tutorial explains the creation of the soldier step by step and you can use the result for any project you want.
I have been unable to get a decent looking run animation for topdown view :(
Could you create a tutorial for a running animation?
Hi,
Can you use the png file for soldier with gun in commercial game ?
What is the license for it?
Thanks.
Hey I just came across this tutorial – exactly what I was looking for! Im working on a topdown game right now and need a soilder type character, I have recreated this as best I can but in a differant color – was wondering can I use your style for my game?
Would help alot as I am no artist :)
Hey I really like the type of Art you make. Would you be able to team up for a game I want to create. I can only imagine how much your art can live up the game. Please let me know. Thanks
I am sorry but I simply don't have the time at the moment. I am having trouble finding time to finish the next tutorial video as it is.
Feel free to send me screenshots of your game though – I will try and comment and give you some hints on how to improve the art.
Good luck with your game!
Great tutorial really appreciate it
Great tutorial really appreciate it
Hi, I know others have asked and I see you don’t mind giving permission but I just wanted to make sure it was ok with you if I use the animated solder character for a game? I’m not so good at artwork yet and am more focused on the other parts of development. Thanks so much and nice work btw.
Sure… go ahead and use the art… There are some bits to go with it…
https://opengameart.org/content/freeart-topdown-extras
and
https://opengameart.org/content/freeart-topdown-extras-tank
Let me know if there’s anything, in particular, you are after. Good luck with the game :)