Converting 2D images to isometric view
( Upadated February 16th, 2004 )
Part 1 - Basic geometry / Part 2 - Advance geometry / Part 3 - The circle
This time our aim is to convert a "flat" image to an isometric view. This first part of the tutorial will be introductory with basic shapes like rectangles and triangles..
We will be using for this tutorial MS Pain and Paint Shop Pro to use the "Skew" command.
Step by step guide...
First create a common flat rectangle (1). Use the Skew (2) command on it with a 26.565 angle (this command is available in Paint Shop Pro and in Photoshop). O.k., now our rectangle is in an isometric view but it is still lacking volume. Draw a line from one vertex (in an isometric view) to determine the depth we want to add to the object (3). Now just copy the rectangle at the end of this line (NOTE: remember the line must be in one of the isometric view angles) (4) and just finish it up with lines connecting vertex to vertex for the two rectangels and delete those lines that should be hidden (5). Last thing to do is paint our isometric rectangular block (6).
As you can check, Skew at this angle moves our graphic 1 pixel vertically every 2 horizontal pixels advance, this same effect can be done manually but sure Skew is a faster solution.
The Skew transform can be applied easilly to any other geometric shapes or to any image...:
For a triangle we will be doing this:
After this first part in the tutorial you might consider this technique easy or difficutl, but surely not too useful... nobody will be using solid basic blocks to work out game graphics. Just to show you out the power behind this basic concept, and using our triangle from the previous sample, we can work this out:
O.k., that's all, hope you found this tutorial interesting and that you can use this technique plenty on your images.
End of the tutorial
---------------------------------------------------------------------------------------------------------------
- - - -- --- NOTES --- -- - - -
Note 1:
TUTORIAL TRANSLATED BY SLAINTE