Tutorial XNA - Creating Custom Tile Maps

iTzZ_SpK

Newbie
Messages
20
Reaction score
2
idk if anyone still uses XNA on this site, but for people that do this will help u create maps using tiles.
btw this is my first tut so bare with me...

Note: There are other ways of doing this but i find this one the easiest and quickest for people who want to get started.

First off u are going to want to create a new Windows/Xbox 360 Game Project

Once its loaded, right click ur project in the solution explorer click Add>>Class. Name this class Tiles.
in that class write this code:
Code:
class Tiles
  {
  protected Texture2D texture;
  private Rectangle rectangle;
  public Rectangle Rectangle
  {
  get { return rectangle; }
  protected set { rectangle = value; }
  }
  private static ContentManager content;
  public static ContentManager Content
  {
  protected get { return content; }
  set { content = value; }
  }
  public void Draw(SpriteBatch spriteBatch)
  {
  spriteBatch.Draw(texture, rectangle, Color.White);
  }
  }
  class CollisionTiles : Tiles
  {
  public CollisionTiles(int i, Rectangle newRectangle)
  {
  texture = Content.Load<Texture2D>("Tiles/Tile " + i);
  this.Rectangle = newRectangle;
  }
  }
this class will be used to decide which tile to load and the width/height of it.

next u are going to want to add another class called Map. Right click ur project in the Solution Explorer, click Add>>Class

Once that is created, write the following code:
Code:
private List<CollisionTiles> collisionTiles = new List<CollisionTiles>();

  public List<CollisionTiles> CollisionTiles
  {
  get { return collisionTiles; }
  }
  private int width, height;
  public int Width
  {
  get { return width; }
  }
  public int Height
  {
  get { return height; }
  }
  public Map() { }

  public void Generate(int[,] map, int size)
  {
  for (int x = 0; x < map.GetLength(1); x++)
  for (int y = 0; y < map.GetLength(0); y++)
  {
  int number = map[y, x];
  if (number > 0)
  {
  collisionTiles.Add(new CollisionTiles(number, new Rectangle(x * size, y * size, size, size)));
  width = (x + 1) * size;
  height = (y + 1) * size;
  }
  }
  }
  public void Draw(SpriteBatch spriteBatch)
  {
  foreach (CollisionTiles tile in collisionTiles)
  tile.Draw(spriteBatch);
  }
  }

this is the class we use when we want to draw the actual map to screen. It uses an array of int's to draw tiles to the screen in different rows.

Now, go back to ur main class (Game1 or whatever u named it) and go to ur Draw method.
Here we are going to draw the tile map.

in ur draw method type this code:
Code:
map.Generate(new int[,]{
  { 1,1,1,1,1,1,1,1,1,1,1,1,1,1, },
  { 1,1,1,1,1,1,1,1,1,1,1,1,1,1, },
  { 1,1,1,1,1,1,1,1,1,1,1,1,1,1, },
  { 1,1,1,1,1,1,1,1,1,1,1,1,1,1, },
  { 1,1,1,1,1,1,1,1,1,1,1,1,1,1, },
  { 1,1,1,1,1,1,1,1,1,1,1,1,1,1, },
  { 1,1,1,1,1,1,1,1,1,1,1,1,1,1, },
  { 1,1,1,1,1,1,1,1,1,1,1,1,1,1, },
  { 1,1,1,1,1,1,1,1,1,1,1,1,1,1, },
  }, 64);
Notes: Each new line represents a new row, so if u wanted 22 different rows u would have 22 different lines
this draws the tile located at "Tiles/Tile 1" in ur project folder with the size of 64. If u want to change where it loads the tiles from then change it in the "CollisionTiles" class (inside the Tiles class).



before we debug our game we need a tile with a name of "Tile 1". Google some tiles if u dont already have any. Once you have one go to ur project go to (YOUR PROJECT NAME)Contents (ur content library) right click Add>>Folder and name the folder Tiles.
Then add ur tiles into that folder. It MUST be name Tile followed by a number. eg. Tile 1

Wehn u are done press F5 and try it out.
 
Top Bottom