Hi, I’m trying to do a isometric game, diamond shaped stage. And want to know how the formula for translating the mouse position over a tile into the correct row/column of it.
I position them with something like this:
for (var i=0; i<=rows-1; i++) {
for (var j=0; j<=columns-1; j++) {
var tileName = "t_"+i+"_"+j;
var tile:Tile = new Tile();
tile.name=tileName;
// logic to display the right frame of tiles and such, blablabla...
tile.x=(j-i)*tileHeight;
tile.y = (j+i)*tileHeight/2;
gameArr.push(gameGrid.addChild(tile));
}
}
Usually the tiles are half as high as their width. A classic 2:1 ratio. Then I could use the following formula for transforming mouse position to a tiles row/column:
var column:int = mapSize-(((mouseY/ tileHeight) + (mouseX - (mapSize * tileHeight)) / tileWidth) - mapSize) *-1;
var row:int = mapSize-(((mouseY/ tileHeight) - (mouseX - (mapSize * tileHeight)) / tileWidth) -mapSize) *-1;
If the grid is 50 x 50, then mapSize is 50.
But I’m trying to do what I think is called “true” isometric. Where the angles are 60 120 60… eh, anywho, the height is slightly higher. My tiles for instance, are 15 x 8.3.
…So, any ideas on how the formula would look like? How do I translate the mouse position to the current tiles row and column it is over.
Just to be clear, my “north” is upper right side.
Like this:
[[0, 1, 2],
[3, 4, 5],
[6, 7, 8]]
And then rotates clockwise 45 degrees.