Isometric displaying two different images in different positions
- by Canvas
I'm creating a simple Isometric game using HTML5 and Javascript, but I can't seem to get the display to work, at the moment i have 9 tiles that have X and Y positions and the player has a X and Y position, the players X and Y properties are set to 100, and the tiles are as shown
tiles[0] = new Array(3);
tiles[1] = new Array(3);
tiles[2] = new Array(3);
tiles[0][0] = new point2D( 100, 100);
tiles[0][1] = new point2D( 160, 100);
tiles[0][2] = new point2D( 220, 100);
tiles[1][0] = new point2D( 100, 160);
tiles[1][1] = new point2D( 160, 160);
tiles[1][2] = new point2D( 220, 160);
tiles[2][0] = new point2D( 100, 220);
tiles[2][1] = new point2D( 160, 220);
tiles[2][2] = new point2D( 220, 220);
Now I use this method to work out the isometric position
function twoDToIso( point )
{
var cords = point2D;
cords.x = point.x - point.y;
cords.y = (point.x + point.y) / 2;
return cords;
}
point2D is
function point2D( x, y)
{
this.x = x;
this.y = y;
}
Now this i'm sure does work out the correct positioning, but here is the output Isometric view
I just need to move my player position a tiny bit, but is that the best way to display my player position in the right position?
Canvas
P.S. the tile width is 120 and height is 60 and the player is width 30 by height 15
