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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.