Skip to main content
I
ian42811710
Participant
May 30, 2017
Answered

hitTest Sensitivity Issues (HTML5 Canvas)

  • May 30, 2017
  • 3 replies
  • 2605 views

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

    This topic has been closed for replies.
    Correct answer ClayUUID

    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.

    3 replies

    C
    ClayUUIDCorrect answer
    Legend
    May 30, 2017

    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.

    Colin Holgate
    Colin Holgate
    Inspiring
    May 30, 2017

    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.

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    May 30, 2017

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices