Isometric - Pathfinding Framework « EasyStar JS » doesn’t work for me

[Marimonroe]

Hello guys, 

Sorry for my english, i’m not a english native speaker. I’m tryng to make my own Habbo Retro in HTML5 to train my web skills, I have successfully created the map with a 2D array but now i’m stuck on the pathfinding.

here’s my class for rendering the floor : 

class Point {
  constructor(x, y){
    this.x = x;
    this.y = y;
  }
}

var room = document.getElementById('room');

var tileWidth = 32;
var tileHeight = 32;

var data = [
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0]
]

function cartesianToIso(point){
  
  var temPt = new Point();
  
  temPt.x = point.x - point.y;
  temPt.y = (point.x + point.y) / 2;
  
  return(temPt);
}

function DrawMap(){
  
  for(var x = 0; x < data.length; x++){
    
    for(var y = 0; y < data[x].length; y++){
      
      var point = new Point();
      
      point.x = x * tileWidth;
      point.y = y * tileHeight;
      
      var iso = cartesianToIso(point);
            
      var offset = { x: tileWidth / 2, y: tileHeight / 2 };
      
      console.log('Cartesian X : ' + x + " Y : " + y);
      console.log('Isometric X : ' + iso.x + " Y : " + iso.y);
      console.log('-------------------------------------------------');
      
      DrawTile(iso.x, iso.y);
    }
  }
}

function DrawTile(x, y){
  
  var element = document.createElement('div');
  
  element.className = "tile floor";
  
  element.style.left = x + "px";
  element.style.top = y + "px";
  
  room.appendChild(element);
}

this.DrawMap();

 And here is the « Pathfinding » part :

var easystar = new EasyStar.js();

easystar.setGrid(data);
easystar.setAcceptableTiles([0]);
easystar.calculate();

easystar.findPath(1, 1, 1, 2, function(path){
  
  if(path == null){
    console.log('path not found');
  }else {
    console.log('path found');
    console.log(path);
  }
})

1:1 is the starting col and row according to the grid and 1:2 is the ending. When i run my script, it doesn’t do a thing, no error, no success, nothing.

When i replace the col and row coord by x/y position like : 0, 0 (starting) 0, -32 (ending), it just give me an error : 

Error: Your start or end point is outside the scope of your grid.
message: "Your start or end point is outside the scope of your grid."

I don’t know what I’am doing wrong, I hope you guys know something that will help me. 

Best regards.

[Truelion07]

I see you're using the DOM, would you like to collab on a retro RPG?

[Todorus]

Looking at the documentation and your code, I'd say it's because you're calling calculate, before findPath. I guess then the starting positions are all null, and that's why you see that error. Easystar can't interpret that location.

So it would look something like this:

easystar.setGrid(data);
easystar.setAcceptableTiles([0]);
easystar.findPath(1, 1, 1, 2, function(path){
  
  if(path == null){
    console.log('path not found');
  }else {
    console.log('path found');
    console.log(path);
  }
});

easystar.calculate();