Jump to content

Question about Pixi Interaction Manager


Recommended Posts

I've been working with Pixi for quite sometime with V3 up until now. Recently decided it was time to move some code over to version 4 but have been experiencing some issues with interaction events.

I have a button class that originally used both listeners for touch and mouse events to a.) change the visual state of the button on up/down etc b.) perform an action on click/tap. This had been working perfectly fine in version 3 and I could have multiple buttons in a class/container.

Switching to version 4 this caused issues with click/tap area where only the last button to be added to a particular class/container will fire this event. All buttons will fire the up/dwn start/end events still though.

On upon researching I tried converting them all pointer events and still experience the issue. I'm currently using V4.7.0.

I've been trying to pick my way through the PIXI source trying to figure out why the event doesn't fire but it's not clear to me. All I can see is that it doesn't seem to have 'trackingData' when processing the up portion when it does on the one that does fire the tap/click. I've being using Chrome only at this point for Dev tools and tried but desktop and mobile/tablet emulator, both having the same result.

I know interaction was reworked for v4 but can anyone give me any pointers as to why those changes have affected my code thus. I don't understand well enough the changes to be able to find the right place to look for a solution.

I can't provide the exact code at the moment as it's not a personal project and corporate rules prevent me from doing so. But can give an overview.

The class is structured with a parent container (essentially a stage) to add class container to and a class container to display the current button state (current button state can be a graphic, sprite, animation). The current button state container has all the interaction events attached to it. These call binded functions within the class which either change the current state sprite or call a function on click/tap that has been passed in the settings on instantiation (event data is sent to this function). As stated if the event is fired, which it is on the last button added, the function is fired but event doesn't trigger for click/tap on the others. All other events fire normally on each button.

I've possibly just overlooked something simple as you get to that 'wood for the trees' state. Any thoughts, suggestions would be grateful.

Link to comment
Share on other sites

That's main function in interaction: https://github.com/pixijs/pixi.js/blob/dev/src/interaction/InteractionManager.js#L990

Its ok to override it, people do it . https://github.com/pixijs/pixi.js/wiki/v4-Gotchas#interaction shows override for another function.

Take your simple demo, debug processInteractive of specific event, find whats wrong, either rewrite processInteractive either find a way to work with vanilla.


Link to comment
Share on other sites

Thanks @ivan.popelyshev Still picking my way through it, can see an issue in the tracking data only so far. Don't really want to be in a position where we have to override anything but if have to guess we will. Not found the root of the issue yet. I have looked at the sections you suggested.

When processing the pointer down, on buttons that don't work, 1 out 4 of the buttons doesn't have any tracking data and when it processes the pointer up it then only had data for the last rendered button (which is processed first) and that has the flag 2. 

When processing the pointer down, on buttons that do work, it has tracking data for all buttons and when it processes the pointer up you can still see tracking data for all of them. The last rendered btn has a flag of 3 and the rest have flag of 1. Can't seem to track down the flag of 3 and what that represents, guessing I've just overlooked it, as the default flags are 0, 1, 2 and 4 are they not?

I'll keep plugging at it and hope I can follow it through to root issue.

Link to comment
Share on other sites

So, what I do for my button class is something like this

this.on( 'pointerdown', this._onPointerDown, this );
PIXI.renderer.plugins.interaction.on( 'pointerup', this._onPointerUp, this );

So, the down part looks for just the button being pressed down. But the up bit looks at the interaction manager global 'up' event. This way, if someone presses down on a button, then moves the mouse away from the button and releases, the 'up' still gets fired for this button.

A quick overview of the pointdown and pointerup functions

_onPointerDown( event ) {
	if ( !this._isDown && event.data.isPrimary ) {
		this._isDown = true;

		// do down stuff

_onPointerUp( event ) {
	if ( this._isDown && event.data.isPrimary ) {
		this._isDown = false;
		// do up stuff

So first thing we do is track ourselves if that button itself is down or up... that way on a global up, if the button is not down, nothing happens

The other thing is we check against 'isPrimary', so we're looking at the primary mouse button, or the first touch event. You don't have to have that, and it stops a 2nd touch effecting a button press... but restricting it can make your life easier!

Link to comment
Share on other sites

@themoonrat @ivan.popelyshev I have managed to add a 'fix' into my version of the library that I'm using. I made one minor addition to the processPointerUp in the condition that deletes the trackedPointers based on id. It now appears to work as expected. Yet to see if this has any other implications, here's hoping not. But will come back if there still ends up being a problem. Thank you for taking the time to help and I appreciate the advice.

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