Pixelblog - 4 - Graphical Projection Part 2 / by Raymond Schlitter

Intro

Welcome back for another round of graphical projection. In last month's Pixelblog I created a farm house from top-down and side-view perspectives. Now I'm going to take it to the next level and reveal more dimension to our humble little abode. Get ready to produce graphics in one of the most iconic pixel art styles!  

Iso_Scene.gif

ISOMETRIC

Isometric_Diagram.png

Isometric projection uses a tilted top-down view similar to 1/2 top-down, but it also rotates the building 45 degrees. This unique 3D perspective allows you to display a great deal of information by revealing the roof and multiple walls at the same time. 

Isometric_Cube.png

In true isometric projection the angles between the projection of the axes are equal, or 120 degrees if a cube. In pixel art this is most closely achieved by using angled lines with a 2:1 pixel ratio. I sometimes refer to these as two-step lines. It's possible to use a different projection angle, but two-step lines create the most realistic perspective. Essentially, isometric pixel art can be made by conforming to a grid of such lines. 

Key Points

Isometric pixel art has been heavily used in video games since the early 80's as a means to produce convincing 3D graphics. Now, It's become iconic of the retro aesthetic and is still a crowd-pleaser. It sure does look nice but there are a few things to consider.

Advantages - Creates convincing 3D assets. Can be tiled. Opens more dimensional possibilities in terms of gameplay when used in video games.

Disadvantages - Economical but still more demanding to produce than straight side-view or top-view. The rotated perspective makes it difficult to create video games with precise direct input controls. Twitchy games like shooters can be very hard to control when presented in isometric perspective. 

6-Isometric_Cube.gif

Now let's make an isometric version of our farm house from the previous lesson.

7-Isometric_House.gif

That wasn't so bad, was it? Check out some tips to sharpen your isometric skills.

workflow tips

Define rules - You will save yourself a headache by establishing some guidelines as early as possible. For example, color palette, light source, scale, proportions and other style properties should always be consistent. This goes for any style of pixel art.

copy_paste.gif

The art of copy and paste - You will often see the same clusters repeated in isometric forms, so why not reuse them? Work efficiently by copying and pasting this and that here and there.   

Work on a grid - Using a grid can be a good way to quickly lay down lines with the correct angle. Patreon members can download a custom isometric grid.

Use a ruler - If you find grids to be distracting simply designate a layer to use as a ruler when things need to be lined up. Make a long line with the 2:1 pixel ratio in a bright color and you're set!

Final Word

So now we've covered top-down, side-view, and isometric perspectives. There are many different graphical projections I haven't covered yet, but these are the most common and those I'm most familiar with. I will revisit the subject another time when I acquaint myself with some other projections.

The next Pixelblog will release on May 22nd. I haven't settled on a topic at the moment, but I'm considering going back to the basics for the absolute beginner. A lot of people seem lost on where to even start and often ask me about programs, canvas size, inspiration, and other basics. Moreover, I'm thinking about doing a feature to help beginners get started. This will include info on the programs I'm familiar with, the hardware I use, setting up your canvas, general workflow tips, study tips, and insight into my creative process. 

Resources

If you find value in my content please consider becoming a Patreon member. Among many other rewards, Pixel Insider members get extra resources to compliment my tutorials.

This month I'm sharing the isometric farm assets of all the buildings featured in the opening image. This includes all the buildings as individual sprites, and the animations as separate frames. Play with these as you like. I'm also sharing an isometric grid that you can work on top of. 

All assets for this feature use colors from my Mondo palette, which I designed in Pixelblog - 1.

Get caught up on all my downloads

If you're not ready to commit to the subscription model of Patreon, you can also make a one-time donation and receive exclusive art and downloads.

-By Raymond Schlitter