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

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

      Delete

    2. o preço agora é 5 obamas

      Delete

  2. 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. 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. 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. 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. 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. 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. Hi, I really like your tutorials. I just wanna ask you how to make game characters with outline? Thanks in advance!

    ReplyDelete

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

    ReplyDelete

  10. 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. I rarely cmt but this truly make me crazy, thanks and more tutorial, please!

    ReplyDelete

  12. 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. I love you! Seriously, you guys saved my life!

    ReplyDelete

  14. This comment has been removed by a blog administrator.

    ReplyDelete

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

    ReplyDelete

  16. 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. Use the same techniques from the above tutorial, and just look at the animations from any games that you own

      Delete

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

    ReplyDelete

  18. 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. 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
  21. Replies

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

      Delete

  22. 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. I recently made this simple Onionskin plugin for Inkscape to make animation a little less work.

    https://github.com/lingo/inkscape_onionskin

    ReplyDelete

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

    ReplyDelete
    Replies

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

      Delete

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

    ReplyDelete
    Replies

    1. 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. 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. The penguin at this stage is just a quick illustration. What would you need him to do? Please shoot me an email. :)

      Delete

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

    ReplyDelete

  28. 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. 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 animation creates movement in a two-dimensional artistic space. Work in the field of 2D animation requires both creativity and technological skills.

    ReplyDelete

  31. 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. 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. 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. каком программе работаете на этом уроке скажите пожалоста

    ReplyDelete
    Replies

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

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

  36. Thank you chris for making these awesome tutorial.

    ReplyDelete

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