Tag Archives: isometric

Feb
24
2010

Introduction to Isometric Pixel Art

The basic idea behind using an isometric view is to give the appearance of a 3D image on a 2D plane (i.e. the screen). The definition is basically that the each axis of projection follows the same scale, i.e. there is no perspective, meaning that the angle between all axes is the same (120°).

However, if we actually apply these angles to pixel art, it is more problematic. We have tan(30)  0.577, which means for every two pixels in the x-direction, we must move 1.155 in the y-direction! These clearly must be integer values if we are dealing with pixels on a screen, so we change the angle slightly so that we get a 1:2 ratio.

While we could in theory draw in a true isometric projection, it would require anti-aliasing to avoid looking horrible, and part of the whole pixel art philosophy is the idea of clean and crisp outlines; it is a style of digital art devoid of the smoothed, Photoshop processed  feel that is more common today.

Isometric Line ExamplesOf course other types of line can be used in isometric pixel art (to great effect), but it is generally advisable to stick to integer ratios for their gradients. A good example of this may be found in Rhys Davis’ authoritative “The Complete Guide to Isometric Pixel Art“, he describes a family of lines that work particularly well (see right).