Isometric map rendering

[Gugis]

So i need this thing for my tiled based game map editor. There is isometric diamond-shape map with 1000x1000 tiles and i need to get a tile which is nearest to the specific point. More exactly i need to find very first tile in upper left corner of screen. And i need to get it without itterations, because it's too expensive with such amount of tiles. I wonder if there's other way to find that tile.

And there's how my grid looks like:

var grid = [];

for(var i = 0; i < 1000; i++)
{
    var row = [];
    
    for(var j = 0; j < 1000; j++)
    {
        var posX = (j - i) * 32;
        var posY = (j + i) * 16;
        var sprite = this.game.add.sprite(posX, posY, grass);
        row.push(sprite);
    }
    
    grid.push(row);
}

Thanks

[mmcs]

Hi Gugis,

If you only need to find the upper left tile of your isometric map then according to the way you generate it by intuition it will be the (0, 1000).

If you need to hit test a point to a tile, the fastest way i know off is to use the barycentric coordinate system (https://en.wikipedia.org/wiki/Barycentric_coordinate_system) using the two vectors (-32,16) and (32, 16) created by the tile(0, 0).

Here is a example code (not tested)

function dot(v1, v2) {
  return v1.x * v2.x + v1.y * v2.y;
}

function getTileFromPoint(p) {
  // Compute vectors                
  var vAC = {x:-32, y:16}
  var vAB = {x:32, y:16}
  var vAP = p;

  // Compute dot products
  var dot00 = dot(vAC);
  var dot01 = dot(vAB);
  var dot02 = dot(vAP);
  var dot11 = dot(vAB);
  var dot12 = dot(vAP);

  // Compute barycentric coordinates
  var invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
  var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
  var v = (dot00 * dot12 - dot01 * dot02) * invDenom;

  return {row: Math.floor(u), col: Math.floor(v)};
}

Tell-me if it works.

Regards