Isometric Map Drawing

Question

I tried to create an Isometric map editor and I stumbled across this problem when I generated the map :

http://postimg.org/image/atsqgu5on/

My generated map looks like the (A) scheme having some tiles offscreen . What must I change in my code to get a (B)-ish map?

This is the code I used to create the cells in my map. (32 is the tile height and width)

for (int i = 0; i <this.Height; i++)
        {
            Map[i] = new Rectangle[Width];
            miniMap[i] = new Rectangle[Width];

            for (int j = 0; j < this.Width; j++)
            {
                int x = 32 * j;
                int y = 32 * i;
                int isoX = x - y;
                int isoY = (x + y) / 2;

                Map[i][j] = new Rectangle(isoX,isoY, 64, 64);

            }

Somehow I know that the problem lies here : int isoX = x - y; but I don't know what to change in order to get my desired result. Thank you for any help.

Answer 1

The problem here seems to be that your system builds rows of tiles starting from the top to the right corner, then working to the lower left edge. Since the initial coordinates for your first tile are 0,0 when it's drawing subsequenct rows to the left they quickly disappear off screen.

The easiest solution to this would just be to right shift the x coordinate so it starts drawing the top tile from the middle of the area whilst remembering we want the centre of the tile to be in the centre of the area, not it's top left edge. So something like

int isox = (Width / 2) - (tileLength / 2) + x - y;