Thursday, January 5, 2012

Revisiting Nick's Tile Engine Series

Hello and welcome back to this revamped look at game development. The very first thing that I believe every old school rpg needs is a virtual world in which to exist. This world needs to be self-contained, but not flawless.  The first iteration of this world need not have any bells or whistles and only needs to display (in my case) a map of tiles that make it look like an actual world.

This is where Nick Gravelyn's old Tile Engine Series comes into play. I'm going to be going through his tutorial series, modifying where needed to suite my own designs, at least in the first parts of my rpg. I'll try to comment where needed.

The first thing that we need in order to display our tiles is a list of textures for those tiles. We do this by loading in a list of textures:

texture = Content.Load<Texture2D>("Tiles/grass1");
textureList.Add(texture);

texture = Content.Load<Texture2D>("Tiles/dirt1");
textureList.Add(texture);

These lines load individual texture images into a list of Texture2D textures. So far, we are following along with Nick's tutorial exactly.

After we have our list of textures we are free to create a map:

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

Using this map we only have to iterate through the 2D array of 1's and 0's to draw our map:

 int tileMapWidth = tileMap[1].GetLength();  
 int tileMapHeight = tileMap[0].GetLength();  
     for (int x = 0; x < tileMapWidth; x++) {  
       for (int y = 0; y < tileMapHeight; y++) {  
         int textureIndex = tileMap[y, x];  
         Texture2D texture = textureList[textureIndex];  
         spriteBatch.Draw(
             texture,
             new Rectangle(
                  x * tileWidth,   
                  y * tileHeight,   
                  tileWidth,   
                  tileHeight),
             Color.White);  
       }  
     }  

The code here sets the width of the tile map to the second dimension of the array, while the height is the first dimension. We then grab the number at each spot in the array and draw the corresponding image indexed to the value of the spot on the 'map' (array). For my map, tileWidth and tileHeight are set to 64.

This is a very basic way of drawing a map in Xna. There is much room for improvement/development and we will be taking our time getting the features of this game fleshed out in order to ensure that this game is fun to play and fun to develop. I appreciate you reading this and welcome any comments, suggestions, and questions gladly.


No comments:

Post a Comment