Sign in to follow this  
thefollower

Mouse over sprite detection with zoom

Recommended Posts

thefollower    354

Hello,

 

I have a basic script which checks if the mouse is hovering over a sprite on my canvas. I have zoom function and this functionality works fine when the zoom is at default (1.0).

But if the zoom is any other number the detection is wrong. The issue here is that if a sprite is in the north east direction from center and you zoom in, the sprite moves north east, and for sprites in the south west they move south west for zooming in.

So i can't simply just adjust the numbers by scale (which is what i currently have). But I do not know how to solve this problem.

This is my function that does the checking:

 

function check(e,element){
    var data    = {};
        // get mouse position relative to the element
        data.x  = e.pageX - element.offsetLeft; 
        data.y  = e.pageY - element.offsetTop;

        // el.scale = float (0.0 to 3.0)
        data.x /= el.scale;
        data.y /= el.scale;

        // default object size is 20 pixels (a square) 
        var objSize  = 20 * el.scale; 

    for(var i = 0; i < objs.length; i++){ //check all objects
        var x        = objs[i].x / el.scale;
        var y        = objs[i].y / el.scale;

            if(data.x > x - objSize && 
               data.x < x + objSize && 
               data.y > y - objSize && 
               data.y < y + objSize){
                otpt.innerHTML = true; //mouse is over an object
                break;
            }else{ 
                otpt.innerHTML = false; //not over an object
            }
    }
}

And a working example of the problem I am experiencing is here: http://jsfiddle.net/ejp9bphm/ (zoom in above or below 1.0 experience the issue).

Hope you can help explain how i solve this problem.

Edited by thefollower

Share this post


Link to post
Share on other sites
Wyrframe    2426

You're doing a few things wonky; first, you're mixing world-space and screen-space coordinates all over the place. Second, on lines 42-45 (the condition of the hit-test if statement), you're treating X,Y as midpoints of your object, even though lines 39-40 are clearly trying to make X,Y be the top-left coordinates. Because of this, objects are treated as being "hit" if the mouse is within 20 units above and/or left of the square drawn for each object, as well as within the object's actual drawn bounds.

 

To fix these:

 

When drawing, transform object coordinates from world space (their actual X,Y,size, etc) to screen space (their on-screen position, size, etc); then draw the screen-space object.

 

When hit-testing, transform the screen-space mouse coordinates into a world space sample point coordinate, and then hit-test against objects strictly in world space using that coordinate.

 

Finally, choose whether the objects' X,Y are their top-left or their center, and then be consistent. To test a point for being inside a square with a top-left at X,Y, you want to test (pt.x >= obj.x && pt.y >= obj.y && pt.x < obj.x+size && pt.y < obj.y+size).

Share this post


Link to post
Share on other sites
thefollower    354

Finally, choose whether the objects' X,Y are their top-left or their center, and then be consistent. To test a point for being inside a square with a top-left at X,Y, you want to test (pt.x >= obj.x && pt.y >= obj.y && pt.x < obj.x+size && pt.y < obj.y+size).

This is something that i have been a bit confused with what is best. I currently have a given x,y then when i draw i shift the sprite by it's with and height by half. So the middle of the sprite is it's x:y. But then i get confused on how i check for collision.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this