Interaction Manager hitTest Example

[Tucks]

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

[jonforum]

is this can help you ? 
https://codepen.io/osublake/pen/eMvZmo

[Tucks]

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

 

 

[Tucks]

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

[jonforum]

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);

};