Isometric game art in vectors

Inkscape tutorial

I have had a few request to do something isometric recently. Mostly, the requests are about characters and animation or more complex elements like buildings. As usual, I try to start a little easier to ease the learning curve. Let’s create a simple isometric grass block (how boring of me 😉 ). That said, the next tutorial is already in the making as I find isometric art a lot of fun. Well, it’s a lot more fun now doing it in vectors, than it was back in the old days.  Making 16×16 blocks look good with a only handful of colours was a different challenge.

What is isometric art?

According to wikipedia isometric projection is: ‘Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. It is an axonometric projection in which the three coordinate axes appear equally foreshortened and the angles between any two of them are 120 degrees.’

Now that’s a mouthful… and please… don’t ask me to explain it…. I just use it…  😉 Basically it’s an attempt to fake a three dimensional feel in 2D by rotating the ground 45 degrees and ignoring the perspective scaling (objects do not get smaller when they are further away).

Let’s get started with some basic steps into isometric projection. This is close to ‘true isometric’ but not quite there – but a lot easier to handle artwise.

Note:
With different game engines you might encounter slightly different proportions as far as the vertical scaling goes… but the process of creating the elements would be very similar.

Let’s start

2Dgameartguru inkscape toolbar
2Dgameartguru - isometric tiles

Let’s start with a square.

Rotate it by 45 degrees.

Scale the height to half it’s size.

Duplicate the shape and select both the nodes at the top and right.

2Dgameartguru - isometric tiles
2Dgameartguru - isometric tiles

Move those two nodes to the left and down to connect to the bottom shape.

Duplicate the top shape again and select the left and top node this time.

Move these nodes down and right to connect to the right side of the bottom shape.

This creates the base cube.

2Dgameartguru - isometric tiles
2Dgameartguru inkscape toolbar
2Dgameartguru - isometric tiles

Let’s add some colour and determine the light’s direction.

I chose a light source in the top right. As a result, the top is lightest and the left side darkest.

Add some decor with a few deformed circles (keep the ½ scale in mind) and a few triangles with a colour gradient.

2Dgameartguru - isometric tiles
2Dgameartguru - isometric tiles

Create variations of the blocks to make it look less repetitive. Usually, it works fine by simply rearrange the decor shapes.

By creating more blocks (e.g. a pure grass block) will allow you to variate the terrain you can build with your tiles.

2Dgameartguru - isometric tiles sample
For my little scene I added a quick tree – with a couple of circles (keeping the 1/2 deformation ratio in mind)  and some simple rocks based on the same circles – and it’s already starting to look like something you would expect to see in a game.

Conclusion

Creating isometric tiles is a bit more time consuming as things get skewed and squashed but it’s an appealing look and well worth it. You might find it easier creating elements for the decoration in frontal view first and skew them after. E.g. rather than draw a door for a house in isometric view, create it with rectangles and then skew the finished element to match the isometric setup.

A main problem you will encounter when creating whole scenarios in inkscape based on ‘isometric blocks’ is the depth sorting. It will only look right if the tiles are stacked properly. The tiles furthest away (top left corner of the screen) are on the bottom of the pile and the closest (front right corner) are on top of the other shapes.

Layering your scene can be quite helpful. E.g. make a layer with water tiles, then the ground tiles on top, the decoration on a layer above that.

I hope you enjoyed this quick post and it’s a start into the creation of isometric tile-sets. The next part of this tutorial will be props and buildings (and I will do characters and animations as well.).

Note:
Turning on the snapping in Inkscape makes aligning nodes in step 5 a lot easier. 
Turn on the snapping View/ Snap (%) to align nodes precisely to others. In the snap button bar there is a button  to ‘snap nodes or handles’ (7th from the top) and by turning on the sub-function ‘snap to cusp nodes’ (10th from the top) allows you to snap nodes perfectly. 
In case it’s still not as responsive as you would like go to the Inkscape Preferences (Shift+Ctrl+P) and change the weight for the snapping there.

Get the source art (svg file) of this tutorial for

USD 3.00
buy

2Dgameartguru basics - circles
2Dgameartguru basics - squares
2Dgameartguru basics - shading
2Dgameartguru basics - align
2Dgameartguru basics - picking colours