Tutorial 1: Levels

Ok, so the first part of our tower defence that we are going to make is a simple terrain class. Please note that most of this code is going to be from Nick Gravelyn’s Tile Engine Series. I’m assuming you know how to create a new project so I’ll skip that bit.

Ok, so to start off with create a new class called “Level.cs”. This is going to be what holds all the information about our level (which textures go where basically).

First add the following using statements to the top of “Level.cs”

using Microsoft.Xna.Framework;

using Microsoft.Xna.Framework.Graphics;

Now, go ahead and add a new 2-Dimensional array to the top of your “Level.cs” class.

int[,] map = new int[,]

{

    {0,0,1,0,0,0,0,0,},

    {0,0,1,1,0,0,0,0,},

    {0,0,0,1,1,0,0,0,},

    {0,0,0,0,1,0,0,0,},

    {0,0,0,1,1,0,0,0,},

    {0,0,1,1,0,0,0,0,},

    {0,0,1,0,0,0,0,0,},

    {0,0,1,1,1,1,1,1,},

};

This array is going to be used to map out our level. Imagine that each one of these numbers is a texture. In this data a zero means draw a grass texture whereas a one means draw a path. So the above array would translate into something like this:

So, how do we turn this array of numbers into the above image? Well that’s simple. First off add a new list underneath the array.

private List<Texture2D> tileTextures = new List<Texture2D>();

This list is going to contain our two textures: grass and path. Now because our level class does not have access to the ContentManager we will pass in the textures using a new method called “AddTexture” which looks like the following:

public void AddTexture(Texture2D texture)

{

    tileTextures.Add(texture);

}

All this method does is add a texture to our texture list. So, now we have a list of textures, but how do we make them be drawn and how do we make them be drawn so they correspond to our array? Well this is all done in our draw method. But before we move on to the draw method we need to add to more variables to the top of our class:

public int Width

{

    get { return map.GetLength(1); }

}

public int Height

{

    get { return map.GetLength(0); }

}

What these two variables do is get the width and height of our level by retreiving our array’s row length(how many numbers are in a row) and column length(how many numbers are there in a column).

Now add a new method called “Draw” at the end of the class:

public void Draw(SpriteBatch batch)

{

    for (int x = 0; x < Width; x++)

    {

        for (int y = 0; y < Height; y++)

        {

            int textureIndex = map[y, x];

            if (textureIndex == -1)

                continue;

            Texture2D texture = tileTextures[textureIndex];

            batch.Draw(texture, new Rectangle(

                x * 32, y * 32, 32, 32), Color.White);

        }

    }

}

This is where the magic happens.

First of all we itterate through each of the numbers in our array. Then we find out if it’s one or zero and store this value in an integer named textureIndex.

Next we find the texture that needs to be drawn. We do this by getting the texture from tileTextures which is at the texture index. Then all we do is draw the texture. All the textures we are going to be using are going to be 32 by 32 pixels.

So, how do we know where to draw the texture? Well we know the x and y coordinates of the texture in the array. So all we need to do is transform the array coordiantes into screen coordinates by multiplying the x and y coordinates by the texture width or height which is 32.

So, we now have a basic level class which we can expand upon later. So let’s incorporate this into our “Game1.cs” class.

First off save these two images into your projects Content folder and then add them into your project:

Then at the top of “Game1.cs” add

Level level = new Level();

Next add these lines of code to your "Game1()" constructor to make sure you game window is an appropriate size:

graphics.PreferredBackBufferWidth = level.Width * 32; 

graphics.PreferredBackBufferHeight = level.Height * 32;

graphics.ApplyChanges();

IsMouseVisible = true;

Remember the level’s width and height needs to be multiplied by 32 to bring the value out of array space and into screen space.

Then in the “LoadContent()” method add the following code :

Texture2D grass = Content.Load<Texture2D>("grass");

Texture2D path = Content.Load<Texture2D>("path"); 

level.AddTexture(grass);

level.AddTexture(path);

Note: the order you add your textures is important. The order you add your textures in corresponds to the numbers in our level array.

Now, in the “Draw” method add

spriteBatch.Begin();

level.Draw(spriteBatch);

spriteBatch.End();

And there we have it. Next time we will be creating a level editor to create new levels and edit existing ones. Thanks for reading. Feel free to comment or ask any questions.

The source code for this tutorial can be downloaded here.