Madmicra Posted February 5, 2018 Share Posted February 5, 2018 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 5, 2018 Share Posted February 5, 2018 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. Quote Link to comment Share on other sites More sharing options...
Madmicra Posted February 7, 2018 Author Share Posted February 7, 2018 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 7, 2018 Share Posted February 7, 2018 Post a fiddle with minimal demo. I'm not the one who cares about interaction, I care about protocol: I just want to make sure that you have all the data for @themoonrat to work on your issue. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 7, 2018 Share Posted February 7, 2018 His response time differs from mine. In general, interaction issues are hard to debug, they take time to resolve. That's why I pointed to processInteractive function - may be you can just hack something and it works for you. Quote Link to comment Share on other sites More sharing options...
Madmicra Posted February 7, 2018 Author Share Posted February 7, 2018 @ivan.popelyshev ok. I will look into providing a minimal fiddle whilst continuing to debug at my end and yeah they are time consuming and difficult. I am looking into being able to scrape a hack together too but worry about breaking other items by doing it that way. Am sure will figure out some solution eventually. Quote Link to comment Share on other sites More sharing options...
themoonrat Posted February 7, 2018 Share Posted February 7, 2018 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! ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 7, 2018 Share Posted February 7, 2018 Telepathic moonrat ftw! Quote Link to comment Share on other sites More sharing options...
themoonrat Posted February 7, 2018 Share Posted February 7, 2018 Less telepathic, more your friendly neighbourhood @ping Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 7, 2018 Share Posted February 7, 2018 I mean, there is probability that you telepathically identified their problem and then solved it. I call telepathy everything that is done without fiddles Quote Link to comment Share on other sites More sharing options...
Madmicra Posted February 8, 2018 Author Share Posted February 8, 2018 Ok. I haven't had the chance to look at it much in the last day or so due to other deadlines. I will continue to look at it. @themoonrat The up does fire on them all it's the tap/click that doesn't based on the information that is in the up portion. I have a play around with what you have mentioned. Quote Link to comment Share on other sites More sharing options...
Madmicra Posted February 12, 2018 Author Share Posted February 12, 2018 @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. ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.