Introduction to Tiling

Well, I'm not going to post the tutorial until the 13th. What I am going to post today is the basics of creating a map and you would draw the map.

For a simple tile map, the best thing you can do is make an array of integers to the index of like this:

int[,] map = new int[,]
{
    {0, 0, 0, 0, 0, 1, 0, 0, },
    {0, 0, 0, 0, 0, 1, 0, 0, },
    {1, 1, 1, 1, 1, 1, 1, 1, },
    {0, 0, 0, 0, 0, 1, 0, 0, },
    {0, 0, 0, 0, 0, 1, 0, 0, },
    {0, 0, 0, 0, 0, 1, 0, 0, },
};

You can think of the 0's representint the first tile that is say a grass tile, 1's represent the second tile that is say a road tile. , the 2's would represent another tile, and so on.

static int tileWidth = 32;
static int tileHeigh = 32;

It would be a good idea to create two variables to hold the height and width of the tiles you are going to use like this:

Before you can draw something you would have to load the Textures in the LoadContent method. I'm not going to go into that, this is just a quick introduction (because I still haven't found tiles I like). But I will assume that there is a list of tiles that was loaded in the LoadContent method. This is how the list was defined:

List<Texture2D> tileList = new List<Texture2D>();

So, how do you draw the map?

In XNA you will do that in the Draw method. You would do something like this:

int mapWidth = map.GetLength(1);
int mapHeight = map.GetLength(0);
int index;

spriteBatch.Begin();

for (int y = 0; y <>
{
    for (int x = 0; x <>
    {
        index = map[y, x];
        spriteBatch.Draw(tileList[index],
            new Rectangle(x * tileWidth,
                y * tileHeight,
                tileWidth,
                tileHeight),
            Color.White);
    }
}
spriteBatch.End();

Looking at the code you might be thing: He's got the x and y backwards! Truth is typically in math coordinates are writen (x, y) so are screen coordinates. For our tile engine to work we have to reverse them to (y, x).

The drawing code works this way. I get the size of the map that I will be drawing and define a variable to store the index of the texture in our list.

Then I call spriteBatch.Begin(). If you are going to draw Texture2Ds you have to put the
drawing code between a spriteBatch.Begin() and a spriteBatch.End().

I set up two for loops. I start at coordinate (0, 0). Then I go through the rows of the array and draw the tile using the spriteBatch.Draw method. There are many overloads to the Draw method. I just used the first one. The parameters are:

1. the texture to be drawn


2. the destination rectanlge on the screen


3. the tint color

The texture is easy. It is just the texture from the list indexed by the index from the tile map. The destination rectangle is what needs explaining. The destination rectangle is a rectangle whose x and y coordinate will go someting like this: (0, 0), (32, 0), (64, 0), (96, 0), ... for the first row and (0, 0), (0, 32), (0, 64), (0, 96), ... for the first column.

The second row would go like this (32, 0), (32, 32), (32, 64), (32, 96), ...

The second column would go like this (32, 0), (32, 32,), (32, 64), (32, 96)...

You will see better when I manage to get the tutorial for the tile engine working.

The tint color allows you to tint your textures. Typically you don't want any tint so you put in Color.White. That is the basics of how tile works. There are a few more concepts to be tied in. Such as preventing the map from scrolling off the screen, only drawing the portion of that map that is visible and scrolling the map in general.