Change in plans...

This is what I am going to do. I'm going to keep this blog going but only post short tutorials about C#. I'm going to create a new blog about the Role-Playing Game project in XNA. Once I've created the new blog I will post a link here to the blog.

Look for the new blog shortly and the first of my tutorials about C#.

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.

What's up...

Well, I have been very busy the past few days. I'm trying to find some nice textures to use for the tile demonstration, so far I have not had very much luck. The tile program is done though and I am trying to write it up. I might download the Role-Playing Game starter kit from the XNA Creators Club and use some of those tiles. I don't think they can be distributed with the finished game though. I have found some nice ones for isometric tiling but I don't want to get into that.

Look for the tutorial maybe on the 11th or the 13th at the latest. I am not going to be doing anything on the 12th as it is Easter.

Introduction to XNA 3.0

XNA Game Studio 3.0 is a Framework offered by Microsoft for creating games with C#. With it you can create Windows games, XBOX 360 games and games for Zune. I don't have an XBOX 360 or a Zune so I really have no idea about those platforms.

For Windows games you must meet the minimum requirements for Visual C# 2008 Express Edition and you must have a graphics card that supports Pixel Shader 1.1 or better. Most modern ATI and nVidia graphics cards support Pixel Shader 1.1 or better. If you do not have a card that supports Pixel Shader 1.1 you really can not program in XNA.

In XNA you have the Content Pipeline. It is used to import a wide variety of content to your project. For the purposes of what I will be doing all you have to worry about is Texture2D, which will be used for tiling and sprites and sound files. Eventually there will be some XML files but I am going to make custom importers, processors and exporters to compile them into .XNB files. Otherwise the XML files could be edited by others playing your game and they can change the content of your game.

XNA has two methods that are called often. They are the Draw and Update methods. In the Update method you process thing like input, collisions, moving objects, etc. In the Draw method you draw your scene. The rate at which they are called can be changed programmatically.

Tomorrow, or the next day, I plan on posting a tutorial on how to do basic tiling. So look for that in the next do or so.

The next tutorial

I am hoping that the next tutorial will be ready Sunday. But until then I want to make a mini-post.

I find the documentation on how to check if a key has been pressed and released a little confusing. Here is a simple way to do it. You need to save the old state of the keyboard and compare it to the current state of the keyboard. I believe what they are checking is if the current state of the keyboard the key is down and the last state of the keyboard is up. I think that it works better if the current state of the keyboard is up and the last state of the keyboard is down.

So, create an XNA game. In the Game1.cs file add a variable at the top of the class to hold the old state of the keyboard and a variable to hold a color:

KeyboardState oldState;
Color bgColor = Color.White;

Now in the Update method add a call to a new method:

CheckKeyboard();

Now, write the CheckKeyboard method as follows:

private void CheckKeyboard()
{
  KeyboardState currentState = Keyboard.GetState();

  if (currentState.IsKeyUp(Keys.Space))
    {
      if (oldState.IsKeyDown(Keys.Space))
      {
        bgColor = new Color((byte)~bgColor.R,
          (byte)~bgColor.G,
          (byte)~bgColor.B);
      }
    }

    oldState = currentState;
}

Now just replace the Color.CornflowerBlue in the Clear call to bgColor in the Draw method. When you run the program the screen should switch between black and white when you press the Space key and let it go.

Give it a try and see how it works. I am not posting the project for this simple tutorial.