I have had a few request to do something isometric – usually the requests cover characters and animation or more complex elements like buildings. As usual I am trying to start a little easier to ease the learning curve and create a simple isometric grass block (how boring of me 😉 )… but… the next tutorial is already in the making and I find isometric art a lot of fun – well more fun now than back in the old days when I had to pixel them in 16×16 blocks with a handful of colours and still make them look good…
Anyway… 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.
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.
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.