Intersection detection using Matter.js in Tumult Hype 4

The function hypeDocument.queryIntersections extends the Hype API with a function to check intersections between a source element (Node) and a list of target elements (NodeList) using Physics elements in Hype 4.

Using physics and intersection detection at once

So, there is an elephant in the room. What about using this approach when one is already using the physics engine for something else and the static elements needed for intersection detection are interacting with the game in unwanted ways. There is a simple solution called an collisionFilter in Matter.js and it can be used to remove the elements from the physics simulation Hype is running while still having them active for intersection detection and other forms of queries (like point, ray etc.).

The following function removes all elements from the regular scope of the Hype physics interaction:

One interesting by product of intersection detection is that it works solely in the Matter-Engine. Hence, if you disable the visibility (display:none) it still works for intersection detection. If in your game logic the visibility status is to be considered just filter the elements returned from the intersection check.

This is a screenshot from the simple example illustrating intersection detection on different shapes

Here is an example file made with Tumult Hype 4 and make sure to check the forum thread on this topic for further developments.