# Mouse Click Coords to Tile Coordinates

## Recommended Posts

Xyle    180
I have spent 4 days on this and still cannot get anything working properly, which of course probably means, I'm looking at this wrong. I have a grid thats 10x10 I have tiles that are 32x16 diamond shaped The map is drawn in a large diamond shape as shown here... Of course it shows 160,0 for the bottom right tile, that should be 9,0. I loop through the mapArray and draw each tile starting at 144,0. It then draws the next tile down and to the right. Once it reaches the last column in the array, it paints the next tile at 128,8 then goes down and to the right again. Everything works great and looks right. The problem I have is picking which tile the mouse is clicked on. I am looking at retrieving tile coordinates in the form of Tile 0,0 which would be the top left tile of the drawn map and 9,0 would be bottom right tile of the drawn map. I have tried every formula and theory and psuedo code I could find and couldnt even get close. I was looking to implement the gamedev article that uses a map mask shape, but I cant even find the origin of the tile to draw the mapMask. I would rather use a formula if one is available. Any tips or help on this would be greatly appreciated! Thanks!

##### Share on other sites
One thing you can do to help yourself out, at least for figuring out the equation, is to assume that the top corner of the map (0,0) is aligned with the top-left of the screen (0,0). Then if you walk along the two "axes" of your map, you can observe 2 significant sequences of mouse coordinates.

As you walk down the "y"-axis of your map, you get the following sequence of <mousex, mousey> == <mapx, mapy>:
<0, 0> == <0, 0>
<-16, 8> == <0, 1>
<-32, 16> == <0, 2>
<-48, 24> == <0, 3>

Every single time we move left 16 units and down 8 with the mouse, we move down the map by exactly 1 tile. We could directly scale the change in mousex and mousey, and get this:
mapy(mousex, mousey) == (-mousex/16) + (mousey/8)

Unfortunately, that gets us twice as far as we wanted to go, every time. It's close, though, and can be solved with just one more scalar:
mapy(mousex, mousey) == ((-mousex/16) + (mousey/8))/2

Perfect.

Now, if you walk along the "x"-axis of your map, and observe the sequence of mouse coordinates, can you derive mapx(mousex, mousey)?

##### Share on other sites
Xyle    180
That formula is close but its not returning the correct rows or cols.

I did got this from Javagaming.org Dishmoth, its a java solution but it reflects the proper math I needed.
int x0 = 144 + (tileWidth/2); //144 is the X coord where I start drawing the first tile
int y0 = 2; //2 is the Y coord where I start drawing the first tile
int i = (int)Math.floor((tY-y0)/(double)tileHeight - (tX-x0)/(double)tileWidth); //Find row
int j = (int)Math.floor((tY-y0)/(double)tileHeight + (tX-x0)/(double)tileWidth); //Find col

This code works pefectly. One of the main problems I was having, I believe is that I start the map drawing at 144,2 not 0,0. The math is basically the same as yours though.

Thanks for the help and the input, I really, really appreciate it!