Jump to content

Question: Interacting with paths?


Recommended Posts

Hello.  I am very new to PIXI, so please bare with me.

I have been in search of good API for my game.  The game uses a map which contains tiled images as well as a bunch of path on the screen.  Think Google Map, except a lot simpler.

I was able to use PIXI to implement the map background where it scrolls and loads tiled map images as needed.

I was also able to draw paths onto the map.

Now the problem is that I cannot figure out how to interact with those paths.

I used PIXI.Graphics to create and draw a path.  I applied mouse events to it.  But no event is fired.

I was able to get the even to fire if I made the graphic into closed path will fill.  But unfortunately that will not work for my purpose.

Is there any way to accomplish this?  Any way to interact with just a path (could be complex paths with multiple segments and/or curves) rather than enclosing shape?

Thanks in advance!

Link to comment
Share on other sites

If the path is not closed, then there is no theoretical bounds. If there is no bounds, then you can't perform a hit test, thus you don't know when it's being clicked. 

Without seeing any code, or an example demo.. I think I would suggest drawing rectangles along your path, above your graphics, and making it alpha 0; Then you can use these events to manipulate your graphics in what ever way you are doing.

Alternatively, you could always use a mask. So close off your graphics, use the input there, but apply a mask to it doesn't look like it's closed? Not sure if it will work but again with no screenshot, little to go on.

Or, if you wanted to write something more complex, but flexible.. you could just make the entire container interactive, and listen on the mouse / touch events. then get the global positions and manually calculate what the user is doing and use this to interact with your path. Not sure if this helps, but hopefully it's in the right direction.

Link to comment
Share on other sites

Thanks megmut.

I had thought about similar ideas to some of your suggestions.  I was hoping that there may be different, easier solutions.  I actually peaked into Pixi.js code, and I see that it explicitly specify that the click event is not fired unless the Graphics object is a closed shape.

Would it be fairly easy to draw shapes along the path using PIXI.mesh.Rope object?  Is that the right way to use it?  I haven't tried it yet, because I only found that object literary about an hour ago.

Also while researching, I found this link about animating an object along a path.  I am hoping that I can come up with some kind of hit detection code along a path using those functions as templates, which I think is basically your final suggestion.  So if I need to detect a click, I could draw a circle or square centering that click point, then see if that shape makes a contact with paths.



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...