Theory and documentation

Version history and plans





SourceForge homepage Logo

Last updated: 2004-03-23

Drawing isometric maps

There are many good tutorials on the net for drawing isometric maps, the one Haphazard is based on is that was found on the isometrix project.

Now, the acute reader will notice the based on above, now what changes have we made? And why?

Basically, we've changed the drawing routine to get a better overlook of the code and perhaps made it faster. Now, if you've read up on your isometric drawing, you'll know that we draw in rows. How many rows do we need to draw totally?

    Number_of_rows = Number_of_X_tiles + Number_of_Y_tiles - 1;
Why? Well, first we go down right adding one row for each x, then we need to go down left from there adding one row for each y. Then we compensate for the middle row that is counted twice.

OK, now we know how many rows to draw, which tile starts each row?

    TileX = max(row - (Number_of_Y_tiles - 1), 0);
    TileY = min(row, Number_of_Y_tiles - 1);
Why? Well, either we are going down left and then the x will be 0, when we have done drawing all Y tiles we need to start increasing x by one for each row. That's why the TileX algorithm looks like it does. For Y it's the opposite, we will need to increase Y by one until we reach the point where to start increasing X, then Y should be fixed.

Now we need to figure out how many tiles to draw, we know that we should increase x by one and decrease y by one for each tile drawn. When do we stop?

    TileX <= min(row, Number_of_X_Tiles - 1) &&
    TileY >= max(row-(Number_of_X_Tiles - 1), 0)
This is basically just the opposite of how to figure out which tile to start drawing on.

So that's basically it, these few algorithms gives us the code (in Java):

    for (int row = 0; row < mArray.length + mArray[0].length - 1; row++)
      int x = Math.max(row - (mArray[0].length - 1), 0);
      int y = Math.min(row, mArray[0].length - 1);

      while (x <= Math.min(row, mArray.length - 1) &&
      y >= Math.max(row-(mArray.length - 1), 0))
        //draw tile
        Tile tile = mArray[x][y];

        // Go to next tile

        // Increase screen coordinate for next tile

      // Reset current screen coordinate to next row
      // Use start criteria for x and y to figure out screen coordinate
      currentScreenCoordinate.x = screenCoordinate.x +
       (Math.max(row+1-(mArray[0].length-1), 0) - Math.min(row+1, mArray[0].length-1)) * halfTileWidth;

Drawing isometric maps have never been easier *grin*.