Jump to content

Isometric map rendering


Gugis
 Share

Recommended Posts

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);
}

B5kDe.png

Thanks :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...