Saturday, November 27, 2010

FINALLY, I've acheived isometry!

Please ignore the magenta halos around each tile, Photoshop decided to anti-alias my tile edges.

This is not a real isometric engine yet. After puzzling over the concept for days on end (surprisingly, there are no 2D isometric tile engine tutorials in XNA 4.0 yet) a brief flash of inspiration led me to realize how I could render a 2D tilemap in pseudo-isometric view. It boils down to the use of a horizontal offset (hOff). I haven't progressed very far though because I am still learning. My tile engine is based on the revived XNA Resources tutorial here.

I think I am going to change the angle so that the tiles appear to be flatter. Currently I am using tiles that I got here and then skewed in Photoshop.

Here is my Tile class:
static class Tile
{
static public Texture2D TileSetTexture;

static public Rectangle GetSourceRectangle(int tileIndex)
{
return new Rectangle(tileIndex * 192, 0, 192, 128);
//above values are hardcoded: 192 = (tileWidth + hOff)
}

}

The interesting things are in the spriteBatch.Draw parameters.

To place a tile isometrically, the destination Rectangle begins at these points:
x = (x * tileWidth) - (y * hOff)
y = (y * tileHeight)


Additionally there is a beginning offset value that I haven't coded in yet. It determines how far across the rendering field we draw our first tile (because this isn't true isometric tiling, our map is going to be a traditional matrix but rotated, with the starting tile [0][0] somewhere off to the right.)
startingOff.x = (mapHeight - 1) * hOff
startingOff.y = 0

Okay.

No comments:

Post a Comment