*null

Hello all! My name is Ray..and today I want to talk about creating isometric things…like engines, editors, and maps. Mostly maps, but these concepts apply to all three. OK, here goes!

I must say that I am by no means an expert on this topic, but I had the opportunity to design and develop the engine and editor for a small game called TMNT Tactics a few months back. It was both fun and challenging. If you are reading this and are looking for an intro and bit of a walk-through for creating an isometric game, then you came to the right place! With that said, this post will assume that you are at least familiar with how a regular rectangle-based tile map might be laid out.

In the post I will go over the concepts and perhaps some pseudocode/code for rendering, scrolling, and mouse picking. So, first off, I should probably define what isometric is…wiki has a decent technical explanation. I am a big fan of simplicity, especially at the start. So to that end, as far as I’m concerned here, isometric simply means the following:

• A 2D grid of diamond-shaped tiles
• Tiles can be of various dimensions, although they are  generally around twice as wide as they are tall

  

  Left: Tile whose width is twice its height.  Right: 64×45 isometric tile adds “height”

• It looks 3D, but looks are deceiving..

The first thing to decide is which type of isometric map you want to do. There are three types that I know of: Diamond, Staggered, and Slide. For the TMNT Tactics game, we did the classic Final Fantasy Tactics look, which is a Diamond map (although FF Tactics is actually 3D). I am currently working on a game that will incorporate the Staggered type map, which is very useful for simulating a round world. You can check it out here (the wrapping is not implemented yet), in all of its rawness… I will go over the Staggered map in this post. If you are interested in one of the other types, a very helpful book is listed at the bottom which goes over all three.

For a quick review, I have a sample isometric tileset to explain how the tileset works (which is really no different than using rectangular tiles). The only thing to note is that we now need to specify a color to be alpha’d out, so that when rendering, we only see the actual tile. One of the major differences with isometric is that you must render these tiles in a different manner than you would with rectangular tiles. Let’s talk about that…

Rendering

If you notice, for the staggered map, we have two different types of rows, one that’s indented to start, and one that’s not. You could start with whichever one you wanted, I chose to start without indenting. In order to make these rows and tiles fit together properly, you simply offset the odd rows’ x position by half the width of a tile and the y position by half the height. Here’s some pseudocode mixed with some actual code for rendering, taking into account scrolling and clipping, starting at the top left corner of the screen (0,0):

// could be 2D or 1D array, if 1D, use conversion: index = y * numColumns + x
Tile tiles[..];
For each row y
For each column x
{
    pt.x  = x*tileWidth - xScrollAmount;
    pt.y = y*tileHeight - yScrollAmount;
    if (pt.x < -(tileWidth*2))
      go to next tile...
    else if (pt.x > screenWidth || pt.y > screenHeight
|| pt.y < -(tileHeight*2))
      go to next row...
// to be more efficient, you could make a separate case for pt.y >
// screenHeight and have it quit drawing altogether at this point
    if (y is odd) // or " if (y is even)" if you start to indent
                  // at the first row instead of the second
   {
         pt.x += half tile width;
         pt.y -= half tile height;
   }
     Draw(tiles[index], pt);
}

As you can see, the rendering is quite simple. To illustrate what’s going on here, I made a little picture. It can be a bit confusing to keep track of which column is which when you look at it. To assist in debugging and clarity, it can be very useful to print the row/column values on top of each tile. If you wanted to do a second layer, say for mountains, rivers, or forests on top of the grassland, you just need to make another array for the second layer and draw them right after the first layer in the same loop.

Up next, in Creating Isometric Maps – Part II, I will go over tile selection, which is also referred to as mouse picking. Until then, keep your stick on the ice.

Resources

GameDev.net – an article explaining isometric tiles. And a ton more articles from there as well.
A great site for really good free graphics, including tiles and animations, check out Reiner’s site.
A great reference book: Isometric Game Programming with DirectX 7, a bit dated on the DX version, but the concepts live on.

Ray Johannessen Isometric, Programming 2D, C++, game development, Isometric, rendering, tile engine, tutorial