Tile transitions

After reading http://www.gamedev.net/reference/articles/article934.asp i was utterly confused. I knew what I had to do; just not how to do it.

The answer was in this picture:

From the above article it states that each in order has an equivalent binary value. IE the first one is 0(blank), 1, 2, 3, and so on up to 15. But because we want to store all these in a single byte, the second row starts at 0(blank) and goes up by 16. IE 0,16,32,48,64...etc

Now that we know this, we know that each tile can have a single byte that represents its transition overlays. When we create a new tile type, we add to the 8 surrounding tiles to create their transition value. What do we add? Well, by drawing a 3x3 grid on a piece of paper I started with 0 in the middle - a blank tile. Starting in the upper left I checked each against the list in the picture above. So the corresponding upper left tile in the list above is row 2 tile 4 (starting at 0) . Because its on the second row, and we're storing it all in one byte, we shift the value left 4 bits.

So going through each one starting at the upper left, moving across to middle top, upper right, etc, we get 64,8,128,1,16,2,32 and 4.

Now when we place down our tile, we add those values to the surrounding tiles' existing transition values.

How to draw the transitions

We have a transition value for each tile created by going through the base tile type and adding to the transition value as above.

The general algorithm for each tile is as follows: 1. We do the corner layer first. Take the transition value and shift it right 4 bits. This lets us only work with the upper 4 bits. ie T = T>>4

2. From the list of corner tile overlays, look up the corresponding T value and draw the tile.

3. After placing all the corner layer, move on to the transition value for the sides layer. Instead of shifting right 4 bits, we want to AND the value with 15 (binary 00001111) to give us only the lower 4 bits. ie T = T&15

4. From the list of side tile overlays, look up the corresponding T value and draw this layer over the previous. It is important to draw the side layer second because in cases where a tile would use both corner and sides, we dont want corner pieces to be drawn on top of side pieces.

And thats it, really. What if you have more than two tile types (ie something other than just grass and water)? Well, all you need to do is have a T value for each different type of transition. IE a T value for Water to Grass, a T Value for Hill to Grass, etc. You only need a one transition of each direction for each tile type. That is, you dont need a type for Hill to Water, because Grass takes precendence over Water and Hill over Grass. The images in the tutorial that I mentioned earlier explain it pretty well.