"Life is too short to make bad art."

Wednesday, February 29, 2012

Building isometric art in vectors - step 1


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 16x16 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. 

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.


 
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. 

The 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 and the 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.

I hope you enjoyed this quick post and it's a start into the creation of isometric tile-sets. I will continue this tutorial with props and buildings next (and yes.. 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.
Note:
Here's a more detailed step by step for creating the sides of the initial cube. 





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

buy

34 comments:

  1. wow, i literally found this blog yesterday and flipped through it looking for tips on making isometric scenes. great timing on this article :)

    ReplyDelete
  2. awsome work dude :) isometric !!! loving this post everybit

    ReplyDelete
  3. Great stuff, keep it up. I'm a coder and learn something new from your articles everytime.

    ReplyDelete
  4. Thanks, guys... the next one is in the making - building a small house, tree, rock and wall/ fence elements.

    ReplyDelete
  5. For isometric work , i use the isometric grid available in inkscape.

    Thanks for your blog, I look forward to further ! ;)

    ReplyDelete
    Replies
    1. I tried the iso/ axonometric grid and I had problems snapping to it... that's why I just snapped to objects instead... but yes... the grid is a big help when working with straight lines and isometric views... Thanks... I should have mentioned it in the tutorial... :)

      Delete
  6. I'm still not tired to say it: awesome as usual!

    ReplyDelete
  7. Could you make a tutorial on game backgrounds?

    ReplyDelete
  8. Could you give some clarification on Step 5? I'm not sure how to move the nodes into alignment to form the sides of the cube.

    ReplyDelete
    Replies
    1. I added a section to the tutorial... Thanks for pointing it out.

      Delete
    2. I'm still completely lost. So I duplicate the square, then select "Edit paths by node" but then what? Would it be possible to get a step-by-step for exactly how you do this? Thanks!

      Delete
    3. I'm pretty sure he means:
      1 - Duplicate the Top (Right Click, Duplicate or Ctrl+D)
      2 - Convert Object to Patch (Path > Object to Path or Shift + Ctrl + C)
      3 - Using the 'Edit paths by nodes' (F2):
      4 - Drag the corner from the top-centre to the bottom-left and the top-right to the bottom-centre
      5 - Repeat for the opposite side - you should be able to get the picture?

      Delete
  9. Great tutorial! Waiting for next ones on isometric art.

    ReplyDelete
  10. i love this tutorial, u are great!!!!

    ReplyDelete
  11. Awesome. I love the isometric tiles, it is really something that works will in a tile based game. Have you put any thought into making a tutorial for characters that are done in the isometric style? Like your caveman or pig model where it is broken up into pieces.

    Me and some friends spent ages looking around for something like your website, it is oddly hard to find a vector based 2D art page where you can look and see how it would work/look as well as pick up some sprites to be able to utilize within a project until you can pay an artist to do custom stuff for you.

    Thanks

    ReplyDelete
  12. Im so stuck :( I've turned on snapping put it still wont let me move into the places you describe

    ReplyDelete
  13. I love this tutorial! this tutorial is awesome! Maybe you have plan to create tutorial how to create isometric characters?

    ReplyDelete
  14. Would love a tut on iso character creation.

    ReplyDelete
  15. Bad angle for isometric cubes.
    Best practices is using 26.565°.

    ReplyDelete
    Replies
    1. 26.565° doesn't (really) apply to vector art, it's to get a smooth line when pixelating isometric cubes...

      Delete
  16. I seriously love your blog.. Excellent colors & theme.
    Did you build this site yourself? Please reply back as I’m attempting to create my own site
    and would love to know where you got this from or just what the theme is called.
    Cheers!

    my blog; jogos de fazenda

    ReplyDelete
  17. Is there any chance you could do one with isometric characters?

    ReplyDelete
  18. How did you make the dirt block? and combine it with the grass block in step 6?
    I can't seem to get it, did you duplicate the grass block and change the copy to a dirt block? i tried it but it only stretch the original block.

    Awesome tutorial btw.

    ReplyDelete
    Replies
    1. Yes... I duplicared the shape and moved the nodes upwards to the midpoints of the first object ( sorry for forgetting about that step ). I added it to the list of 'fixes' to the tutorials that I hope to find time for in the very near future.

      Delete
  19. Nice work, but I don't understand middle picture, how I can get cube edge how it shows in middle picture....

    ReplyDelete
    Replies
    1. I added another panel. I didn't explain it too well in the 1st version.

      Delete
  20. I had make it in my own version. But it always looks weird

    ReplyDelete
  21. What software are you using for this ? Thanks for your guide! Now, after four years of practice i am creating great images for www.cannypic.com. And i started because i wanted to create graphic for games after reading your blog.

    ReplyDelete
    Replies
    1. I am using inkscape for the tutorials. The workflow is very similar in other tools like Adobe Illustrator or CorelDraw though.

      Delete
  22. Hi Chris! I'm a big fan of your work and I've learned so much through your tutorials. Instead of using two shapes and joining the nodes, are there any advantages/disadvantages to using a hexagon and Path+Difference to create a similar cube?

    ReplyDelete
    Replies
    1. I just found out the angle from using your method is closer to 25.65 degrees, using the hexagon is 30 degrees. Which is better? Also, how much should I move the second shape down in order to create a perfect cube?

      Delete
    2. Ultimately it will depend on your game engine. There are 'standards' and m sample didn't stick to it. I just wanted to show the workflow of creating isometric style art in inkscape.

      Delete