title: Drawing Isometric Tilemaps
body: <p>I've been working on drawing an isometric map with C# / XNA Game Studio, and while I've gotten pretty far it doesn't look quite right and I was wondering if anybody can help.</p>
  
  <p>Here's the code I have for drawing the map:</p>
  
  <pre><code>public void Draw(SpriteBatch theBatch, int drawX, int drawY)
      {
  
          if ((drawY % 2 == 0))
              theBatch.Draw(tileTexture, new Rectangle((drawX * width), (drawY * length / 2), width, length), Color.White);
          else
              theBatch.Draw(tileTexture, new Rectangle(((drawX * width) + (width / 2)), (drawY * length / 2), width, length), Color.White);
      }
  </code></pre>
  
  <p>The code within this method acts as if it were inside a nested for loop, drawing left to right, top to bottom. When the y-value is odd, the row is shifted over to fit, however it looks a bit off. </p>
  
  <p>This is the produced output for an 8x5 map:</p>
  
  <p><img src="https://i.stack.imgur.com/uBned.png" alt="http://imgur.com/xpDRU.png"></p>
  
  <p>As you can see, it doesn't quite look right, and I'm not sure if its an issue with the math in my code, or if it has to do with the order everything is being drawn in. I'm very new to C# and working with sprites, so any help would be greatly appreciated.</p>
  
  <p>Because it might be helpful, here is the other relevant parts of code which draw the map.</p>
  
  <p>The entire Tile Class:</p>
  
  <pre><code>public class Tile
  {
      // Dimension variables
      int height;
      int width;
      int length;
  
      String type;
      Texture2D tileTexture;
      Vector2 coordinates;
  
      /// 
      /// Tile Constructor
      /// 
      public Tile(ContentManager theContent, String theType, Vector2 theCoordinates)
      {
          width = 68;
          length = 46;
  
          type = theType;
          coordinates = theCoordinates;
  
          // Sets the right texture to the texture ref
          if (theType == "grass")
              tileTexture = theContent.Load&lt;Texture2D&gt;(@"Tiles\iso_grass");
      }
  
      /// 
      ///  Draws the tile at the given location
      /// 
      public void Draw(SpriteBatch theBatch, int drawX, int drawY)
      {
  
          if ((drawY % 2 == 0))
              theBatch.Draw(tileTexture, new Rectangle((drawX * width), (drawY * length / 2), width, length), Color.White);
          else
              theBatch.Draw(tileTexture, new Rectangle(((drawX * width) + (width / 2)), (drawY * length / 2), width, length), Color.White);
      }
  
  
  }
  </code></pre>
  
  <p>The TileRow class, which holds one row of tiles.</p>
  
  <pre><code>public class TileRow
  {
          public List&lt;Tile&gt; Row = new List&lt;Tile&gt;();
          public int rowLength;
  
          public TileRow(int theLength, int yIndex, ContentManager theContent)
          {
              rowLength = theLength;
              Tile thisTile;
  
              // Here the tiles are created and added to the row
              for (int x = 0; x &lt; rowLength; x++)
              {
                  thisTile = new Tile(theContent, "grass", new Vector2(x, yIndex));
                  Row.Add(thisTile);
              }
          }
  
          /// 
          /// Draw -- invokes the draw method of each tile in the row
          /// 
          public void DrawRow(SpriteBatch theBatch, int currentY)
          {
              for (int x = 0; x &lt; rowLength; x++)
              {
                  Row[x].Draw(theBatch, currentY, x);
              }
          }
      }
  }
  </code></pre>
  
  <p>and the MapStruct class, which holds all the rows</p>
  
  <pre><code>public class MapStruct
  {
  
      public List&lt;TileRow&gt; allRows = new List&lt;TileRow&gt;();
      int depth;
  
      // Constructor
      public MapStruct(ContentManager theContent, int theDepth, int rowLength)
      {
          depth = theDepth;
          TileRow thisRow;
  
          // Here we make a row of tiles for each level of depth
          for (int y = 0; y &lt; depth; y++)
          {
              thisRow = new TileRow(rowLength, depth, theContent);
              allRows.Add(thisRow);
          }
      }
  
      ///
      /// Draw - this method invokes the draw method in each tile row, which then draws each tile
      ///
      public void DrawMap(SpriteBatch theBatch)
      {
          for (int y = 0; y &lt; depth; y++)
          {
              allRows[y].DrawRow(theBatch, y);
          }
      }
  }
  </code></pre>
  
  <p>Any help on how I could fix this issue, as well as advice on how I could improve my code would be greatly appreciated!</p>