Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
October 24, 2014
arrowPress Releases
October 24, 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 3
by Chris Hildenbrand on 10/27/11 05:16: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.


After the initial playing around with circles and squares, learning a little bit about the   fills and combining objects [part 1] and the playing around with gradients to set a scene [part 2] it's time to get to the fun stuff.

Creating a game character

Let's get  started on a simple 2D character. There are a lot of resources and tutorial out there on character creation and animation - most of which written by and for artists and animators. I will try and break in down to simple elements and easy to follow steps.

Some of the techniques used in this tutorial have been covered in earlier post. They should help you working your way through this a little bit more complex tutorial.

It's time to start getting creative. Building a character from scratch we start with the head and create the body and limbs before assembling the elements into the final figure. 

When working from a sketch, scribble or concept drawing it's helpful to import the bitmap image into a new layer at the bottom of your stack and work on top (Layer/  Add Layer or SHIFT+CTRL+N). Bring up the Layers (SHIFT+CTRL+N), select the sketch layer and import the bitmap. Lock the layer and select the work layer (e.g. Layer 1).
In order to make it easier to animate the character later grouping elements and assigning better pivot points is really helpful. Rather than turn an object like an arm at it's centre it makes more sense to turn it at the shoulder. In order to do that, select objects that 'belong' together and move the pivot points.

This concludes the creation process. Now it's time to go in and play with the shapes, create some variations and make the most of the objects we have created so far. 


I hope you enjoyed the tutorial so far. Have fun with vectors and stay tuned for the next post 'Taking on animation in inkscape'.



Related Jobs

Amazon — Seattle, Washington, United States

Event Marketing Specialist, Game Services
Digital Extremes
Digital Extremes — LONDON, Ontario, Canada

Petroglyph Games
Petroglyph Games — Las Vegas, Nevada, United States

Unity Engineer
Next Games
Next Games — Helsinki, Finland

Senior Level Designer


Fernando Fernandes
profile image
OMG, this is so freakin' AMAZING. You should write a book or create a course or something. Seriously, THANK U!

Adam P
profile image
I agree, work like this and the last two posts would be great as a book. I score -1 on the artistic scale, but by reading these I feel hope ;)

Timothee Garnaud
profile image
Awsome tutorial, once again

Tiago Costa
profile image
Ok... I've refrain myself from commenting the last two tutorials... but this is ... amazing...

Gamasutra should have more of these articles/blogs.

Darren Schnare
profile image
This tutorial is great! Just to let everyone know, this technique would work wonders with Flash CS5+ and its IK-based animation system.

Dustin Chertoff
profile image
I begin to tell you how awesome these tutorials have been. The other night I'm watching TV trying to sketch out some characters for a game wishing there was an easy to use guide to help me get started. I might not be as useless an artist as I thought!

Pieterjan Spoelders
profile image
2 words: thumbs up! VERY helpful :)

Denis Nickoleff
profile image
This. Is a great way of templating overall even if you are an artist, I had been doing something similar but this is much better. Thanks, Chris.

Benjamin Fremiot
profile image
Well as for the 2 other parts : AWESOME ! Really good job and +1 for the book idea ;)

Dan MacDonald
profile image
Great again, I'm looking forward to the animation one :)

Adam Bishop
profile image
Bookmarked yet again. Big thanks.

Mike Motschy
profile image
definitely should write a book, these tutorial are awesome and so easy to follow (I love inkscape now)

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

Ashwani Kumar
profile image
Hello Chrish:

Thanks for these awesome tutorials. Is there any chance of having these tutorials in the form of videos. Video tutorials will help a lot.


Jorge Segura
profile image
Just awesome! Please, continue with these tutorial series!