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

|improve this answer|||||
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.