Drop target detection using physics engine (Matter.js, Drag & Drop)

Demo:
DropTargetDetectionUsingMatter.html

Source:
DropTargetDetectionUsingMatter.hype.zip

Have fun! Should be great for games!

PS: This is about the detection and works with multiple irregular shapes by setting them to a static physics object. This technique is pretty simple and works very well as is and the above example is mainly there to demonstrate the function hypeDocument.queryIntersections this detection is based on.


Update (2021/April): In this thread there is also now a generic handler version with source see:


7 Likes

This idea will undergo another rewrite soon. Meanwhile also check a similar idea without using a dynamic Physics object I recently posted here (only needs static objects):

And also make sure to check out the great drag'n'drop enabler by Hans. It uses modern approaches and the intersection observer API. As the latter is still not supported in Safari you do need a polyfill but it's the faster technology and is the future specially when browser support is complete.

That said, the challenge of this thread is the focus on the Matter.js engine and to find a solution that works with odd shapes (made with the vector tool) using the built-in capabilities of Hype. Also, I'll hopefully be digging into some other collision detection features that go beyond simple overlapping.

3 Likes

There is a better way mentioned in the previous post and it is now merged with this thread. The initial source file had a subtle flaw, if you check cautiously you had realized that the initial code didn't fire if the drop didn't hit on an edge. So, I reworked the approach favoring the following:

Update: I fixed this thread to work with the new approach … so you're safe to use it. As it uses static physics elements, please check the above linked thread if you want to remove those elements from the usual physics' engine collisions (see hypeDocument.disablePhysicsCollisions)

1 Like

How can I play a sound when the drag touches the obstacles? Thanks

Here is a version with a generic handler allowing for the following parameter:

data-drop-target
This is a selector for the drop target region (static matter shape)

data-drop-snap-target
If this selector is set and there is a drop target hit success the element will snap to the position of the first element that matches this selector in the scene (top, left)

data-drop-fail-reset
If this is set to a value (like true) the element will snap back to the position the drag started from when a drop fail occurs

data-drop-success-lock
If this is set to a value (like true) this setting remove the ability to drag the element again once it was successfully dropped once


data-drop-success-behavior
This custom behavior is fired on a drop success (meaning if the target is hit)

data-drop-fail-behavior
This custom behavior is fired on a drop fail (meaning if the target is missed)

data-drop-snap-behavior
This custom behavior is fired after the snap complete (meaning after the target moved to the snap target if one is defined)

data-drag-start-behavior
This custom behavior is fired when the drag begins

data-drag-move-behavior
This custom behavior is fired constantly while the drag occurs

data-drag-end-behavior
This custom behavior is fired when the drag ends (despite fail or success)

Download:
↑ look at project

2 Likes

4 posts were split to a new topic: Scuba game with Matter collision detection

I just updated the example and download:

  • fixed a bug for convex shapes
  • added the possibility to trigger multiple custom behaviors
    Just define multiple custom behavior in a comma separated list (white spaces are trimmed)
  • multiple collision targets can be defined using a single selector
    if you set data-drop-snap-target to dropzone each element with the class dropzone will be tested against, not only giving you irregular shapes but also multiple shapes as targets/triggers.
  • collision is ignored if the trigger is hidden (or nested in a hidden group)
  • collision is ignored if collision target is hidden (or nested in a hidden group)

↑ look at project

3 Likes

Here is another version that also detects intersection start and end. It also provides function callbacks mixed in with custom behavior. Some data attributes have been refactored, but you can see them in the example and code. As this is a tweak I am not replacing the version in the first post, for now. But still wanted to post it here for people to use and check out:
DropTargetDetectionAndIntersectionUsingMatter.hype.zip (52,3 KB)

3 Likes

Hi MaxZieb good day!

Thanks for all your work!

I am trying to use this hype template but I can't figure out where the additional things are.
How am I able to add a trigger function on "data-drag-move-behavior" and the rest of the additional custom behavior?

data-drop-success-behavior
This custom behavior is fired on a drop success (meaning if the target is hit)

data-drop-fail-behavior
This custom behavior is fired on a drop fail (meaning if the target is missed)

data-drop-snap-behavior
This custom behavior is fired after the snap complete (meaning after the target moved to the snap target if one is defined)

data-drag-start-behavior
This custom behavior is fired when the drag begins

data-drag-move-behavior
This custom behavior is fired constantly while the drag occurs

data-drag-end-behavior
This custom behavior is fired when the drag ends (despite fail or success)

Thanks again.

Sorry for the delay, pretty busy.