informa
/
Art
Featured Blog

2D Game Art For Programmers - Part 5

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.

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.

 


Latest Jobs

Sucker Punch Productions

Bellevue, Washington
08.27.21
Combat Designer

Xbox Graphics

Redmond, Washington
08.27.21
Senior Software Engineer: GPU Compilers

Insomniac Games

Burbank, California
08.27.21
Systems Designer

Deep Silver Volition

Champaign, Illinois
08.27.21
Senior Environment Artist
More Jobs   

CONNECT WITH US

Register for a
Subscribe to
Follow us

Game Developer Account

Game Developer Newsletter

@gamedevdotcom

Register for a

Game Developer Account

Gain full access to resources (events, white paper, webinars, reports, etc)
Single sign-on to all Informa products

Register
Subscribe to

Game Developer Newsletter

Get daily Game Developer top stories every morning straight into your inbox

Subscribe
Follow us

@gamedevdotcom

Follow us @gamedevdotcom to stay up-to-date with the latest news & insider information about events & more