Building a Cartoon Tank

Inkscape Tutorial

Here’s a quick tutorial on a building cartoon tank as requested by one of the members on a game development forum. It’s a nice combination of simple to create little parts that make up the bigger object in the end. Breaking complex shapes down into managable parts makes the creation a lot easier.
Note:
When you scale in Inkscape holding SHIFT+CTRL down allows for the ratio of height to width to stay intact – which is rather helpful at times…
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Let’s start on the Cartoon Tank

2Dgameartguru - spacer
2dgameartguru - Building a Cartoon Tank

Start with a few circles for the wheel base.

Create a rectangle, convert it to a path and bring the top nodes inward.

Scale the shape to match the base and create a duplicate mirror.

Combine the two shapes via the Path/ Union option [CTRL++] and duplicate three more times.

Bringing up the transform panel [SHIFT+CTRL+M] allows you to adjust the angle precisely.

Combine the four shapes with the largest circle to form the basic cog shape.

2dgameartguru - Building a Cartoon Tank
2dgameartguru - Building a Cartoon Tank

Create two circles and combine them with the Path/ Union. This the starting element for the tracks.

Delete the centre nodes and convert the curves to lines to form a pill shape.
[Alternatively create a box with rounded edges.]

Scale up the pill shape to be slightly larger than the cog shape.

2dgameartguru - Building a Cartoon Tank
2Dgameartguru - spacer

Group the cog shape and line up three duplicates. Move the nodes of the pill shape to match the combined cogs.
Open the Stroke panel [SHIFT+CTRL+F] and assign a thick outline to the shape.

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Adding the Tank’s Chains

2Dgameartguru - spacer
2dgameartguru - Building a Cartoon Tank
2Dgameartguru - spacer

Duplicate the object and assign an even thicker stroke and select a matching setting in the Dashes pull down menu.

Create another duplicate and select no stroke and move it all the way back [Page Down]

2dgameartguru - Building a Cartoon Tank
2Dgameartguru - spacer

…before converting the strokes to paths for the two other shapes [CTRL+ALT+C]. Combine the two track shapes and assign a fitting outline to the track as well as the cog shapes. Our little cartoon tank will need a nice thick stroke.

2dgameartguru - Building a Cartoon Tank
2Dgameartguru - spacer

Next up is a square turned into a path. Change the lines at either end into curves with two new nodes.
Place the shape on top of the tracks and adjust the length. Create a lighter colour copy with no outline for the lighter top and a duplicate in black with 50% alpha below to cast the shadow.

2dgameartguru - Building a Cartoon Tank
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Building the Cartoon Style Turrent

2Dgameartguru - spacer
2dgameartguru - Building a Cartoon Tank

A deformed rectangle forms the main body [as it’s vastly covered by the tracks]

and two smaller rectangles with added lines for a bit of decor make the engine.

The base of the turret is a rectangle with a curved bottom and some more squares added as highlights.

2dgameartguru - Building a Cartoon Tank

A squares is the base for the top of the turret. Deform the top and bottom lines and add some highlights with a smaller duplicate on top. Some circles make some more highlights.

The same works for the light with an added triangle deformed to make the curved shine.

2dgameartguru - Building a Cartoon Tank
2dgameartguru - Building a Cartoon Tank

A squares is the base for the top of the turret. Deform the top and bottom lines and add some highlights with a smaller duplicate on top. Some circles make some more highlights.

The same works for the light with an added triangle deformed to make the curved shine.

2dgameartguru - Building a Cartoon Tank
2Dgameartguru - spacer
Remember to keep moving and overlapping parts separate when exporting to bitmap images. E.g. keep the barrel in a separate image file from the body in order to manipulate it later on via code .
Note:
Animate the tank by rotating the wheels and move the tracks along by modifying the nodes of the track shape. Four or five different images of the wheels and tracks should be enough for an animation.
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Going for a more Realistic Tank

2Dgameartguru - spacer
2dgameartguru - Building a Cartoon Tank
2Dgameartguru - spacer

Taking off the outlines already gives it a less cartoony feel. By adding more detail to the tank it easily transforms into something more realist. The addition of shading, highlights and shadows enhances the tanks realism. Repeating shapes and patterns is an easy way to achieve a more detail look.
Basically, having the base objects in place make it easy to adjust the design to your needs.

2dgameartguru - Building a Cartoon Tank
2Dgameartguru - spacer

Wrapping up the Cartoony Tank Build

To sum things up, don’t be scared of more complex objects. Break them apart into smaller part. Simpler objects are a lot easier to create. In the end, put them back together to create the bigger shape. Building a Cartoon Tank hopefully was a good example for this process.

Ultimately, one of the key elements to speedy art creation is recycling. Reuse elements you built earlier. E.g. the tanks headlines might look really good on a vintage car as well or the cogs can be part of some clock or piece of machinery.

Enjoy, have fun and keep bending vectors!


Get the source art (svg file) (includes the cartoony and more realistic tank) of this tutorial for free.
2Dgameartguru - spacer
2Dgameartguru making an ax
2Dgameartguru creating a gun
2Dgameartguru making a sword
2dgameartguru bow and arrow feature