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

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?


P.S. the tile width is 120 and height is 60 and the player is width 30 by height 15


1 Answer 1


Hrm, I don't know if this would manifest itself as a huge problem given the simplicity of the objects, but shouldn't

var cords = point2D;

be something like

var cords = new point2D();

I think you're actually returning the constructor function with the attribute attached each time which is a static thing, rather than an instance thing.

In terms of coordinates and isometric transforms, i'd encourage a read through http://www.wildbunny.co.uk/blog/2011/03/27/isometric-coordinate-systems-the-modern-way/ which has some pretty simple transformation logic (to/from screen space/grid space).

  • \$\begingroup\$ Cool I will give that a look, but also i was thinking trying to draw the player via the top point, so basically we get player.x + player.width/2 and + tile.width/2. This is because images are drawn via the top right corner (0,0). But I will take a look at that link later and get back to you :) \$\endgroup\$
    – Canvas
    Commented Oct 17, 2013 at 15:22

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .