Jump to content
Search Community

Draggable / ThrowProps dom hit detection

waysideco test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Guys, I'm trying to make a little hockey game using the draggable/throwprops plugins. I get that you can do hit detection while a draggable element(puck) is being dragged. But I need to do a hit detection on an object that is thrown (check to see if the puck has hit the posts, or is in the net etc). Any advice on where to start? 

Link to comment
Share on other sites

That'd be real easy. That's basically two rectangles, so you would do a hit test on those two little nubs in addition to the bounds of the walls. An even easier way to do hit detection with complex shapes is to draw your bounds on a hidden canvas using a distinct color. When it comes times to check for hit detection, you get the coordinates from your object and check what color the pixel is at that exact coordinate on the hidden canvas. If its the color you set, it means it's a hit.

  • Like 1
Link to comment
Share on other sites

my friend , this is your honor :)


we really have to focus on GSAP api + some times help to start / conception ( not doing projects ) , absolutely it's doable . you just need to define conditions in your check bounds function for those two rectangles too .


pls start coding and be sure we will be happy to help you if you have any problem with GSAP api .

  • Like 1
Link to comment
Share on other sites

If that canvas description confused you, I made a very simple example of how it works. Your shape is simple enough that there's probably no benefit of doing this, but I'll explain it in case anybody else is looking to do something like this.


I made the canvas visible so you can see it, but normally it would be hidden. I'm also checking a section of pixels the size of the block to see if there is any color value at all. Normally you would do a point a time and check for a specific color. Doing a large chunk of pixels like I did is expensive. The 60x60 area I test for on each drag will iterate over an array of 3,600 pixels if there's no collision. 


Handling collisions will also be a little more involved because Draggable's liveSnap doesn't handle x and y values at the same time, so it's hard to stop dragging right at an edge. Probably best if you store the last x/y positions.


This technique works well for large stationary objects, and is used in a lot of game engines. You just have to make sure your coordinate space and scaling are the same between the SVG and canvas, which can get tricky if you have a viewBox on the SVG.


See the Pen YypwzL by osublake (@osublake) on CodePen

  • Like 2
Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...