Tile Maps and how to draw them.

In the last post I covered what tile maps are and why we use them.

This time I will talk about how to draw tile maps.

For the Computer a tile map is just one long line of information, once in a while the may is a symbol that indicates that one row is over and the next one begins. It hold no real information on how to draw the whole thing.

Not only that, but also are there may ways how a tile map can look like. There can be square shaped tiles, there can be hexagon shaped tiles and I once even heard of things like circles and what not.

For simplicity I will cover here only the two main forms: square and hexagon.

Orthogonal Grid (Square Tiles):

A orthogonal grid is rather simple: you got X columns and Y rows. X is traditionally the left to right coordinate, and left the the top-down coordinate. Note that normally the position 0/0 is normally at the top-left and X/Y at the bottom-right. But when you program your own code yo are of course free to change the coordination-system as you please.

Beside the coordinates you also need the width of your square and the width and height if you use rectangles as tiles.

And in the end there is one last thing to consider before you draw your grid: When to draw what?

If you draw a simple 2D background you can skip this part, but imagine you want to draw a 2D Top-Down-View Level with some bushes. Some of them are in front of the player-character and some are behind. It would look stupid if your character stands on top of a bush that he is supposed to be behind. So you not only have to change the Grid-Drawing code a little, but you also have to place the drawing code of the character and enemies in that same code.

Here is my solution:

//X and Y being the dimensions of the Grid.

for (int y = 0; y < Y; y++)

{

//If the Y-Coordinate of a dynamic object (like the player) is smaller than y*height,

// and it has not been drawn yet, draw it here.

for (int x = 0; x < X; x++)

{

//Look up if there is a tile on that position

//Look if the tile actually exists in your Content/Asset Dictionary

//If yes, draw it at Position(x*width, y*height), else continue

}

//Alternative to drawing the dynamic object before you draw the current row,

//you can also check here if they are behind the next row ((y+1)*height) and draw them.

}

//If a object was not drawn in the loops and is on screen, draw it here.

Now that was the easy kind of a tile map, now lets make the more complicated kind.

Hexagonal Grid:

Unlike squares and rectangles, hexagons can have many different shapes and arrangements, but for the simple cause of lack of time I will only cover the normal uniform hexagons.

Basically I use the same Grids like orthogonal grids, but I shift every second row (or column).

What you can also see is that the placement of the tile depend on the orientation of the tiles. I will not go into too much detail here, as it is rather simple geometrics in the end, but I will say that you always should know how you Coordination system looks like and what you width and height is.

//In Code:

The code is similar to the orthogonal code, so I will leave some parts out so you can clearly see what makes the hexagonal code unique. Note: This code is the left grid arrangement of the picture above.

for (int y = 0; y < Y; y++)

{

for (int x = 0; x < X; x++)

{

//Every second column we have to shift the tile H/2 down.

//The other arrangement is the same, you only have to switch the multiplication of

//the width with the multiplication of the height (but not the values themself ;) )

if (x % 2 = 0)

Position(width * 0.75 * x, (height / 2) + (height * y));

else

Position(width * 0.75 * x, -(height * y));

}

}