Pages

50

Character Animation...

I should state that this is just one way of doing animations. It's very similar to old school cut out animations. It's not as fluid as hand drawn animations or 3D work but it's a straight forward and somewhat easy to follow approach. It works quite well with small size sprites.

Creating the [soon to be animated] caveman
It's pretty much the same process used in the tutorial's 3rd part with some added complexity in the facial features. 

 Note:
I mirrored the limbs in the image above just to show the 'exploded' body setup. There is no need for that when you use the elements in a side on view [both feet should point in the same direction].




Note:
Working with CorelDraw a lot I come to appreciate the multiple page setup of CorelDraw documents. Instead of layering animations you just place them on separate pages and flick through them to check your progress. The program even alows you export the pages in one layered bitmap file keeping layers and pages separated.

Animating:
If you start out animating it's helpful to go with some more basic animations first - there is nothing wrong with the 'mad-kung-fu-360-tiger-meets-dragon-in-mid-air-move' but it might be a little frustrating to start with.  
Think simple and create something you can use in your game. This way you keep motivated and focused.  

Note:
It's always helpful to check out references, poses, animations and other tutorials. A lot of the reference will show you a simplyfied setup that makes it a little easier than working off memory and your own experiences.

First steps (quite literally)




This is a scaled down version of what the walk cycle looks like:




Note:
This setup will seem very familiar to those of you using Adobe Flash or similar timeline based tools. The groups of object created in inkscape are similar to symbols either as 'movieclips' or 'graphics' used in flash. All you have to do though is animate the bits inbetween which Flash handles for you with 'tweening'.

I hope you enjoyed this addition and it gave you some ideas how to have fun with vectors.

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

buy

Chris Hildenbrand

2D game artist, pixelpusher, vector bender, face turner for over thirty years. I worked on more games than I can remember... The most recent release is "Super Crossbar Challenge" for iOS (Android coming soon) with Shattered Box, Fredbear Games and PlayPlayFun.

