"Life is too short to make bad art."

Friday, October 28, 2011

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. 

Note:
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. 

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


Get the source art (svg file) of this tutorial for
USD 5.00(only includes the main character created in the tutorial plus the 'king scene')

buy

39 comments:

  1. I can't express how helpful these tutorials are to me.
    Never thought I could learn to draw like this, much less following a tutorial in two weeks.

    Thank you very much!

    ReplyDelete
  2. Great tutorial Chris!

    It's good to know how to create a character... And it would be great to know a handy way to create actual animations.

    You described a handy technique to create different states of a character. Could you please suggest a way to animate these states while drawing them to see the final animation? (as far as I know programs such as Photoshop have frames in order to do it)

    Thank you a lot,
    Grigoriy

    ReplyDelete
  3. Do you have any links to some "full" animation reference sheets for a 2D platformer?

    ReplyDelete
  4. Something like this:
    http://2dblockbuddies.blogspot.com/p/blockbuddies.html
    [the dummy is free and can be used for protyping or your commercial game]

    ReplyDelete
  5. @Grigoriy - sadly photoshop does not... you can do layers in photoshop but not frames or a timeline like Adobe Flash or ToonBoom... I found testing them in a rapid prototyping enviroment such as Construct2 to be really quick and easy.

    ReplyDelete
    Replies
    1. @Chris: Like you use Inkscape & Gimp as free software replacements to Illustrator & Photoshop, for 2d vector animation suites like Flash there's Synfig Studio (www.synfig.org) in the free sofware world; perhaps you knew about it already. It can export animations to formats like sprite sheets, plain pngs, etc. How about a skeletal animation tutorial in that? (something on the lines of http://wiki.synfig.org/wiki/Doc:Cut-out_Animation)?

      Btw, I can thank you enough for what you're doing through these tutorials. I'm starting to get back hope that even I can do graphics art work for my indie games, I'll try it this weekend :) Thanks a lot man!

      Delete
  6. you really rock! thanks!

    ReplyDelete
  7. Neat! I am hoping to be pro at this by the end of my first semester. I just enrolled at Santa Fe University to get my degree in graphic design. Thanks for sharing!

    ReplyDelete
  8. As the others have stated... i have done small stuff with inkscape, but its great to watch the characters come to life as you move their parts around. I NEVER knew about the pivot points either!! What a life saver!!

    Also, many people think it would be really hard and tedious to create a whole cast of characters for a game, but as you point out, making some small modifications goes a LONG way to making each one look unique.

    So glad I stumbled upon your site. Keep it up!

    -Adam

    ReplyDelete
  9. Thanks for the tuts and your site, which is awesome plus I notice you use open source tools for drawing like Inkscape and Gimp which are my all time favorite to do such a great job :)

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. Replies
    1. I am using Inkscape for all these tutorials as it's a free tool (most other vector tools work in a similar way (some options and tools might have different name though)).

      You can download inkscape here:
      http://inkscape.org/download/

      Delete
  12. How did you make the mouth?

    Anyway, epic job you did on this ^^

    ReplyDelete
  13. Thanks a lot. This is awesome, you helped me a lot.

    Thanks again :)

    ReplyDelete
  14. Just desire to say your article is as surprising. The clarity in your post is simply excellent and i could assume you’re an expert on this subject.2d animation studios

    ReplyDelete
  15. Thanks for the engineer friendly overview!

    ReplyDelete
  16. This is a great tutorial, but I would like to see the same character from a front view.

    ReplyDelete
  17. Thanks for the awesome tutorial. I'm waiting to get into 2d game art and I have no idea where to start. Your site is giving me a few pointers on things to do start doing first and the general idea of how to approach more complex game art. Thanks.

    ReplyDelete
  18. Just Just Just Just amazing I cant even express how helpfull this tutorials are for me . I am a unity3d developer never worked with illustrator /inkscape like tools your tutorials are very helpful to me . Let me know if you want any help in unity3d for any 2d or 3d game .

    ReplyDelete
  19. These really are great.
    But I'm still getting extremely frustrated when all my attempts end up looking slightly retarded.

    ReplyDelete
  20. Thanks very much.
    Can tell me What software you use to draw character?

    ReplyDelete
    Replies
    1. For the tutorialI use Inkscape as it's free. I also work with CorelDraw for game projects and use my ipad with SketchBook for doodles and concepts.

      Delete
  21. Thank u very much for your great tutorial. After searching dozens of tutorial I found your tutorial easiest to follow.but all your characters are in 3/4 view.I agree this view is most used in 2d game but I wish if I could see a front view character tutorial. Anyway great tutorial.keep it up.

    ReplyDelete
  22. Wow i like to watch the cartoon kinds of the move and also the cartoon. but the more wondering of today is the cartoon games.

    ReplyDelete
  23. @karan - the title might give it away... but let's spell it out: I use inkscape [and some gimp every now and then] for my tutorials.

    ReplyDelete
  24. I am a beginner and hobbyist and I found your blogs to be very good source of learning inkscape arts. I like cartoon network and POGO :P very much.
    In Loony Tunes there is a character 'Tasmanian Devil' which rotates very fast and creates tornado kind of effect. Can you please teach us to make simple version of it. I would love it :) thanks

    ReplyDelete
  25. @Chris Hildrenbrand
    I am fan of your tutorials.
    In your time, can you please do a tutorial on art on creating tornado art?

    ReplyDelete
  26. Does inkscape not allow parent/child or group hierarchies...would love to be able to pivot the shoulder and have the forearm and hand follow as children...

    ReplyDelete
    Replies
    1. The latest version does. I am not sure if it did back when I wrote the tutorial. I am pretty sure it didn't as I would have mentioned it.

      You can set the pivot for e.g. the hand, group it to the lower arm, set the pivot for the group and group it to the upper arm and the whole arm to the shoulder.

      Delete
    2. Correction: Just doing the posing for the robot in the complete game art tutorial series I noticed that you can group but Inkscape does not work with groups within groups.

      Delete
  27. These graphics are SVG right. Glad to know so i can import to create infographics with creately , the tool used for creating infographics .

    ReplyDelete
  28. Superb ! Awesome ! I am really very impressed .
    If you love gaming for unity games kindly visit….
    Unity game templates

    ReplyDelete
  29. These graphics are based on purely SVG which is good. This tool is being used by many mobile game programmers to create the best 2D type games apps.

    ReplyDelete
  30. Michael is an animator with extensive experience in video games, TV Commercials and Feature films, including VFX blockbusters like Guardians of the Galaxy 2.lego star wars minifigures

    ReplyDelete