2Dgameartguru - adding shading and detail to your vector designs
2Dgameartguru - adding detail to character designs
2Dgameartguru - refining a game character
2Dgameartguru - refining a game character
2Dgameartguru - animation a game character in Spine
2Dgameartguru - adding shading and detail to your vector designs
2Dgameartguru - adding detail to character designs
2Dgameartguru - character concept Smithy
2Dgameartguru - character concept blob in Inkscape

Game character creation

Inkscape tutorial

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 then written by and for artists and animators. Let’s go with a simpler approach. I will try and break in down to basic elements and easy to follow steps.

Note:
Some of the techniques used in this tutorial have been covered in the earlier post. They should help you work your way through this tutorial which is a little bit more complex.
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

The Basics

2Dgameartguru - spacer
2dgamerartguru - creating a game character
2Dgameartguru - spacer

Something similar to this can be found when searching online for examples of ‘2D character animation’. A simplified body shows the head, body, and limbs moving through an animation cycle (e.g. a walk). Translating these examples to an actual game character is the tricky part.

2Dgameartguru - spacer
2dgameartguru - creating a game character
2Dgameartguru - spacer

Let’s take the character and split it up into its parts. It’s made up of the head, the body, the upper and lower arms, hands, the upper and lower legs and finally the feet.

2Dgameartguru - spacer

The Examples

2Dgameartguru - spacer
2dgameartguru - creating a game character
2Dgameartguru - spacer

The same elements (with the addition of a neck and a set of wings) make up this little fairy character.

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar
2dgamerartguru - creating a game character

This nude version of a famous plumber…

2dgameartguru - creating a game character

or this ninja character…

2dgameartguru - creating a game character

… or this little game character created for a mobile phone game template is based on the same principle of separated limbs.

Joining the upper and lower parts of limbs reduces the character to even fewer parts.

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

The Proportions

While creating your character keep the available space and proportions in mind to make sure the character fits the ingame needs.

2dgamerartguru - creating a game character

The actual size inside the game is the starting point for creating your game character.

The height and width available determine the character’s proportions and the level of detail.
Thin and long limbs and a high level of detail might look good in the vector illustration but can cause problems when taking it to a small size bitmap image.

Creating and animating a character with a lot of detail Takes up more time. Make sure it’s visible.

2Dgameartguru - spacer

Let’s start…

2Dgameartguru - spacer
Finally, yt’s time to start getting creative. Building a character from scratch starts with the head, then 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).
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Getting started

2Dgameartguru - spacer
2dgameartguru - creating a game character

Start with some circles.
Convert the nose to a path and modify the nodes to form a nose shape. Create a gradient fill to make the nose stand out and add some more circles. Shape the eyebrows convert the head to a path [SHIFT & CTRL & C] and shape it to form a chin.

Add two more circles for a hat modify the nodes of the top one to connect.

Add another circle and a square for some decoration.

Modify the circle to form the base for a feather. Use the straight lines tool to create some triangles.

2dgameartguru - creating a game character
2dgameartguru - creating a game character

Use the Path/ Difference command to ‘cut’ them Select the hat elements and rotate them a little.

Add some more circles for a neck hair and an ear. Lower and raise objects [Page Up & Page Down] to place the hair and ear below the hat.

2dgamerartguru - creating a game character
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

The Body

2Dgameartguru - spacer
2dgameartguru - creating a game character

The body is made up of a modified circle. A duplicate is combined via (Path/ Intersection) with the darker circle for the pants.

Add a rectangle for the belt, a circle and a triangle for the shirt. Convert the rectangle to a path [SHIFT & CTRL & C] and shape it to form the belt.

The arms are made up of two more circles and a rectangle with rounded corners.

Modify the nodes after converting the objects to paths. Add duplicates and darken the colours just a little.

2dgamerartguru - creating a game character
2dgameartguru - creating a game character

Start with another circle, convert it to a path and modify it to form the shoe.

A duplicate of the shape functions as the sole and two circles add a little detail to the shoe.

Add a duplicate of the curved arm object for the leg. Group it and create a duplicate of the group.

2Dgameartguru - spacer

The Setup

2Dgameartguru - spacer
2dgamerartguru - creating a game character
2Dgameartguru - spacer

Assemble the objects and lower and raise them (Page Up & Page Down) to layer properly. Arrange the back arm and leg at the bottom of the stack and the front arm at the top.

2Dgameartguru - spacer

Note:
Make it easier to animate the character later. Group elements and assign pivot points in better positions is really helpful. Turning e.g. an arm at its centre makes little sense. Move the pivot to turn it at the shoulder. Make logical groups. In order to do that, select objects that ‘belong’ together, group them and move the pivot point of the group to the matching joint.

2dgameartguru - creating a game character

The hat for example turns into a helmet…

Add some circles to form a shield…

A spear made up of four modified circles turns the character into a guard or knight.

2Dgameartguru - game character creation

Group the shoe objects and set the pivot to the ankle. Continue with the other parts and adjust the pivots to be in ‘joint places’.

Afterwards move the groups and rotate them into place.

Note:
Some vector programs (e.g. Corel Draw) allow group hierarchies. You can group the shoe group to the leg and move them together, then STRG & Click the shoe group and then rotate the shoe in the new position.

This concludes the creation process. Now it’s time to go in and play with the shapes and create some variations. Let’s  make the most of the objects we have created so far.
2Dgameartguru - spacer

The Variations

2Dgameartguru - spacer
2dgameartguru - creating a game character - variations
2dgameartguru - creating a game character

Now it’s time to change the pivot points in order to rotate the body parts properly.

Select the body
objects. Group them and double click to get to the pivot point. Move the cross marking it down to the hip area.

Do the same with the arms. After changing the pivot point for the hand group the arm and change the group’s pivot point.

A different colour for the shoe and two squares forming the buckle are combined by difference.

A long rectangle with rounded corners and a few circles form a scepter for the king.

His crown is made up of the band of the hat and the shrunk top of the head – duplicated and coloured.

2dgameartguru - creating a game character
2dgameartguru - creating a game character - variations

Silhouettes are another quick modification once a character is set up. A new set of eyes and some decoration complete this transformation.

2dgameartguru - character design Show4

A change in brightness and colouring can easily change the look and feel. In this case, it’s a shift towards yellow as well as some desaturation.

2Dgameartguru - spacer

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, pdf, affinity designer and coreldraw file) of this tutorial for free!
(only includes the main character created in the tutorial plus the ‘king scene’)

2Dgameartguru character design basics
2Dgameartguru character animation basics
2Dgameartguru character design creature
2Dgameartguru top down character design
2Dgameartguru character design robot