Isometrics (Pixipedia)

[Peppermint Pig]

I've been working on some material for an isometric topic over at the Pixipedia Wiki. C+C is welcome, though this is posted in the General section for a reason. I would greatly appreciate any help with adding information here that will go into the page. While Zoggles' Isometric Tutorial pages are a great place to gather information from, his data is not thorough enough, and he makes a few mistakes on some of his examples. RhysD also did a decent tutorial, but it's also incomplete and has some mistakes in it. So please, any and all iso related information is needed.

Method A (Odd):


Method B (Offset):


Method C (Joint):


Kitchen in B:


We need examples of the other isometric methods, as well as the mathematical details for common and less common iso methods, including scaling percentages for the skewing of photographs to be used as guides.

[Sawtooth]

I've never been one for isometric art (it requires patience and technicality that I simply don't have), so I'll keep this really short.

Is there any other reason why someone would use a method other than B?

[Peppermint Pig]

Ahh! Questions are welcome, too! I find it easier to explain something once asked

A rundown on the methods:

Method A, as Zoggles states, allows one to have evenly sized facets (sides) AND the use of a centered 1px line. The only drawback is that one must break any opportunity for tiling under this system. So it is ideal for individual works with no intent to use them in a grid.

Method B does allow for equal facet size, however that would require you use a 2px wide outline, so 'normally' one must draw slightly left, or slightly right of center, so you would not get even facets with 1px vertical dividing outlines. Alternatively, you could simply have no vertical outline, thus you would once again have equal facets (which can be a rather attractive method for doing iso). In some of the work I have seen, including a work by RhysD, 3 pixel-wide elements were included in order to get A style vertices in a B style work.

Method C has some strengths over B, and vice versa, which seems to be the main question you're raising. With method C, the root of design is centered around the use of joints, which is key in creating tiles for games. These 2x4 sized blocks make it easier to duplicate and align to the framework as you drag things along. Also, this joint method allows for extremely fast zig-zag line snapping that is slightly more accurate and efficient compared to method B. Furthermore, method C is much more able to cope with 'outlining' problems than B. FFT-A used this method, though maps were not as modular as something done with method B

As Zoggles points out in his tutorial, the Offset (B) method is somewhat restricted in the placement of outlines (usually located at the top), and you may encounter some issues when trying to create cubes then going back and working from a pattern filled grid (sometimes the angled lines inside your cube would be 'offset' by half a step). On the bright side, B is much more straightforward than C. A and B are very good for the pixel art novice to learn from. Method B is very liberating and allows for quick freeforming.

If we disregard the outline placement issues, methods B and C are actually separate but equal styles. I think it has more to do with how you're rendering them for software in the form of tiles.

[miascugh]

ok, i've got a little info on how to transfer photos/textures etc into correct iso:

the angle iso is viewed at is 30°, with this and a little trigonometrie you can easily get the correct ratio

(heh, zoom in if you really care, the upper one is the vertical projection of the iso one below) anyways, if you want your picture to be in correct (2:1 ratio-)isometric view, you first have to shrink it to approx. 86,6% heightwise and then about 65,47% widthwise (i hope i did the maths right on that one), then skew it corretcly
i don't have time at the moment to go into it some more, but i hope it is of some use still

[Peppermint Pig]

Miascugh, please check Zoggles page to confirm your math:

http://www.zoggles.co.uk/asp/tutorials.asp?tut=1


Specifically, these two pages are useful:

http://www.zoggles.co.uk/asp/tutorials.asp?tut=1&page=1

http://www.zoggles.co.uk/asp/tutorials.asp?tut=1&page=5

Zoggles determines 89.433% for image scaling and 26.565 degrees for the angle, as opposed to 30.

[miascugh]

i think i've found a mistake in zoggles tut concerning the percentage, and i'll ellaborate on the 30° too, but i have no time at all right now. i'll get to it asap

[miascugh]

ok, about the 30 degrees, for the common pc-iso perspective 30° is the angle between the 'view ray' and the groundplane, which, looking at a line (running along in the groundplane at an angle of 45°), creates the notorious 26,565°-lines that make up your iso-grid and when looking at a square you get a 2:1 ratio rectangle (see below, sorry for the size -_-*. i guess the setting-windows aren't too hard too decipher despite the evul german).


there indeed is a mistake in zoggles explanation, i got my 65,47% backed by the cad-program now too:
this by zoggles should actually either look like this or this

i hope that's a somewhat acceptable answer post, i'm quite drained still from the past week, so i don't really feel like writing much

[Akira]

Uhh could there be a seperate topic for this more advanced iso on the wiki? You wouldn't want to freak out people who are just starting with the mathmatical side of things but you would want to keep this stuff for the people who want to convert to iso or make more correct/advanced pieces.

[G_Dragon]

I think Zog's math is right though. Using simple trig, you can get 26.565.

Starting with what we know. We know the horizontal and vertical of the triangle (1/2, rise/run), which is 0.5.
Then we use some trig (yay!). We are trying to figure out the hypotenuse, and we have the opposite and adjacent. Now, we try to find which trig function we need to use. SOH, CAH, TOA. Sine=Opposite/Hypotenuse, Cosine=Adjacent/Hypotenuse, Tangent=Opposite/Adjacent. Since we don't know the Hypotenuse, we use the Tangent=Opposite/Adjacent. So, tan x=y/z, tan x=0.5, x=26.565. Also, if you plug in 27 into microsoft paint while skewing an image (Using the vertical skew), it'll give you a perfect iso line.

If my math is wrong, then please tell me

[AlexHW]

yeah, but Zoggles doesn't keep in mind the depth aspect..

a simple picture is 2d, such as a painting.
now if you want to translate it into an isometric world which imitates depth, you need to keep in mind how the painting would tilt, and based upon the tilting into the z-axis, you figure the amount it needs to be shrunk in it's x and y dimensions.