Sponsored By

Featured Blog | This community-written post highlights the best of what the game industry has to offer. Read more like it on the Game Developer Blogs.

This is the fifth set of tutorials using free graphic tools like inkscape and gimp to create 2D game art. After getting a little sidetracked in the last part and creating some more character designs, I am finally back to animation in inkscape.

Hans Hildenbrand, Blogger

November 14, 2011

3 Min Read

Having covered the basics in [part 1], [part 2] and [part 3] and getting a little sidetracked in [part 4] I finally worked on the animation tutorial.

I decided to alter the approach and use a slightly more complex character with all the parts that make up a human [rather than join legs and arms into one object the way I set up the character in part 3].

 

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)

 

And this is what it looks like scaled down to a 64x64 bitmap:
 


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


Variations

It's all about changing and trying different poses, placements, rotations and flows. Based on the setup of the caveman I created three more characters as inspiration:

 

I hope you enjoyed this addition and it gave you some ideas how to have fun with vectors. As for me... I had way too much fun writing this and as a result the next tutorial is already sitting on my laptop waiting for the final touches.

 


Read more about:

Featured Blogs
Daily news, dev blogs, and stories from Game Developer straight to your inbox

You May Also Like