FKL34TI5T5

How does the .on('pointerdown') listener work? [Possible Bug]

Recommended Posts

button.on('pointerdown', () => {buttonPressed.setAlpha(1);button.setAlpha(0);})
buttonPressed.on('pointerup', () => {buttonPressed.setAlpha(0);button.setAlpha(1);})
buttonPressed.on('pointerout', () => {button.setAlpha(1);buttonPressed.setAlpha(0);})

The above code toggles a button with two sprites, one for the button up, and one when it is pressed. The problem is that after the first press, if you do not move your cursor out of the sprite, you have to click twice. If you keep it there, then you have to click twice for each event. It's very weird.

The only workaround I have found is to duplicate the buttonPressed.on('pointerup', listener and call it button. This stops you from having to click twice, but alas you only see the buttonPressed sprite once every two clicks. Why doesn't it work unless I take the cursor outside of the sprite? And why would it work only on the second click?

Also, if I get rid of the pointerout event it works fine, except if it is released outisde the button, then it is stuck. pointerupoutside doesn't seem to do anything at all. I'm on the current version.

 

Edit: It will work if you have any mouse movement in between clicks, but it fails if you keep it in the same spot. I was mistaken about the boundaries having any effect on the issue. It's only when you don't move your mouse.

Edited by FKL34TI5T5

Share this post


Link to post
Share on other sites

Are the buttons positioned over the top of each other? Because a button with alpha zero is still a button that will receive pointer events.

A `pointerup` event is not the same thing as a `pointerout` event and will not trigger an out state.

`pointerupoutside` is for detecting pointer up events outside of the game canvas, not a button.

Share this post


Link to post
Share on other sites

Yes, exactly on top of each other. I tried to mess with the depth, setting a small alpha, and also removing interactivity, but it seems like there is an issue with the mouse remaining in the same exact place. I am now looking for ways to force a cursor move as a workaround, but not sure yet on mobile.
 

564099025_ScreenShot2020-01-08at6_56_01PM.png.6f83544c055fba58ec04a800ac2341b3.png

 

Note the pointerdown events in a row. That represents two clicks. So when you keep it in the same place only pointerdown fires until you click again. It should be in order always. If you move your mouse between clicks, even one pixel, then there is no issue.

Edited by FKL34TI5T5

Share this post


Link to post
Share on other sites

I'm leaning towards that it is a bug. I will need to look at library. I think what is happening is that if you are not moving the mouse, the listener binds itself to the last sprite.

    setTimeout(()=>{button.setVisible(false);buttonPressed.setAlpha(1)},2000)


When I removed the top sprite after clicking on it and holding down, it worked. I gave myself two seconds for the page to load and to click, and click and hold (waiting for it to disappear).

Edit: I just found a workaround through bogosorting the problem that seems to work, but I have no idea why. Adding a timeout on pointerdown seems to regulate some sort of order.

button.on('pointerdown', () => {buttonPressed.setAlpha(1);setTimeout(()=>buttonPressed.setAlpha(1), 1)})
buttonPressed.on('pointerup', () => {buttonPressed.setAlpha(0);button.setAlpha(1);})
buttonPressed.on('pointerout', () => {button.setAlpha(1);buttonPressed.setAlpha(0);})

 

Edited by FKL34TI5T5

Share this post


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.