Isometric Tiles

Adam Hoult
Copyright Jan 17, 2000

URL: http://www.vbgamer.com/tutorial.asp?ndx=30

Page 1 This article is designed to show you guys how to create isometric tiles, without having to go through the hassle of importing into a 3d editor, rotating with no FOV, saving, and getting to the EXACT size that you want it to be. I have tried this method myself and it is really a nightmare when you want to create 600 tiles =).

Hopefully using the methods outlined below you will be able to write a program to convert your simple top down textures into isometric tiles in one go. You will find a fairly useful program here which I wrote to accompany this article, which does what I will be discussing.

Right, so down to the nitty gritty. First I will just explain exactly how to rotate the tiles to their final destination (floor tiles first), so that you can understand the theory. Now there is no complex 3d calculations involved, no messing with polygons or texturemaps. This is simple pixel movement, easy !!.

So first for this example i will take one 32x32 (fyi: for this method to work, your tiles MUST have a width and a height which is an EVEN number, they do not have to be square tiles, but if you are planning to use walls too, then for them to fit together properly it is best to).

Now to the first element to the rotation, we need to do whats called shearing at a 45 Degree angle. To do this, it is a simple as moving each ROW of pixels along by an amount which increments by one each time. We do this from the bottom up so that fig 1. ends up like fig 2. (these images are blown up so you can see it better.)


Image    
Image
 Figure 1.
 Figure 2.


This may seem quite difficult, but it is actually very easy to do. All you need to do this step is two picture boxes, one which you load your topdown image into, and one blank one. For now we will set Picture1 to Autosize so that it automatically fits the image that we loaded in. Here is a small snippet of code which basically shows this method in work. FYI: In this step, you will need to set the size of Picture2 to be (TileWidth + TileHeight) wide, wheras the height will remain the same as the original. Make sure for this to work that all your scalemodes throught the entire project are set to PIXEL (3) and that you have no borders around the key pictures.

  1. Dim TileWidth as Long, TileHeight as Long, xX as Long, yY as Long
  2. Picture1.Picture = LoadPicture(app.path & "My If .Bmp")  
  3. TileWidth = Picture1.ScaleWidth  
  4. TileHeight = Picture1.ScaleHeight  
  5. Picture2.Width = TileWidth + TileHeight  
  6. Picture2.Height = TileHeight  
  7. For yY = 0 to TileHeight - 1  
  8.   For xX = 0 to TileWidth - 1  
  9.     SetPixel Picture2.hDC, xX + (TileHeight - yY) - 1, yY _  
  10.     , GetPixel(Picture1.hDC, xX, yY)  
  11.   Next xX  
  12. Next yY  
  13. Picture2.Refresh


Thats it, thats as hard as it gets. Now for step two where fig 2. becomes fig 2. This is a little bit harder than the first step, and requires a 3rd picturebox (this could all be done in one step with only 2 pictureboxes but do demonstrate it more easily we are doing it in two steps.). Now what we will do, is to shear the resulting image again, this time we will shear it by 26.5 degrees on the Vertical (which makes everything fit together). To do this we simply move every other COLUMN down by an incrememnting value. For this the third picture box will need to be (Tilewidth + Tileheight) wide AND high. This is what the resulting image Should look like, and the simple but effective code to achieve it. (Note after it has been converted there will be large gaps above and below which we will trim off later.)


 Image
 Figure 3.

  1. Picture3.Width = TileWidth + TileHeight  
  2. Picture3.Height = TileHeight + TileWidth  
  3. Dim Counter as Long
  4. Counter = 0  
  5. For xX= 0 to (TileWidth + TileHeight) - 1  
  6.   'Here we incrememnt the counter by 1 for every other column.  
  7.   If xX Mod 2 = 1 Then Counter = Counter + 1  
  8.   For yY = 0 to TileHeight - 1  
  9.     SetPixel Picture3.hDC, xX, yY + Counter,GetPixel(Picture2.hDC, xX, yY)  
  10.   Next yY  
  11. Next xX  
  12. Picture3.Refresh


That wasn't so hard =) Now we simply trim off the top/bottom gap into another picture box (or the 1st one if you wish, making sure to resize the picture box first), using this simply BitBlt routine.

  1. Picture4.Width = TileWidth + TileHeight  
  2. Picture4.Height = (TileWidth + TileHeight) / 2  
  3. BitBlt Picture4.hDC, 0, 0, TileWidth + TileHeight, TileHeight _  
  4.   + (TileHeight / 2), Picture3.hDC, 0, TileHeight / 2, vbSrcCopy  


All Done. You can modify this code to convert batch blocks of tiles as you wish (shown in the IsoRotate Program here.) To create your tiles (and with a little modification, walls too).

Hope this helps you in your quest to create better games =)