3 Replies Latest reply on May 30, 2017 8:34 AM by ClayUUID

    hitTest Sensitivity Issues (HTML5 Canvas)




      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)){





      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.



        • 1. Re: hitTest Sensitivity Issues (HTML5 Canvas)
          kglad Adobe Community Professional & MVP

          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.

          • 2. Re: hitTest Sensitivity Issues (HTML5 Canvas)
            Colin Holgate MVP & Adobe Community Professional

            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.

            • 3. Re: hitTest Sensitivity Issues (HTML5 Canvas)
              ClayUUID Adobe Community Professional

              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.