开发者

HTML5 Canvas ScreenToIso

开发者 https://www.devze.com 2023-03-23 16:41 出处:网络
I am try create Isometric in HTML5 Canvas, but don\'t know how to convert HTML5 Canva开发者_如何学Pythons Screen coordinates to Isometric coordinates.

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/

0

精彩评论

暂无评论...
验证码 换一张
取 消