Draggable / ThrowProps dom hit detection

[waysideco 0 Likes (Newbie)]

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? 

[OSUblake 9,990 Likes (Superhero)]

I think Diaco may be working on something that is probably going to be easier to understand, but this demo sort of has the mechanics you are looking for.

 

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

[Diaco 1,948 Likes (Superhero)]

Hi waysideco 

 

sorry for late reply , i've working on a Demo  .

 

in addition to Blake's awesome demo , pls check this out : 

See the Pen wKWVmG by MAW (@MAW) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Haha! That's awesome!!! 

[Diaco 1,948 Likes (Superhero)]

thanks dude , personally love Crazy mode 

[OSUblake 9,990 Likes (Superhero)]

Yeah, that's pretty intense! I wouldn't be surprised if it caused some people to go into a seizure. 

 

https://en.wikipedia.org/wiki/Photosensitive_epilepsy

[Diaco 1,948 Likes (Superhero)]

good point , i've added a warning text .

[waysideco 0 Likes (Newbie)]

Those codepens are awesome guys! Thanks. 

[waysideco 0 Likes (Newbie)]

Do you guys know if one can do more complex "bounds", I was trying to think of a way to use an svg shape as the bounds area..

 

[OSUblake 9,990 Likes (Superhero)]

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.

[Diaco 1,948 Likes (Superhero)]

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 .

[OSUblake 9,990 Likes (Superhero)]

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