Is it possible to map mouse coordinates to isometric tiles with this coordinate system?

Question

I'm trying to implement mouse interaction in a 2D isometric game, but I'm not sure if it's possible given the coordinate system used for tile maps in the game.

I've read some helpful things like this. However, this game's coordinate system is "jagged" (for lack of a better word), and looks like this:

Is it even possible to map mouse coordinates to this successfully, since the y-axis can't be drawn on this tile-map as a straight line?

I've thought about doing odd-y-value translations and even-y-value translations with two different matrices, but that only makes sense going from tile to screen.

Answer 1

Yes, it is possible, the easiest way would be to draw a 2d-array numerical representation of the tiles, where each tile 'pixel' in the array is coded with a serial tile number.

Otherwise

Here is the complete answer:

Assuming each tile is defined by this height and width properties:

TILE_WIDTH = xyz;
TILE_HEIGHT = abc;

And the game map looks like this: We first make sure that anything on the green and red triangles is the '0' tile. Meaning a tile that does not exist.

We have as input the mouse (x, y)

offsetY = (mouseY - 0.5 * TILE_HEIGHT) % TILE_HEIGHT;
greenPixels = TILE_WIDTH * Math.abs(TILE_HEIGHT/2 - offsetY) / TILE_HIGHT;

offsetX = mouseX % TILE_WIDTH;
redPixels = TILE_HEIGHT * (TILE_WIDTH/2 - Math.abs(TILE_WIDTH/2 - offsetX)) / TILE_WIDTH;
if(mouseX < greenPixels || mouseY < redPixels) return (0,0);
else
{
    rowY = (int) Math.floor((mouseY -0.5 * TILE_HEIGHT) / TILE_HEIGHT);
    columnX = (int) Math.floor((mouseX * TILE_WIDTH) / TILE_WIDHT);
    if( (offsetX / TILE_WIDTH) + (offsetY / TILE_HEIGHT) < 1.0) return (columnX, 2 * rowY - 1);
    else
    {
        if(offsetX < TILE_WIDTH / 2) columnX --; // columnX = columnX - 1
        if(offsetY < TILE_HEIGHT / 2) return (columnX, 2 * rowY - 2);
        else return (columnX, 2 * rowY);
    }

}

This is the general pseudo code you need, there might be typos and you are welcome to ask questions and I will elaborate.

Generally what I did is build an imaginary square grid over the even rows of the tiles - ie the second row, the fourth row and such.

Then I check in which of this grid's squares the mouse is pointing (which is relatively simple since it is not jagged like the tiles.

Now I check the distance on x and y from the center of the square grid. If the pointer is not far enough from the center of the tile(which is also the center of the square in the grid) it is inside the tile.

Done like in this question:

Checking if an object is inside bounds of an isometric chunk

If not, if it is too high, it is one row above, if it's too low, it is one row below, if it is too much to the left, it is one column behind (cause the tiles on the un-even rows start a little later than the ones on the even rows) and if it is too much to the right than it is in the same jagged column as the even tile in the center.

Answer 2

Screen-space mouse coordinates to tile coordinates

The general dimetric projection matrices in my answer to the question linked above will get you the transformation from screen coordinates to tile coordinates. In particular, this matrix can be used for transformation of the screen coordinates to tile coordinates:

The values to input are:

• w: half of the width of a single tile on screen
• h: half of the height of a single tile on screen
• f_x: X-Position of the upper corner of the (0,0) tile in screen coordinates
• f_y: Y-Position of the upper corner of the (0,0) tile in screen coordinates

The mouse coordinates have to be extended by a constant value of 1 to be a 3-dimensional vector (x_mouse, y_mouse, 1) and multiplied by this matrix to arrive at the tile coordinates.

Tile coordinates to tile indices

Unfortunately if you apply them straight away to your image, you'll find that the actual tile indices aren't quite in line with their coordinates.

The somewhat thicker green lines in the picture are at coordinates x=0 and y=0; the others are spaced one unit of length apart. Remember that the y coordinate goes down as usual with computer graphics, so the tile indexed by (1,0) is in the tile with coordinates x=[1, 2) and y=[-1, 0).

Given the "normal" integer tile coordinates x and y (in blue on the picture above), you can calculate your tile indices x_ind and y_ind with the following formulas⁽¹⁾:

x_ind = floor(x - y + 1)/2)

y_ind = x + y

---

(1) In this context, the floor() function rounds down towards -∞.

Answer 3

If it's still not working, these tutorials may be of help:

http://www.gamedev.net/page/resources/_/technical/game-programming/isometric-n-hexagonal-maps-part-i-r747 , http://www.wildbunny.co.uk/blog/2011/03/27/isometric-coordinate-systems-the-modern-way/

Answer 4

As I saw on a game I did, it's easier to "move" your x/y axes, and handle row and cols as linear function : you can easy calculate a and b from y(x) = ax+b with tile position.

Answer 5

I'll preface my answer with this: I know this is an old question, but it's the first that came up when I was searching.
I had the same issue, and I looked at the solution presented here, but they deal with either a known offset or can be inaccurate with mouse coordinates. My solution is small and in a single function.

This is in Lua:

function global.XYtoIsoTile(x,y)
  local isoW,isoH = cGenericTile.getSize()
  local gridX,gridY = math.floor(x/isoW)+1,math.floor(y/isoH)+1
  --Get the coordinates in relation to center of grid area
  local pointX,pointY = (x%isoW)-(isoW/2),(y%isoH)-(isoH/2)

  if math.abs(pointY) > ((isoH/2) - (((isoH/2)*math.abs(pointX))/(isoW/2))) then
    if pointX >= 0 and pointY >= 0 then
      gridX,gridY = gridX,gridY+1/2
    elseif pointX >= 0 and pointY < 0 then
      gridX,gridY = gridX,gridY-1/2
    elseif pointX < 0 and pointY >= 0 then
      gridX,gridY = gridX-1,gridY+1/2
    else --if pointX < 0 and pointY < 0 then
      gridX,gridY = gridX-1,gridY-1/2
    end
  end
  return gridX,gridY
end

cGenericTile.getSize() just returns the height and width of my isometric tiles.
my gridX and gridY have the +1 to them because Lua tables start at 1, not 0, and my tiles are stored in a 2D table/array. In Lua, -- denotes a comment, rather than // or #

math.abs(pointY) > ((isoH/2) - (((isoH/2)*math.abs(pointX))/(isoW/2))) is a math function that, if graphed, forms an isometric tile. It checks if the |y| is above the line, and if so, it enters the if statement code, else skips over it all.