Jump to content

Array of objects at xy position (hitTest, processInteractive)


Recommended Posts

If I have multiple objects under the same root container (like, two overlapping graphic descendants of stage), how can I hit test a point to retrieve all objects in the scene graph?

pixi.png.3d5330b9d961b8b08b68145a82eefa7f.png

Pixi.js tutorials show the `hitTest()` method, which returns the first interactive object
https://api.pixijs.io/tutorials/_basics/interaction.html

// Find out what interactive object lies at [100, 50]
let globalPt = new PIXI.Point(100,50);
let obj = app.renderer.plugins.interaction.hitTest(globalPt);

 

Seems like the `processInteractive()` function that `hitTest()` uses should work - I can't find many / any examples of how to use `processInteractive()`.

Like here, this traversal wouldn't work since both objects are under the same `root`.

processInteractive(hitTestEvent, root, null, true);

 

Lot of discussions regarding this over the years, but looks like `processInteractive` is now the modern approach for this?  Think it'd work if I could traverse down through roots, but I'm not sure I understand at the same root.

 

As an aside - I have a lot of bulk scene graph operations I'd like to perform, and more examples / tutorials of `processInteractive` would be super awesome.

 

Link to post
Share on other sites

@ivan.popelyshev Sorry, little confused here.

Are there any examples of how to implement a custom TreeSearch?

If I set `renderer.plugins.interaction.search = myCustomSearch` then I would replace the built-in search, right?  `InteractionManager` has a `processInteractive` that is using that search, right?

https://github.com/pixijs/pixijs/blob/7703aa1d66c1116c2a771d6e8f69a720619e979a/packages/interaction/src/InteractionManager.ts#L1252

For a custom `TreeSearch`, I'd need to implement a `findHit()`? 

There's no interface on that class.

Built-in functionality seems there, but not understanding how to combine this and interaction events; or, what effect it would have.  Perhaps instead I should implement my own depth first / breadth first traversal functions and test point coordinates against bounds in a global space.

Link to post
Share on other sites

> Are there any examples of how to implement a custom TreeSearch?

Ctrl+c, ctrl+v, change it.

> Perhaps instead I should implement my own depth first / breadth first traversal functions and test point coordinates against bounds in a global space.

That's basically your own TreeSearch, whats the problem?

Link to post
Share on other sites

Here's pixi default treesearch: https://github.com/pixijs/pixijs/blob/7703aa1d66c1116c2a771d6e8f69a720619e979a/packages/interaction/src/TreeSearch.ts

Here's custom for pixi-layers: https://github.com/pixijs/layers/blob/master/src/LayersTreeSearch.ts

Because pixi-layers hacked processInteractive before, I made a PR to pixi to separate treesearch, so other people can write their own traversal functions.

There's no interface on that class.

It was there even before full conversion to TS. Make a PR :) 

=====

btw, alternative events lib @pixi/events went live, and people are experimenting with it - it has boundaries that can add custom traversal. I havent experiment with it yet.

Edited by ivan.popelyshev
Link to post
Share on other sites
4 hours ago, ivan.popelyshev said:

Ctrl+c, ctrl+v, change it.

Are you referring to this?

On 8/30/2021 at 5:06 AM, ivan.popelyshev said:

renderer.interaction.search = myTreeSearch

That sets the tree search, but isn't really an example of how to create a tree search; or, what ramification setting that has to the framework.

Which, also shouldn't that be: `renderer.plugins.interaction.search`?  I don't think renderer has interaction, does it?

This LayerTreeSearch helps, but yeah - I could craft any functionality to replace pixi, just seemed like there was something built-in here:

     * This function is provides a neat way of crawling through the scene graph and running a
     * specified function on all interactive objects it finds.

Seemingly useful utility, but some examples would prove valuable - hit, or function outside of interaction events.  Maybe I'm reading that wrong.

Link to post
Share on other sites

this comment was added somewhere in pixi v3. 

Seemingly useful utility, but some examples would prove valuable - hit, or function outside of interaction events. 

Someone made processInteracitve. Other people modified it, added comments. I made custom interaction for Layers, then some people made their own custom changes in processInteractive, so I made a PR to main pixi repo to move this thing away to TreeSearch

more excuses for me:

1. I'm not native english speaker

2. Some algorithms are better explained through code, not through documentation.

3. TreeSearch wasnt actually my focus, I just spent hours on it while i spent days on documenting the main lib. For example whole lighting system of youtube.com/watch?v=QjEkszIj7sk works on my layers

I take it, you want to be part of this story. Do you want to sign up to make these examples? ;) Welcome to open-source.
 

======

In case you are paying for pixijs through https://opencollective.com/pixijs/ : you can assign a bounty on " give me more custom interaction examples" and contact bigtimebuddy so he pays your money to whoever will make it

Edited by ivan.popelyshev
Link to post
Share on other sites

My pixi.js contributions are small.

Pixi.js GitHub contributor

pixi-traffic.png.97cb2d63c31f1bb807ed8ce015c256ff.png

Some npm modules, Medium articles, CodePens...

Technical reviewer of two publications regarding Pixi.js from Apress, Springer Science + Business Media including Learn Pixi.js (2015)

https://www.apress.com/us/book/9781484210956

apress.thumb.png.b3d01c5d045a180e5abaa6ec5ba1716c.png

 

Taking my evangelism to the next level might be cool as a direct contributor of documentation.  My focus is more in the 3D space, but I'll consider financially backing this open source initiative.

Per TreeSearch, let me circle back on the specific issues I have with it... though I'm learning towards rolling a depth first or Dijkstra algorithm here.

 

Link to post
Share on other sites

Taking my evangelism to the next level might be cool as a direct contributor of documentation. 

There's https://github.com/pixijs/guides , our next level of docs. Hope you are ready that other people will search for you and ask for more stuff after you do the contribution :) My past commits are haunting me for years

 I'm learning towards rolling a depth first or Dijkstra algorithm here.

Dijkstra.. here? Why and how? Its a tree

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.

×
×
  • Create New...