HTML5 Canvas ScreenToIso
I am try create Isometric in HTML5 Canvas, but don't know how to convert HTML5 Canva开发者_如何学Pythons Screen coordinates to Isometric coordinates. My code now is:
var mouseX = 0; var mouseY = 0; function mouseCheck(event) { mouseX = event.pageX; mouseY = event.pageY; }
And I get Canvas coordinates. But how to convert this coordinates to Isometric coordinates? If I am something like use 16x16 tiles.
Thanks for everyone reply for this question and sorry for my English language.
If you want to translate standard coords to isometric - you should use such formulas (cos(30) = 0.866 & sin(30) = 0.5 are factors to use 30 degrees isometric projection)
xi = (y + x) * 0.866;
yi = (y - x) * 0.5;
So, if you want to do back translate - we can find our formula:
y = yi + xi / (0.866 * 2);
x = y - 2 * yi;
E.G. We have coords [3, 1]
and wants to find isometric coords, so it is ease:
xi = (1 + 3) * 0.866 = 3.464;
yi = (1 - 3) * 0.5 = -1;
So, view coords of this cell is [3.464, -1]
E.G User clicked at [5.2, 1]
. It is ease to count new value:
y = 1 + 5.2 / 1.732 = 4;
x = 4 - 2 * 1 = 2;
So, the clicked sell is [4, 2]
Example via LibCanvas: http://libcanvas.github.com/games/isometric/
精彩评论