AuthorTopic: Isometrics (Pixipedia)  (Read 11256 times)

Offline Peppermint Pig

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
    • View Profile

Isometrics (Pixipedia)

on: October 10, 2005, 05:52:32 pm
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.
« Last Edit: October 10, 2005, 05:57:15 pm by Peppermint Pig »

Offline Sawtooth

  • 0001
  • *
  • Posts: 95
  • Karma: +0/-0
  • growin' a beard
    • View Profile

Re: Isometrics (Pixipedia)

Reply #1 on: October 10, 2005, 09:09:40 pm
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?
rip ninjalicious

Offline Peppermint Pig

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
    • View Profile

Re: Isometrics (Pixipedia)

Reply #2 on: October 10, 2005, 11:02:16 pm
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.

Offline miascugh

  • 0010
  • *
  • Posts: 361
  • Karma: +0/-0
  • Schnitzelfiend
    • View Profile

Re: Isometrics (Pixipedia)

Reply #3 on: October 12, 2005, 07:12:02 pm
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

Offline Peppermint Pig

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
    • View Profile

Re: Isometrics (Pixipedia)

Reply #4 on: October 12, 2005, 07:48:36 pm
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.

Offline miascugh

  • 0010
  • *
  • Posts: 361
  • Karma: +0/-0
  • Schnitzelfiend
    • View Profile

Re: Isometrics (Pixipedia)

Reply #5 on: October 12, 2005, 08:12:39 pm
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

Offline miascugh

  • 0010
  • *
  • Posts: 361
  • Karma: +0/-0
  • Schnitzelfiend
    • View Profile

Re: Isometrics (Pixipedia)

Reply #6 on: October 14, 2005, 04:57:44 pm
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

Offline Akira

  • 0010
  • *
  • Posts: 334
  • Karma: +0/-0
  • Heheheh
    • View Profile

Re: Isometrics (Pixipedia)

Reply #7 on: October 15, 2005, 12:03:55 am
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.
thanks Dogmeat!

Offline G_Dragon

  • 0001
  • *
  • Posts: 54
  • Karma: +0/-0
    • View Profile

Re: Isometrics (Pixipedia)

Reply #8 on: October 17, 2005, 10:43:24 pm
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 :P

Offline AlexHW

  • 0100
  • ***
  • Posts: 1037
  • Karma: +0/-0
    • View Profile
    • AlexHW

Re: Isometrics (Pixipedia)

Reply #9 on: October 17, 2005, 11:01:11 pm
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.

Offline Zoggles

  • 0001
  • *
  • Posts: 85
  • Karma: +0/-0
  • Conjuring stuff
    • View Profile
    • Mini Wizard Studios

Re: Isometrics (Pixipedia)

Reply #10 on: October 19, 2005, 07:37:21 am
What those maths figures were in relation to in the tutorial was to simply point out a slight difference between hand drawn (or CAD isometrics for engineering/architecture) and pixel art isometrics where aesthetics are more important than the mathematical accuracy.

The actual percentage, or decimal point ratios are really irrelevant other than to point out the fact that they are nasty to look at. Isometrics, you work on a 2 across, 1 up/down. In pixel art you should never be looking to use a 'rotate' or 'skew' function anyway. Therefore the actual percentage is pretty irrelevant.

The 26.565 is simple math. Tan x = 1/2 therefore x = 26.565.
The second figure i calculated in the tutorial was indeed for keeping the 'depth aspect' in mind, and that is the figure the image would need to be squashed by horizontally before skewing it by 26.565 degrees.

Anyhow.. as I mentioned. The figures themselves (even though I still claim my maths is sound) are pretty irrelevant to anyone doing isometric pixel art.

As for the reason for 30degrees on traditional isometrics.. it has nothing to do with viewing the ground from (I can only assume an estimated angle of 45degrees), but far more to do with equilateral triangles. There is 60degrees between each axis when viewed two-dimensionally.

-Z-

Sorry if I don't seem to ever comment on your posts, but anything hosted on imageshack or most image hosting web sites is blocked from China. If I can't see it I can't therefore comment on it :(

Offline miascugh

  • 0010
  • *
  • Posts: 361
  • Karma: +0/-0
  • Schnitzelfiend
    • View Profile

Re: Isometrics (Pixipedia)

Reply #11 on: October 19, 2005, 04:28:15 pm
i was just trying to go into the essentials of this most common isometric view we get to see in pixel art. again, the 30° are not referring to the 2run-1rise-line, that of course are 26,565° and that's what i said above, nor to the traditional equilateral iso-grid. the 30° make up the angle which the ground is viewed at, this can easily be verifiied with simple trigonometry. and about the percentage of the width, zoggles' math is right i'm sure, but there's a little mistake in the approach, a tiny error in reasoning (the circle in truth would have to be an ellipse, because it's 'lying' on the ground; the line of 2 is rotated around the z-axis, thus the rules of distortion apply to the circle that would be created through the rotation as well).
heh, i'm aware, though, that this doesn't matter much the actual act of making isometric pixels, i have never applied those ratios myself consciously. this figures can be used if you want to incorporate a picture or such really hard and are anal about it :).

