"Life is too short to make bad art."

Monday, November 14, 2011

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

31 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
  20. Replies
    1. They are a deformed rectangle - convert to path and the move the top nodes.

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

    https://github.com/lingo/inkscape_onionskin

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