Jump to content

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,


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






Link to comment
Share on other sites


  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.




Link to comment
Share on other sites

  • 2 weeks later...
On 1/7/2019 at 10:28 AM, Tucks said:


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);
Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...