Ahh, the evil tile problem ;p

I dunno about rendering of tiles, but let me tell u my story of woe.

I had huge problems with making decent looking isometric tiles.. drawing them in Adobe and trying to get the edge pixels to blend with each other was a nightmare. So i thought to me self. Self, how about making a square pixel that blends with itself, rotate it by 45 degrees and half the height. Damnit self, thats a brilliant idea. So i tried that... and yet, shock and horror, the evil which is the anti-alias began to plague my tile development process, everytime i rotated a piece, that semi-transparent fuzz would appear around the tile, completely buggering up the blend. I then proceeded to slap Self around a lot.

Self managed to convince me not to castrate him, provided that he find me a more workable solution. Self launched himself onto the web, looking at anything and everything to do with generating isometric tiles, eventually he wandered upon this site, in which the dude talked about how he made a generater which converted square tiles into isometric. The next two hours involved a pixel by pixel analysis of the pictures he'd presented to figure out exactly how he'd done it. Self came to the conclusion that the tiles are generated as follows:

One line on an isometric tile (say the like from middle left to middle right) consists of two lines on the square. So we have something like this :

0,1,0,3,2,1
2,3,2,0,1,3
5,3,6,2,9,1
6,2,7,3,1,0
8,4,1,5,3,6
2,4,1,0,3,2

Being converted like this :
....................1,3.1,0
................2,1.9,1.6,2
............3,0.2,3.3,3....
.......0,2.6,7.5,0.........
....1,3.3,2.1,1............
0,2.5,6.4,4................
....8,2....................

etc, etc, i'm not gonna finish that diagram, its a tad big
So what you're doing, is starting at the center of the Y, and placing two pixels across (Y:0 and Y:1 on the square tile), then moving up one and across two, then plotting two more. At the end of each line, increase the Y.

The algorithm took me a while to get right, but once done, i had a program which converted a square into isometric. However, the squares looked a little bit horrible due to the way the conversion is done, this is unavoidable. However, with a simple horizontal smooth, the problem was corrected. My editor took me about a week and a half to get working perfectly, it now generates tiles and a height transition from three square tiles (one for the isometric tile and one for each side of the height transition)

So we end up with these :
............----............
........----....----........
....----............----....
----....................----
....----............----....
........----....----........
............----............
and

----....................----
|...----............----...|
|.......----....----.......|
|...........----...........|
----....................----
....----............----....
........----....----........
............----............

Sure, coding your own editor for this may seem a little overkill, but i found that getting the tiles generated to the EXACT shape i wanted was pretty much impossible, there was always one bit of the tile where the side was a bit messed up. So, the main advantage of this is you get a pixel accurate tile, and you can work with squares which are a lot easier to create.

Alternatively, try a 3d tool of some sort, i dont have much experience with them, i leave that to the actual artists.

Note to Gamedev admins: If you'd like me to put this up as an article for the site, i'll be happy to fix it up and give more detailed descriptions, perhaps put in some images too. Just let me know. I had huge problems finding out how to do this, i found nothing on the web that told me how to do it.


[edited by - Evil_Toaster on March 25, 2002 2:19:50 PM]

[edited by - Evil_Toaster on March 25, 2002 2:23:19 PM]

well, if you want a shortcut I''ve got a bunch of free tiles available, anyones welcome to use as long as we get some credit.

www.zero-sum.com/tiles.zip

cheers,
-m

mat williams
Lead Programmer, Designer
Zero Sum Software
www.zero-sum.com