Let’s start the complete game project with the key element – the character design. Before, I stopped with the introduction right when it was starting to get interesting and the main character was about to take shape.
The decision was to make it a robot. The rough size will be 48x48px on a 1024x768px screen. These are some ratios to keep in mind when adding detail to your designs. There simply is not enough space on a small pixel canvas to show all the fancy things we can do in Inkscape. Scaling the elements down to their sizes in the game will mean losing some of the excess detail. Try and keep things simple in the beginning to see what works, add to it and ultimately find the right balance between detail and scale.
I altered (updated) the design of the tutorials a little bit. This allows me to show more of the object we are working on. Also allowing for zooming in and uploading the images in 2x the size.
Let’s get started with the project
We stopped with a basic draft of our screen. It’s just a few black squares on a layer above the cogs.
For the character to work in a level setup similar to this, he needs to be squarish in shape.
Adding squares gives us an idea of the proportions for the player and the enemies.
Move the arms into place – in this case a bit more inwards), do the same with the legs and rotate the triangles a bit to look more interesting.
The silhouette looks ok but could do with something a bit more interesting.
With the height already at the maximum, additions can only go on the sides of the head.
Now it’s time to play around with shapes and designs to find the one that suits best.
Start by adding simple shapes (circles, triangles and squares) and see what looks ok as they are the quickest to create.
Add more circles for the joints of the shoulders and the hips.
To stay stout and square knees and elbows are left out. It would make the robot too tall and thin.
I already had to scale the shapes a little bit to make room for the legs.
Adding detail and variations
Create another circle to form the hand. An added node is move inwards to give the idea of fingers and thumbs (in a lego kind of way). Duplicate and mirror the shape for the right side.
Using the line tool create triangle and duplicate it 3 times to form the simplified limbs.
When you are happy with the proportions, copy the basic box to a separate file.
Note: I like to keep elements in separate files – especially when they are going to be animated like our main character. It just makes it easier to export afterwards.
Put those two boxes on a separate layer, lock the layer and set it to a very low opacity.
They are a visual help and not set in stone.
The first shapes to add are a rounded rectangle and the eyes using the rectangle and circle tools.
I liked the horns the best. They derive from a square, converted to a path, with the nodes on the right side moved up and closer together.
The lines are converted to curves and bend to round off the top right.
It’s a good time to do a quick bitmap test.
Exporting the game character
It’s helpful to know what we are actually getting out of inkscape at the end. Select the inner boundry box [remember to unlock the layer first] and the character and export them with File/ Export PNG Image and selecting the ‘Selection’. You can set the pixel size right here and in the case of the robot the 48x48px result looks like this: