How to convert mouse location in isometric map of splitting?

Question

So, I managed to write the first part (algorithm) to calculate each position of the tile, where it should be placed when drawing this map (see below). However, I need to be able to convert the location of the mouse to the appropriate cell, and I almost pulled my hair because I cannot figure out how to get the cell from the mouse. It bothers me that this is due to a fairly high math or something, that I am just something light, I can not notice.
For example, if the mouse position is 112; 35 , how can I calculate / convert it to get that cell 2; 3 in this position? Maybe there is some really good mathematician-programmer who would help me with this, or someone who knows how to do this or can give some information?

var cord:Point = new Point(); cord.x = (x - 1) * 28 + (y - 1) * 28; cord.y = (y - 1) * 14 + (x - 1) * (- 14); 

Speaking of the map, each cell (a transparent tile of 56x28 pixels) is placed in the center of the previous cell (or in the zero position for cell 1; 1), above is the code that I use to convert between cells, position. I tried many things and calculations for position-to-cell, but each of them failed.

Edit: After reading a lot of information, it seems that using an on-screen color map (where colors are displayed on the tiles) is the fastest and most effective solution?

Answer 1

 (1) x` = 28x -28 + 28y -28 = 28x + 28y -56 (2) y` = -14x +14 +14y -14 = -14x + 14y 

Conversion table:

 [x] [28 28 -56 ] = [x`] [y] [-14 14 0 ] [y`] [1] [0 0 1 ] [1 ] [28 28 -56 ] ^ -1 [-14 14 0 ] [0 0 1 ] 

Calculate this with a plotter (I like wims )

 [1/56 -1/28 1 ] [1/56 1/28 1 ] [0 0 1 ] x = 1/56*x` - 1/28y` + 1 y = 1/56*x` + 1/28y` + 1 

Answer 2

I know this is an old post, but I want to update it, as some people can still find answers to this problem, as before. However, I understood this myself. There is also a much better way to do this so that there are no problems with overlapping tiles.

The code is as simple as this one:

 mouse_grid_x = floor((mouse_y / tile_height) + (mouse_x / tile_width)); mouse_grid_y = floor((-mouse_x / tile_width) + (mouse_y / tile_height)); 

mouse_x and mouse_y are the coordinates of the mouse screen.

tile_height and tile_width are the actual size of the tile, not the image itself. As you see in my example image, I added dirt to my tile, this is just to simplify rendering, the actual size is 24 x 12. The coordinates are also “gender” to keep the grid of results x and y rounded down.

Also note that I draw these fragments from y = 0 and x = tile_with / 2 (red dot). This means that my 0.0 actually starts at the top corner of the tile (tilted), and not outdoors. See these tiles as rotated squares, you still want to start with 0.0 pixels.

Palis will be displayed starting from Y = 0 and X = 0 to the size of the card. After rendering the first line, you skip a few pixels down and left. This will cause the next row of tiles to overlap the first, which is a great way to keep layers matching. You must display the tiles, and then everything on that tile before moving on to the next.

I will also add a visualization example:

 for (yy = 0; yy < map_height; yy++) { for (xx = 0; xx < map_width; xx++) { draw tiles here with tile coordinates: tile_x = (xx * 12) - (yy * 12) - (tile_width / 2) tile_y = (yy * 6) + (xx * 6) also draw whatever is on this tile here before moving on } } 

Answer 3

I made such tiles as shown above.

THE DECISION IS VERY EASY!

first:

my width and tile height are equal = 32 which means that in an isometric view, width = 32 and height = 16! Mapheight in this case 5 (maximum value of Y)

y_iso and x_iso == 0 when y_mouse = MapHeight / tilewidth / 2 and x_mouse = 0

when x_mouse + = 1, y_iso - = 1

So first of all, I compute the "pixel transform"

TileY = ((y_mouse * 2) - ((MapHeight * tilewidth) / 2) + x_mouse) / 2;

TileX = x_mouse-TileY;

to find the coordinates of the tile, which I just split as the width of the tilewidth

TileY = TileY / 32; TileX = TileX / 32;

DONE !! never had any problems!

Answer 4

I found the algorithm on this site http://www.tonypa.pri.ee/tbw/tut18.html . I couldn’t make it work for me correctly, but I change it by trial and error to this form, and now it works for me.

 int x = mouse.x + offset.x - tile[0;0].x; //tile[0;0].x is the value of x form witch map was drawn int y = mouse.y + offset.y; double _x =((2 * y + x) / 2); double _y= ((2 * y - x) / 2); double tileX = Math.round(_x / (tile.height - 1)) - 1; double tileY = Math.round(_y / (tile.height - 1)); 

This is my card formation.

 for(int x=0;x<max_X;x++) for(int y=0;y<max_Y;y++) map.drawImage(image, ((max_X - 1) * tile.width / 2) - ((tile.width - 1) / 2 * (y - x)), ((tile.height - 1) / 2) * (y + x)); 

Answer 5

One way is to rotate it back to the square projection:

First translate y so that the dimensions are relative to the origin:

  x0 = x_mouse; y0 = y_mouse-14 

Then scale the tile size:

  x1 = x/28; //or maybe 56? y1 = y/28 

Then rotate the projection angle

  a = atan(2/1); x_tile = x1 * cos(a) - y1 * sin(a); y_tile = y1 * cos(a) + x1 * sin(a); 

Maybe I miss the minus sign, but this is a general idea.

Answer 6

Although you did not mention this in your original question, in the comments, I think you said you program it in Flash. In this case, Flash comes with matrix transformations. The most reliable way to convert between coordinate systems (for example, into isometric coordinates) uses the Matrix transformations:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/Matrix.html

You want to rotate and scale the matrix in the reverse order as you rotated and scaled the graphics.