Browse Source

Calculate tile coordinate based on given position on the canvas

master
Sven Slootweg 9 years ago
parent
commit
4966040cca
  1. 56
      map_isometric.js

56
map_isometric.js

@ -6,11 +6,26 @@ if(RadiumEngine !== undefined)
this.tile_height = 64;
this.width = 6;
this.height = 6;
this.mouse_tile_x = 0;
this.mouse_tile_y = 0;
this.mouse_over = false;
this.fill_screen = false;
this.canvas = canvas
this.context = canvas.getContext("2d");
$(this.canvas).bind('click', {'self': this}, function(event){
self = event.data.self;
var rect = self.canvas.getBoundingClientRect();
var root = document.documentElement;
var mouse_x = event.clientX - rect.top - root.scrollTop;
var mouse_y = event.clientY - rect.left - root.scrollLeft;
var coords = event.data.self.TileFromPosition(mouse_x, mouse_y);
alert("You clicked the tile at map coordinate " + coords.x + "," + coords.y + "!");
});
var Configure = this.Configure = function(tile_width, tile_height)
{
this.tile_width = tile_width;
@ -57,7 +72,6 @@ if(RadiumEngine !== undefined)
var Redraw = this.Redraw = function()
{
console.log(this)
for(var i = 0; i < this.height; i++)
{
for(var r = 0; r < this.width; r++)
@ -139,17 +153,22 @@ if(RadiumEngine !== undefined)
this.context.stroke();
}
this.GetBasePoint = function()
{
return new RadiumEngine.Point((this.width * this.tile_width) / 2, 0);
}
this.GetTileOrigin = function(tile_x, tile_y)
{
/* Determine base point (0,0) of the isometric diamond. */
base_point = new RadiumEngine.Point((this.width * this.tile_width) / 2, 0);
console.log(base_point);
base_point = this.GetBasePoint();
/* Determine offset for determining starting point for the current row (tile_y coordinate). */
row_offset = new RadiumEngine.Point(0 - ((this.tile_width / 2) * tile_y), (this.tile_height / 2) * tile_y);
console.log(row_offset);
/* Determine specific offset of the specified tile_x coordinate on the tile_y row. */
tile_offset = new RadiumEngine.Point((this.tile_width / 2) * tile_x, (this.tile_height / 2) * tile_x);
console.log(tile_offset);
/* Return the sum of the above to determine the actual tile position on the canvas. */
return base_point.Add(row_offset, tile_offset);
}
@ -160,5 +179,32 @@ if(RadiumEngine !== undefined)
return origin.Add(new RadiumEngine.Point(0 - (this.tile_width / 2), 0));
}
this.TileFromPosition = function(x, y)
{
p = new RadiumEngine.Point(x, y);
a = self.GetBasePoint();
b = a.Add(new RadiumEngine.Point(0 - (this.tile_width / 2), this.tile_height / 2));
c = a.Add(new RadiumEngine.Point(this.tile_width / 2, this.tile_height / 2));
/* Compute vectors. */
v0 = c.Subtract(a);
v1 = b.Subtract(a);
v2 = p.Subtract(a);
/* Compute dot products. */
dot00 = RadiumEngine.dot_product([v0.x, v0.y], [v0.x, v0.y]);
dot01 = RadiumEngine.dot_product([v0.x, v0.y], [v1.x, v1.y]);
dot02 = RadiumEngine.dot_product([v0.x, v0.y], [v2.x, v2.y]);
dot11 = RadiumEngine.dot_product([v1.x, v1.y], [v1.x, v1.y]);
dot12 = RadiumEngine.dot_product([v1.x, v1.y], [v2.x, v2.y]);
/* Compute tile. */
inv_denom = 1 / (dot00 * dot11 - dot01 * dot01);
tile_x = (dot11 * dot02 - dot01 * dot12) * inv_denom;
tile_y = (dot00 * dot12 - dot01 * dot02) * inv_denom;
return new RadiumEngine.Point(Math.floor(tile_x), Math.floor(tile_y));
}
}
}
Loading…
Cancel
Save