crossyards code

Dec 12, 2013 at 10:27 PM
I would like to use some features like zoom on mousewheel, move by mouse, hover on field, etc. in my project. It´s implemented in https://www.crossyards.com/. However, there is only minified JS code and when i tried to find solution in that code. I found that there are images on canvas. Is it due to fast drawing? How is it generated?
Is possible to get features meantion above from code or is better to do that again alone.

Thanks for reply
I apologize for maybe stupid question. :(
Dec 13, 2013 at 4:51 AM
I think in cross yards the zoom is actually rendering the canvas, each click. There is a doc on how to zoom but if you want things to look sharp you might have to re draw.

I have some code lying around here that could implement a hover for you, I'm not sure if it's the optimal way to do it but it works.
Coordinator
Dec 13, 2013 at 6:31 AM
The crossyards main page is a totally different cattle of fish because there a huge map is rendered but everything is static. It works pretty much like google maps: image tiles are generated on the server side and then a fast reverse proxy serves these tiles to the browser. Tiles are generated on multiple zoom levels at the same time to compound an image pyramid, where the image tile size on each zoom level is the same, but higher level tiles include more information zoomed into the tile than lower level tiles do. It is not impossible to achieve but it is a lot of work and you have to bear in mind that pre-generated image tiles work only with static scenes. The crossyards main page could not possibly display any dynamics involved.

If you want dynamics involved you need to stick with the canvas solutions. For the move by mouse and hover on field parts you can find examples that will be helpful but for the dynamic zoom part I don't have a working example currently.
Dec 22, 2013 at 12:19 AM
Thanks for reply. I was looking for examples but i did ´t find it. Can i ask where can i find that examples?
RohanDeshpande: can i find somewhere your code?

Thanks
Dec 22, 2013 at 1:37 AM
Coordinator
Dec 22, 2013 at 8:38 AM
You can download the examples from the downloads page.
Feb 28, 2014 at 9:48 PM
Thanks RohanDeshpande.

dobsonl
There is the example for hover on object. But how do I hover a basesheet (It is in the crossyards)? And I meant moving by mouse like in crossyards - drag and drop (change scene center).

Is there any database of sheetengine objects (buildings, characters)? - I like to add my objects and use objects from another people.

Thanks for reply
May 16, 2014 at 11:05 PM
My hover around basesheet look like this:
CLICK on position x,y ->
    var puv = {
        u: x - sheetengine.canvas.offsetLeft,
        v: y - sheetengine.canvas.offsetTop
    };
    var w = sheetengine.canvas.width / 2;
    var h = sheetengine.canvas.height / 2;
    puv.u = (puv.u - w) / zoom + w;
    puv.v = (puv.v - h) / zoom + h;
    var pxy = sheetengine.transforms.inverseTransformPoint({
        u: puv.u + sheetengine.scene.center.u,
        v: puv.v + sheetengine.scene.center.v
    });

   var clickposXY = sheetengine.scene.getYardFromPos(pxy);
    var clickpos = sheetengine.drawing.getPointuv({x: clickposXY.relyardx * sheetengine.scene.tilewidth, y: clickposXY.relyardy * sheetengine.scene.tilewidth, z: 0});
    var ctx = sheetengine.context;
    ctx.save();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#FFF';
    var w = 3 * sheetengine.scene.tilewidth / 2;
    var poly = [clickpos.u - w / 2, clickpos.v,
        clickpos.u, clickpos.v + w / 4,
        clickpos.u + w / 2, clickpos.v,
       clickpos.u, clickpos.v - w / 4];
    ctx.beginPath();
    ctx.moveTo(poly[0], poly[1]);
    for (var item = 2; item < poly.length - 1; item += 2) {
        ctx.lineTo(poly[item], poly[item + 1])
    }
    ctx.closePath();
    ctx.stroke();
    ctx.restore();