# convert mouse coords to zig-zag isometric

I was wondering, how do I convert mouse coordinates to zig-zag isometric coordinates?

I already know how to convert to isometric using the Diamond approach, so I just need to know about the zig-zag approach. I also know how to get the mouse coordinates as well.

Here is the zig-zag approach (copied from the link below): Here is the link I used for the definition of drawing both the Diamond and zig-zig isometric approaches.

https://stackoverflow.com/questions/892811/drawing-isometric-game-worlds

Help is greatly appreciated, thanks.

I finally managed to solve my own question, by doing some simple linear algebra.

In case anyone is curious, Here is how I solved my problem:

Here is the drawing code:

public void drawZigZag(Graphics g)
{
int offset = 0;

for(int x = 0; x < mapWidth; x++)
{
if(x % 2 == 1)
{
offset = tileWidthHalf;
}
else
{
offset = 0;
}

for(int y = mapHeight - 1; y >= 0; y--)
{
int sx = (tiles[x][y] % 3) * 64;
int sy = (tiles[x][y] / 3) * 64;
int sw = sx + 64;
int sh = sy + 64;

int dx = (y * tileWidth) + offset;
int dy = x * (tileHeightHalf / 2);
int dw = dx + tileWidth;
int dh = dy + tileHeight;

g.drawImage(tileImage, dx, dy, dw, dh, sx, sy, sw, sh, null);
}
}
}


Here is my final code for selecting a tile's coordinates based on the mouse position:

public void getZigZagPos(int x, int y)  // x = mouseX, y = MouseY
{
int sx = x / tileWidthHalf;
int sy = y / tileHeight;

int off = (sx % 2 == 1) ? tileWidthHalf : 0;

// Solved for y here:

// dx = (y * tileWidth) + offset
// dx - offset = y * tileWidth
// (dx - offset) / tileWidth = y

// Solved for x here:

// dy = (x * (tileHeightHalf / 2))
// dy * 2 = x * tileHeightHalf
// (2 * dy) / tileHeighHalf = x

int isoX = (2 * y) / tileHeightHalf;
int isoY = (x - off) / tileWidth;

tiles[isoX][isoY] = 2;
}

1. I first took the code for drawing the isometric tiles, and solved for y in dx = (y * tileWidth) + offset;

2. Then I took the code for drawing the isometric tiles, and solved for x in dy = x * (tileHeightHalf / 2);

3. Finally just substitute the equation results for the tile's coordinates:

The equation that I solved for x is Substituted for the tile's X coordinate

The equation that I solved for y is Substituted for the tile's Y coordinate

Note, that this method is not pixel-perfect, it simply calculates the tile's bounding box ( Not the actual diamond shape of each tile).