So we've covered pure AS3, FlashDevelop and the basis of generating a 2D grid of squares/tiles. Seems like it's finally time to cast the isometric spell on this tutorial and move on with part 4 of BAM.
In this part we will be using what we have learnt from part 3 to create our first isometric staggered grid. If you have forgotten what this type of grid is, please skim over part 3 to ensure that you are up to date.
[attachment=147]
So what are the differences between a 2D grid and an isometric staggered grid?
To be able to program an isometric grid effectively, you must first understand the differences to that of a 2D grid...
[attachment=148]
As you should already know from part 3, we used square tiles to build up our grid. This meant that the tile had the same width and height. However, an isometric tile has a separate width and height. For example, if you look at the image above, you can actually see the height of the tile is half that of the width. This understanding will be very useful later when we start programming. So don't forget!
The second difference we can see is that every row is moved down half of the tile's height. So this means if the tile's height is 19, we move each row down 9.5 pixels... which doesn't make sense, does it?
Of course not! However, this is sort of how it works. Yes, we move it down by half of the tile's height, but because we can't move in half-pixels, we need to come up with a way of keeping everything aligned. So to do this, we actually take 1 away from the tile's height, then halve it. So, if we were to use the tile above, we would take 1 away from the height (this gives us a nice even number of 18) and finally, halve it (or divide it by 2) to give us our magic number 9!
So what else do we notice that's different? ...exactly! Every even row (row 2, row 4, row 6 etc) is indented in by half of the tile's width! Now, learning from past experience, you should know it's not that simple, unfortunately Although, it's not that hard to understand. When we halve the width of the tile above, we get an ugly odd number - 19. If you were to indent all your even rows by 19, it wouldn't look pretty:-
[attachment=149]
To fix this, all we need to do is take away 1 from the final value, so instead of 19, it would be 18:-
[attachment=150]
Well done! We've covered all the theory we need to know in order to start creating our first working staggered isometric grid. In the next part we will focus purely on the programming side of things and soon enough you'll have you're own little avatar walking around on your custom built staggered isometric grid.
Until then, feel free to try putting this newly learned theory to work and see if you can come up with a way of making an isometric grid using what you have learned from previous parts. If that's too difficult, not to worry. The next part should be up very soon, I promise.
12-30-2010 06:41 PM
#1