Tucks

Interaction Manager hitTest Example

Recommended Posts

Hello all,

  I am relatitvely new to PixiJS and indeed this is my first post to the forum.

I'm aware that PIXI does not have the ability to perform collision detection and that to do so you need to write your own.  For instance a bounding box test is relatively simple.

I'm looking for an example regarding the hitTest method of the Interaction Manager. (http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html#hitTest)

Can anyone point me at a suitable JSFiddle or similar?

Best regards,

Jez

Share this post


Link to post
Share on other sites

Hi Jon,

  Thank you for the response - it's really appreciated.  That is indeed a very natty demo and makes the core concepts of collision detection very obvious and visually understandable.

I can see where I might use something similar in my application.  Your fiddle should probably make an 'advanced examples' section of PixiJS 🙂

To give a little overview of my use case:

  • I have a graphic from which I drag a line out from to another graphic (there are N other graphics)
  • From reading the Pixi API docs, I was looking to see if I could hitTest the interactive components in the scene graph with the point of the current mouse location whilst in dragMove(), utilising the Interaction Manager.
  • If hit, then 'glue_the_line()' to the other graphic

Perhaps, reading between the lines, I should not put such logic in the dragMove() function of the graphic, but instead in the main loop, continually calling hitTest every loop.

However, this feels a bit heavy.

Thoughts?

Best,

Jez

 

 

Share this post


Link to post
Share on other sites

Hi

  If anyone is needing to implement what I specifically needed, then you can do so as follows (with reference to the excellent https://github.com/kittykatattack/learningPixi ) :

In the gameLoop() function add code alike so enact the hitTest.

 

function gameLoop(delta) {

    // obtain the position of the mouse on the stage
    let mousePosition = app.renderer.plugins.interaction.mouse.global;

    let hit;
    if (hit = app.renderer.plugins.interaction.hitTest(mousePosition)) {
        // hit
        if (hit instanceof MyClass) {
     
            // insert logic
        }
    }
}

    

You should also look at Jon's collision example above, which is superb.

Best,

 

Jez

Share this post


Link to post
Share on other sites
On 1/7/2019 at 10:28 AM, Tucks said:

However

you can also take a look to  emit
example here from my scroll event.
suppose here you already create your own event attache to a display objet.

sprite.on('zoomTileLibs', wheelInLibs );

 

for this special context i use 

document.addEventListener('wheel', wheel_Editor);

but is not necessary.
 

const found = $mouse.interaction.hitTest(mousePosition);
// Dispatch scroll event
if (found)  {
      return found.emit('zoomTileLibs', event);
};

Share this post


Link to post
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.