I'm desperate. Isometric Coordinates Translation

EFileTahi-A

Contributor
Joined
Aug 8, 2004
Location
Portugal / Barreiro
After browsing the web and reading dozens of examples and tutorials I still can't figure out how to translate mouse X;Y screen position in pixels to X;Y isometric tile index. All the examples I tried returned strange values.

The attached picture shows exactly the tiles' redering order. The Zig-Zag rendering mode was so simple to implement with the help of a colored coded tile. But this diamond shapped design is really giving me a hard time.

I guess the formula involves the following variables:

- MousePos.X
- MousePos.Y
- TileWidth
- TileHeight
- ScreenWidth
- ScreenHeight

Now I just need to know how to put the pieces together. Unfortunately, I fail to see the logic behind it.

Thank you very much for any possible help.
 

Attachments

  • Isometric.png
    28.2 KB · Views: 8

snarfblam

Ultimate Contributor
Joined
Jun 10, 2003
Location
USA
It took me a minute of scratching my head before I figured this out. Here's what I came up with. First thing I did was get the pixel coordinates relative to the origin of the isometric grid. I'm using the image you posted as an example. The origin of the grid is at pixel coordinate (319, 0).

Code:
    public partial class Form1 : Form
    {
        const int origX = 319;
        const int origy = 0;

        public Form1() {
            InitializeComponent();
        }

        private void pictureBox1_MouseMove(object sender, MouseEventArgs e) {
            int relativeToOriginX = e.X - origX;
            int relativeToOriginY = e.Y - origy;
        }
    }

I eventually reasoned that, placing the mouse cursor over the grid, for each pixel you move down, you're moving 1/32 of a tile in both the x- and y-axes of the isometric grid. (If you move the mouse down 32 pixels, you've gone from the corner of tile (0,0) to the corner of tile (1,1).) Up is -1/32 of a tile in each axis. Moving from left to right, it takes 64 pixels to go from the "bottom-left" corner of a tile to the "top-right", thus one pixel right is +1/64 in the x-axis and -1/64 in the y-axis. Likewise, left is -1/64 and + 1/64.

So, we can add some more constants to represent those values:
Code:
        const int origX = 319;
        const int origy = 0;
[COLOR="Blue"]        const double isoYperPixelY = (1.0 / 32);
        const double isoXperPixelY = (1.0 / 32);
        const double isoYperPixelX = -(1.0 / 64);
        const double isoXperPixelX = (1.0 / 64);[/COLOR]

Now, to get grid coordinates, you can take the pixel X (relative to the origin of the grid), and multiply it by isoXperPixelX, then multiply the pixel Y by isoXperPixelY, add the two together, and viola. You've got your grid X-coordinate. Use the same process to get your grid Y-coordinate.
Code:
    public partial class Form1 : Form
    {
        const int origX = 319;
        const int origy = 0;
        const double isoYperPixelY = (1.0 / 32);
        const double isoXperPixelY = (1.0 / 32);
        const double isoYperPixelX = -(1.0 / 64);
        const double isoXperPixelX = (1.0 / 64);

        public Form1() {
            InitializeComponent();
        }

        private void pictureBox1_MouseMove(object sender, MouseEventArgs e) {
            int relativeToOriginX = e.X - origX;
            int relativeToOriginY = e.Y - origy;

[COLOR="Blue"]            double isoX = relativeToOriginX * isoXperPixelX + relativeToOriginY * isoXperPixelY;
            double isoY = relativeToOriginX * isoYperPixelX + relativeToOriginY * isoYperPixelY;

            Text = ((int)isoX).ToString() + ", " + ((int)isoY).ToString();[/COLOR]
        }
    }

Place your grid image in a picturebox, move the mouse around, and watch the form's caption.

Fun Fact: I realized after the fact that this is effectively matrix multiplication.
 

EFileTahi-A

Contributor
Joined
Aug 8, 2004
Location
Portugal / Barreiro
I get very excited every time I see your nickname In my threads, because your posts always hit the bull's eye!

Can't wait to get home to try your idea. Thank you Snarfblam, I was getting seriously desperate with this thing. I really hope some day I have the opportunity to reward you.

I will post again soon.
 

EFileTahi-A

Contributor
Joined
Aug 8, 2004
Location
Portugal / Barreiro
I have implemented it quite easily. :D Alright! I finally can add input into my ship design editor.

Promise me you will never die and that you always will be around. :)

PS: Remember Snarfblam, I'll also be around by the day you decide to team up with me. I have some great stuff going on atm.
 
Last edited:
Top Bottom