Offline Peppermint Pig

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
    • View Profile

Re: Isometrics (Pixipedia)

Reply #12 on: October 19, 2005, 06:00:28 pm
Yeah.. the correction Miascugh made was a simple one as for how you drew the arc on an example graphic.

And my issue with your tutorials, Zoggles, is only that you had confusing examples between showing individual cubes to demonstrate style B, and then your example of drawing and plotting a grid in B. There, you offset the isometrically angled lines by 1 pixel between the different examples. It's not wrong to do this in freeform, but it was confusing when I overlayed the two to verify things were not the same. :P

Offline pixelblink

  • 0010
  • *
  • Posts: 144
  • Karma: +0/-0
    • View Profile
    • pixeljoint

Re: Isometrics (Pixipedia)

Reply #13 on: October 19, 2005, 11:45:31 pm
Anyhow.. as I mentioned. The figures themselves (even though I still claim my maths is sound) are pretty irrelevant to anyone doing isometric pixel art.

Thank you for saying that. I really can't see what math has to do with art. Art is about the estethics. There's certainly alot more to discuss about iso than this guys!

On another note, where the heck have you been Zoggles? MIA since how long ago?

Offline Zoggles

  • 0001
  • *
  • Posts: 85
  • Karma: +0/-0
  • Conjuring stuff
    • View Profile
    • Mini Wizard Studios

Re: Isometrics (Pixipedia)

Reply #14 on: October 20, 2005, 03:03:58 am
Ah.. ok, I think I see what you are on about Miascugh, taking a surface and distorting/skewing it fit on an isometric plane. Maybe my tutorial wasnt quite clear about the intention of that bit, but it came into the tutorial as there had been a discussion on Pixelation about skewing a 2d (platform view) surface to make an isometric one.. then flipping it horizontally for the other wall. I was simply trying to point out a difference in the sizes demonstrating the reduction in width of the surface if it were to be translated to the iso surface. In this case, the arc is a shallow ellipse, where the vertical radius is 1 and the horizontal, 2. You are rotating within Iso, not rotating in 3d to apply to iso. This is simply because of the aforementioned discussion about quickly painting textures on iso walls etc

If you were skewing a surface to fit into an isometric world, you would have to scale the height of the surface as well as the width and yes, the math would be quite different, although you could still do it in two stages. First skewing the height, and then following the bit I gave for the width.

As for the the 'grid in B' differing from the cube in B - ah.. I see what you mean. (I think) On the cubes, the top face's highlight is 1px too high compared to the grid type constructions following.

Reasons? well.. I tend to only offset that highlight if I'm actually using a tile engine or grid. If its just an object/item in iso, I would probably use the cube style. However, as soon as you start tiling or using a grid, you need to offset that line.

I do really need to do a part two to that tutorial at some point soon, elaborating on some areas a bit.

Type C is very similar to type B, but the main criticism I have to that is the lower edge of each tile. Being a flat 4 across, it means that corners all appear much rounder. Wonder if there's a decent option D

-Z-

PixelBlink: have been, and still am, out in China. Yeah MIA for quite a while. Taken me quite a while to find where everyone moved to, and seems like all the good ol' faces and 'lasts from the past's (greetings Blu_monkee) have found there way here.

Sorry if I don't seem to ever comment on your posts, but anything hosted on imageshack or most image hosting web sites is blocked from China. If I can't see it I can't therefore comment on it :(

Offline Peppermint Pig

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
    • View Profile

Re: Isometrics (Pixipedia)

Reply #15 on: November 08, 2005, 03:25:41 pm
Just a brief update:   http://www.wayofthepixel.net/pixelation/pixipedia/index.php?title=Isometric

Images in.. need someone to add the mathematics. (go ahead and externally link the images, I'll move them into direct hosting later)

Going to start working on sprites and some other iso basics next.

Offline FaeryShivers

  • 0001
  • *
  • Posts: 64
  • Karma: +0/-0
    • View Profile
    • Happy Ufo Studios

Re: Isometrics (Pixipedia)

Reply #16 on: November 10, 2005, 09:20:25 pm
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?

I've just started getting back into isometrics and honestly so far I'm liking C the best. As pep says it seems
to work better for designing game tiles. I've tried using all 3 methods and so far C's worked out the best for me
all around. In regards to patience, yes in some cases it requires more, but depth seems to flow out more easily in isometric
with less shading etc required.



On another note my start in pixel art (how lame ..that rhymed) really began in isometric. However, I started shying away from it for the longest time due to my lack of skill in "organic" looking isometric pieces (people, trees etc) sometimes you get too wrapped up
with the methods in isometric that you forget to experiment and everything just ends up looking like crude geometric
shapes slapped together. I've picked up ISO once again and I'm starting to like it more than I ever thought I would o_o
Looking over the examples I found with peppy (See "spriting isometric) has really got me interested, and it couldn't be at a better time as I think I'm going to try to move into the browser game genre as well.