Drawing Isometric Views Using Grids

by kirupa   | filed under Flash and ActionScript

So we saw in the previous tutorial how isometric perspectives are based on a 30 degree angle, but also learned that, that's not always the case. The two most common instances where its not are:

1. pixel art
    
2. programming (a la Flash)

Here, instead of using 30 degrees to base the altering angle of the perspective, a 2:1 ratio with the x to y coordinate spacing is used. What this means, is that to create your perspective isometric angle, you'd move one space up or down (y) for every 2 spaces left or right (x).

This is easily seen in a close up of the precise miniature imagery in pixel art.
 

Though this is very close to a 30 degree angle, it is not. Its closer to 26.6 degrees. If you were to convey 30 degrees as a ratio, it would be more like 1.73:1 or for every 1 space along y, 1.73 move spaces along x. As you can probably imagine this would not be very suitable for pixel art. Using 26.6 degrees, and the 2:1 ratio allows a steady pixel slope such as the one depicted in the image above.

The difference; is this a problem? No of course not. Each are basically just a different views with one method being slightly more slanted than the other. The difference is so subtle that you'd probably never notice it unless you were told or were directly comparing one to another and the changes became apparent. Each style is based on what is more appropriate for the situation.

Senocular

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