50 comments:

  1. mateus&gokuNovember 14, 2011 at 11:08 PM

    como baixa mano

    ReplyDelete
    Replies
    1. AnonymousSeptember 5, 2012 at 1:09 PM

      Você tem que pagar 3 Dollares, clicando no botão "buy now".

      Delete
    2. AnonymousJune 4, 2013 at 11:34 AM

      o preço agora é 5 obamas

      Delete
    3. picaMay 17, 2014 at 12:38 AM

      :D

      Delete
  2. AnonymousNovember 15, 2011 at 2:29 AM

    Thank you very much.

    I've been following your work since it appeared on HN, and I'm loving it.

    I'm not able to play with inkscape and do some stuff that I never thought I would be able to.

    Thank you very much!
    Tiago

    ReplyDelete
  3. AnonymousNovember 15, 2011 at 11:34 AM

    Thanks so much for your tutorials. I'm finding them very helpful.

    I'm an indie game developer, and hoping to upgrade my sprite skills.

    The next Ludum Dare (48 hour game dev contest) is only 1 month away. I have programming skills covered, but need to learn music and graphics. Going to be a challenge for sure. I'm doing the free ml-class.org (machine learning) in my spare time too.

    ReplyDelete
  4. SpriteAttackNovember 15, 2011 at 6:23 PM

    Good luck with the Ludum Dare - I was part of a team in one not too long ago... it was a fun and somewhat mad experience...

    ReplyDelete
  5. ThomasNovember 15, 2011 at 6:54 PM

    Thanks a lot for your tutorials. I'm learning a lot from them! Astonishing how creative you are with simple shapes! Kudos to you!
    I am looking forward to more underwater sprites (shark, octopus, diver) - there is this urge for years now to try a remake of Scuba Dive from Durrell (good old Speccy times) :-)

    Cheers and please proceed with your tutorials,
    Thomas

    ReplyDelete
  6. ninjaNovember 15, 2011 at 10:12 PM

    I believe you are making a great work giving us programmers good techniques to use when making our graphical assets.

    Inspired in your blog posts I wrote my own how to make buttons using inkscape basic tutorials.

    I hope I could keep learning from your stuff and share my improvements.

    Thanks for your all your work.

    ReplyDelete
  7. AnonymousNovember 17, 2011 at 2:02 AM

    Recently I was doing some research on animation because I found myself unable to create manually this "tweening", as you called it.

    Anyway I found that free soft called Synfig that is able to do that for me. On their official website there is also plugin for Inkscape that allows to export previously created vector graphics. This tool was designed for Linux, but there is version for Win that I'm using. I can't say anything about Linux version, but this one for Win is... well lets just say it's not the highest standard. UI design is very poor, performance even worse, but it will do the job.

    So if you lack some skill this soft will help you for free (that is one of the pros) and the results will be not that bad.

    ReplyDelete
  8. MichaelJanuary 12, 2012 at 11:43 PM

    Hi, I really like your tutorials. I just wanna ask you how to make game characters with outline? Thanks in advance!

    ReplyDelete
  9. AnonymousFebruary 11, 2012 at 3:43 AM

    awesome blog! thank you so much! keep up the great work

    ReplyDelete
  10. DeanoFebruary 20, 2012 at 9:34 AM

    I can't get enough. I always fancied creating some nice clean 2d art but wasn't able to to find the right tools let alone be taught on how to use them to there full potential, and for that - I thank you.

    You've brought out the artist out of me again after 22 years.

    I'm really looking forward to your next tutorial.

    Regards and I owe you one ;-)

    ReplyDelete
  11. UnknownAugust 4, 2012 at 4:52 PM

    I rarely cmt but this truly make me crazy, thanks and more tutorial, please!

    ReplyDelete
  12. AnonymousDecember 11, 2012 at 2:44 PM

    Hi Chris,

    Thank you for your wonderful tutorials. I am self learning for the past 1 yr to become an indie game designer and have been always lacking on the art side. Finding inkscape and your tutorial had guided me a new path and determination to carry on with my decision. Thanks!

    ReplyDelete
  13. AnonymousJanuary 24, 2013 at 1:14 AM

    I love you! Seriously, you guys saved my life!

    ReplyDelete
  14. AnonymousFebruary 21, 2013 at 9:03 PM

    This comment has been removed by a blog administrator.

    ReplyDelete
  15. AnonymousMay 18, 2013 at 12:18 PM

    Sir, I really appreciate you going out of your way to make these awesome tutorials. I really appreciate it.

    ReplyDelete
  16. Oron Ben ZviAugust 28, 2013 at 12:54 AM

    Hey Chris, do you know where can I find more basic animations tutorials, like idle, jump, crouch, fall that would fit this kind of art?

    ReplyDelete
    Replies
    1. AnonymousOctober 3, 2013 at 12:18 PM

      Use the same techniques from the above tutorial, and just look at the animations from any games that you own

      Delete
  17. scuba gear packageSeptember 20, 2013 at 9:54 PM

    Awesome post!
    The whole matter has been presented so well and in such an awesome way.
    Good job!

    ReplyDelete
  18. RickMirandaSeptember 22, 2013 at 10:51 AM

    Love your tutorials. One question about this particular tutorial here about the caveman is, related to copying and pasting the image to another layer. When I do that, the pasted object is of a lower resolution and definitely not a vector graphic. Hoping to get some help around this...

    ReplyDelete
  19. † Dark Jester †October 2, 2013 at 3:23 PM

    Wow, i can't believe i made a character by myself. I always suck at art but with the help of this uber awesome blog, I managed to create my very own character. Thank you so much. On another note, can you make a tutorial for suits or tuxedos? I really struggled a lot creating suits. Thanks again. : )

    ReplyDelete
  20. Aro GuerraJanuary 30, 2014 at 6:32 PM

    wow me gusta tu trabajo

    ReplyDelete
  21. Colten MiedemaMarch 3, 2014 at 11:53 AM

    How did you angle the eyebrows?

    ReplyDelete
    Replies
    1. Chris HildenbrandMarch 3, 2014 at 9:56 PM

      They are a deformed rectangle - convert to path and the move the top nodes.

      Delete
  22. AnonymousApril 12, 2014 at 6:11 AM

    Thanks a lot man !

    I've learned a lot studing your tutorials. I'm very bad for draw/sketching... but in Inkscape the things come a little easy for me!

    Thanks for taking the time to write this !

    ReplyDelete
  23. Lucas HApril 27, 2014 at 2:21 PM

    I recently made this simple Onionskin plugin for Inkscape to make animation a little less work.

    https://github.com/lingo/inkscape_onionskin

    ReplyDelete
  24. Kacey EdizaMay 19, 2014 at 10:56 PM

    Which software are you using to draw these? , thanks and keep up with the tutorials i like them.

    ReplyDelete
    Replies
    1. Chris HildenbrandMay 20, 2014 at 4:29 AM

      I use Inkscape for my tutorials but also work in CorelDraw and Illustrator [depending on the task at hand].

      Delete
  25. sarmad sdeeqAugust 6, 2014 at 7:37 PM

    can i use characters made by this program in RPG maker vx ace ?? are they compatible?

    ReplyDelete
    Replies
    1. Chris HildenbrandAugust 6, 2014 at 10:00 PM

      I don't know RPG maker vx ace... but I guess it uses either .png or .gif files for the assets. So YES... you can create the art in inkscape and then export to the art format your RPG maker needs.

      You might want to add a bitmap tool [like gimp or photoshop] into your pipeline to do the scaling in a more comfortable way with better controls and output.

      Delete
  26. marauderAugust 20, 2014 at 10:09 PM

    Hey guys, one question not so related to this post, but anyway, does anyone know if any sprite sheets exists for this cute little penguin which I reallllyyy need for this game Im making

    http://1.bp.blogspot.com/-Ds_clFuuG4U/UezjiUtxH2I/AAAAAAAABhk/YK8p3lPXcmg/s1600/Blog_banner_2a.jpg

    Thanks in advance

    ReplyDelete
    Replies
    1. Chris HildenbrandAugust 20, 2014 at 10:54 PM

      The penguin at this stage is just a quick illustration. What would you need him to do? Please shoot me an email. :)

      Delete
  27. AdminSeptember 17, 2014 at 12:40 AM

    I want to buy your cavemen and discuss about my game.
    Please contact me.
    mygoldvest@gmail.com

    ReplyDelete
  28. AdminSeptember 17, 2014 at 1:23 AM

    I need a cavemen that can walk, run, jump, ride I want to buy the character and I need you for my long term development. Please contact me.

    ReplyDelete
  29. Saverio BrancaccioOctober 7, 2014 at 5:29 AM

    Hi, in Inkscape you can export layers as .png images contained in a zip file. After that you have prepared the layers, it's enough to go to:
    File►Save as.. and select the format "JessyInk zipped pdf or png output (*.zip)".
    After that you can give the dpi size of the images and the game is done!

    You obtained a zip file containing a number of .png images. They are the images of each layer you defined.

    ReplyDelete
  30. 2D AnimationNovember 5, 2014 at 4:16 PM

    2D animation creates movement in a two-dimensional artistic space. Work in the field of 2D animation requires both creativity and technological skills.

    ReplyDelete
  31. TrinityApril 25, 2015 at 9:29 AM

    Excellent tutorial! I used this to create and animate a grumpy old man and I think he turned out pretty good. :)
    I have a question, though. I've been trying to make a cat character and I've found it's a pain to animate their four-legged walk. Can I use this separated limbs technique to animate a cat? ( And is there any chance of you making an animal tutorial? :D )

    ReplyDelete
    Replies
    1. Chris HildenbrandApril 29, 2015 at 8:58 PM

      Sure...you use the same technique for 4 legged animations. Separate the legs into upper and lower limb and maybe even separate paws for the cat to make the walk even 'smoother'.
      I hope to finish the tutorial I started a while back - so yes... there will be an animation tutorial with 4 legged walk coming soon.

      Delete
    2. TrinityMay 2, 2015 at 12:51 AM

      Thank you for your reply!
      Looking forward to seeing your next tutorials (and trying your suggestions).
      Keep up the great work, teaching us to create amazing things! :)

      Delete
  32. Aidar KurmanbaevMay 8, 2015 at 9:20 PM

    каком программе работаете на этом уроке скажите пожалоста

    ReplyDelete
    Replies
    1. Chris HildenbrandMay 13, 2015 at 1:18 AM

      Hi Aidar, you could have made it a little easier and asked in English - hoping google translate did a proper job the answer is 'inkscape' a free vector design tool. Occasionaly I use gimp for bitmap tasks as well.
      [it's also mentioned in the title banner of the blog btw.]

      Delete
  33. GameYan StudioAugust 10, 2015 at 5:45 PM

    Great Work ..

    ReplyDelete
  34. rickAugust 17, 2015 at 7:56 PM

    Hi Chris,

    Great tutorial, Thanks a lot :)
    Can you please tell how can we create sprite sheet which can be used in Unity5. I am making my first game and have been searching for this for couple of weeks now.

    ReplyDelete
  35. Samil AbdallahSeptember 4, 2015 at 12:25 AM

    Thanks dude your the best

    ReplyDelete
  36. Prathamesh RautNovember 12, 2015 at 3:26 AM

    Thank you chris for making these awesome tutorial.

    ReplyDelete
  37. Digo CasperJuly 8, 2017 at 3:19 AM

    Hi , Admin Thanks You So much
    i have just one question Please what the name of the programe u using to draw this ?
    https://s22.postimg.org/5wvp3rs5t/tutorial_sample11.jpg

    ReplyDelete
  38. obat kuat levitra 100mgJuly 6, 2018 at 1:31 AM

    alat bantu sex wanita penis mutiara
    alat bantu sex wanita penis maju mundur
    alat bantu sex wanita penis getar
    alat bantu sex wanita penis manual
    alat bantu sex wanita penis kelabang
    alat bantu sex wanita penis ikat pinggang
    alat bantu sex wanita penis tempel jumbo
    alat bantu sex wanita penis tempel
    viberator kapsul getar
    viberator fairy

    ReplyDelete