Jump to content
  • Advertisement
Sign in to follow this  

I'm desperate. Isometric Mouse Coordinates

This topic is 2049 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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 pieaces the together as I really can't see any logic behind it.


Thank you very much for any possible help.

Share this post

Link to post
Share on other sites

Thanks for the reply.


I already knew those links. The first one doesn't explain how having the mouse at the middle-top of the screen translates itself to 0,0 isometric coordinates. wtihout knowing this the colored tile is useless. As for the second link, I'm affraid that math is too advanced o me...

Share this post

Link to post
Share on other sites
I battled this a LONG LONG time ago back in '08 (took some searching, but here's the thread)
The resolution is below, quoted for proper credit biggrin.png.

its simple really, I'll start from tile--> screen and then see how it goes from screen to tile. Of course you should replace the numbers 64 and 32 by constants for easy change.

tile --> screen
for every tile you go in the X direction you go 64 pixels right and 32 pixels down,
for every tile you go in the Y direction you go 64 pixels left and 32 pixels down,

on screen right=positive x, left=negative x, up=negative y, down = positive y

so we get:
pixel_x = X_LOCATION_OF_TOP_MIDDLE_TILE + 64*tile_x - 64*tile_y
pixel_y = Y_LOCATION_OF_TOP_MIDDLE_TILE + 32*tile_x + 32*tile_y

now to do the screen --> tile
for ease of writing, pixel_x = px, tile_x = tx, X_LOCA... = X0

equation1: px = X0 + 64*(tx-ty)
equation2: py = Y0 + 32*(tx+ty)
we want to find equations for tx and ty when given px and py, so we do some algebra:

eq1+2*eq2 = px+2py = X0+2Y0 + 128*tx
---> tx = (px+2*py -X0-2Y0)/128

eq1-2eq2 = px-2py = X0-2*Y0 -128ty
---> ty = (px-2py - X0+2*Y0) /(-128)

I hope that was clear, and maybe you learned some math from it smile.png

the matrices are just compressed way to do the algebra.

[Edited by - Iftah on December 5, 2008 6:08:28 AM]

In order to get it to work, I had to change the 128's to 64's. It's been forever so I don't remember much of that code, but it should be pretty straight forward.
Hope it helps.

Share this post

Link to post
Share on other sites

well, i also found another link explaining it (http://gamedev.stackexchange.com/questions/34787/how-to-convert-mouse-coordinates-to-isometric-indexes), but as far as i can remember, i used a formula looking like this :


tiles(i,j) -> screen(X,Y)

X = i * (w/2) - j * (w/2) + center

Y = i * (h/2) + j * (h/2)


screen(X,Y) -> tiles(i,j)


i = (X * (h/2) + Y * (w/2) - (center + w/2) * (h/2)) / (w*h/2)

j = (-X * (h/2) + Y * (w/2) + (center + w/2) * (h/2)) / (w*h/2)


where center is the offset along the X axis (typically screen width divided by 2, minus half the tile's width).


(edit : i just basically tested it, and it works happy.png )

Edited by pizzafan

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!