hitTest Sensitivity Issues (HTML5 Canvas)

[ian42811710]

Hello,

I'm attempting to use the hitTest method to detect when two objects collide, quite similar to a createJS demo (EaselJS/globalToLocal.html at master · CreateJS/EaselJS · GitHub)

I have added 10 objects to a container called 'holder', and I'm attempting to detect when an object called 'player' collides with any children of 'holder'. My code (within a ticker function) is similar to the following:

var h = holder.getNumChildren();

for (var i=0; i<h; i++){

      var child = holder.getChildAt(i)

      var pt = child.localToLocal(0, 0, player);

      if (child.hitTest(pt.x, pt.y)){

           score++;

     }

}

The code works for detecting collision, however the sensitivity of the objects colliding seems very low. By this, I mean that the 'player' object must be colliding with the center of the child object to return true and add to the score. If the player is touching, but not colliding with the center of the child, it will not return true.

Is there anyway to make the objects more sensitive to collision detection so any spot on the objects colliding returns true? It may be worth noting that all objects are constantly moving and do not stay in a specific coordinate.

Thanks

[kglad]

correct, that's the nature of the createjs hittest: you're testing a point against an object.  i don't know of a general shape vs shape hittest.

if you one of your shapes is regular (like an ellipse or rectangle) you can perform a more accurate hittest without too much difficulty, but for general shape vs general shape (afaik), you would need to loop through the pixels.

[Colin Holgate]

Sometimes it's better to measure distance. For example, in a game of pool you can tell if two balls are closer together than the diameter of one ball, faster than it would take to check one shape against the other.

[ClayUUID · Accepted solution]

hitTest isn't intended for object-vs-object collision testing, it's intended for mouse-vs-object testing, which is why it only checks a single pixel. For what you're needing, the fastest and easiest solution would be to use bounding boxes.

Here's a function which seems to work:

function hitBounds(mc1, mc2) {

    var m1x = mc1.x;

    var m1y = mc1.y;

    var m1w = mc1.nominalBounds.width;

    var m1h = mc1.nominalBounds.height;

    var m2x = mc2.x;

    var m2y = mc2.y;

    var m2w = mc2.nominalBounds.width;

    var m2h = mc2.nominalBounds.height;

    return m1x < m2x + m2w &&

        m1x + m1w > m2x &&

        m1y < m2y + m2h &&

        m1y + m1h > m2y;

}

EaselJS - Best way to detect collision - Stack Overflow

Note that if you're checking collision against multiple objects in a loop, this should be integrated into the loop so the player clip setup doesn't have to be run over and over.