"Life is too short to make bad art."

Monday, April 2, 2012

Top down view - Soldier

I am jumping wildly from iso to shading and now to a top down view. I apologize for the lack of order in the tutorial posts at the moment but I just felt like writing this one after creating the art for a request. 


Top down characters - 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. 


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). 


When animating the character it's pretty much just down to the feet and the shoulders corresponding to the leg movement - in a more limited way as our soldier holds his gun with both hands which restricts the movement a little.  



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 creating the art. 


Get the source art (svg file) of this tutorial for
USD 5.00

buy

22 comments:

  1. 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?

    ReplyDelete
    Replies
    1. 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.

      Delete
  2. Great tutorial! One question - how do you combine (merge) objects in inkscape? :)

    ReplyDelete
    Replies
    1. 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).

      Delete
  3. 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.

    ReplyDelete
  4. 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

    ReplyDelete
  5. Great tutorial, very usefull

    ReplyDelete
  6. 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!

    ReplyDelete
  7. 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!

    ReplyDelete
  8. You have my respect! This tutorial is awesome!

    ReplyDelete
  9. 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.

    ReplyDelete
  10. 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.

    ReplyDelete
  11. 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?

    ReplyDelete
  12. I paid the $5 for the little army guy a few days ago and never received a file, email back or anything.

    ReplyDelete
  13. 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.

    ReplyDelete
  14. 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?

    ReplyDelete
  15. Really nice top down :) Would be sweet if you made something similar but for a cartoon mage/wizard! :)

    ReplyDelete
    Replies
    1. I can give it a try, Jonas... It shouldn't be too hard.

      Delete
  16. 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.

    ReplyDelete
    Replies
    1. sure... go ahead... I am not sure the quality is good enough if you take them off the jpg image

      Delete
    2. 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?

      http://www.pic-upload.de/view-22946449/screenshotLGS.jpg.html

      Delete
    3. cool... yes... feel free to mention me in the credits. Good luck with the game!

      Delete