3
\$\begingroup\$

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):

enter image description here

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.

\$\endgroup\$
1
\$\begingroup\$

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).

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .