Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
October 23, 2014
arrowPress Releases
October 23, 2014
PR Newswire
View All
View All     Submit Event





If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 
2D Game Art For Programmers - Part 5
by Chris Hildenbrand on 11/14/11 01:44:00 pm   Expert Blogs   Featured Blogs

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

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.

 



Related Jobs

DeNA Studios Canada
DeNA Studios Canada — Vancouver, British Columbia, Canada
[10.22.14]

Analytical Game Designer
Nix Hydra
Nix Hydra — Los Angeles, California, United States
[10.22.14]

Art Director
Avalanche Studios
Avalanche Studios — New York, New York, United States
[10.22.14]

UI Artist/Designer
Nuclear Division
Nuclear Division — Sherman Oaks, California, United States
[10.22.14]

Director of Product Management






Comments


Benjamin Fremiot
profile image
Awesome as usual! I'm an Inkscape addict now because of you ;)

Gonna try to animate my little sheep for some game prototype tomorrow :)



And so what to expect now? Do you have other tutorials in mind?

Andrew Wiggan
profile image
So so so good, as always. Thank you.

Timothee Garnaud
profile image
As good as usual. Thank you

Chris Hildenbrand
profile image
Thanks, guys. Yes - there is more in the pipeline. I am working on an addition to this one. with more elaborate animations as well as turns and twists as well as a tutorial on props - from the simple crate and barrel to handgun and swords, skulls to treasure maps.



I am just not sure where to take these tutorials as the feedback has been really good and some comments suggested compiling them into a ebook or even a printed book. I am looking into a few publisher as well as self publishing (maybe with some help from kickstarter). A lot of options - when really all I want to do is make game art and turn some of it into tutorials ;)

Michael DeFazio
profile image
the whole series is been excellent. i'm amazed that you've put this much craft and attention into these tutorials and we get to experience them for free. (it's not often someone donates as much love into something and just gives it away)

Chris Hildenbrand
profile image
My spriteattack.com server was/ is down. I am changing the images over to Picasa at the moment.


none
 
Comment: