I'm desperate. Isometric Coordinates Translation

[EFileTahi-A]

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.

[snarfblam]

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

 

   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:

       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.

   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]

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]

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.

Edited May 7, 2013 by EFileTahi-A