Canvas2D, actionManager on mobile

[Virtuell]

I'm trying to use canvas2d on mobile. As buttons I use the a rectangle with an actionManager as in this example taken from the canvas2d tutorial. 

http://www.babylonjs-playground.com/#1onkpj#5

However the BABYLON.ActionManager.OnPickTrigger only works occasionaly on mobile and is very unresponsive.

I noticed that the mobile "pointer" is moved to the correct position making it possible to use the OnPointerOverTrigger to trigger the button, but for the computer browser I use the OnPointerOverTrigger for a color transition on the button.

Does anyone have a suggestion for a universal solution for both mobile and computer browsers?

 

[GameMonetize]

Do you confirm that you have no issue on your PC?

 

Pinging @Nockawa

[Virtuell]

Yes, I have tried on a several computers and several mobile devices and the behaviour is consistent.

No issues on pc but on mobile the OnPickTrigger activates after about 3-8 attempts.

This is only for the canvas2d action in the example from http://www.babylonjs-playground.com/?17 the trigger works fine on mobile aswell.

[Nockawa]

@Virtuell I can use the PG you referenced as a repro case on mobile?

[Virtuell]

On 9/20/2016 at 6:56 PM, Nockawa said:

@Virtuell I can use the PG you referenced as a repro case on mobile?

@Nockawa Sure that is what I did

The references are from the offical tutorials on canvas2d: http://doc.babylonjs.com/overviews/Canvas2D_Home
and actions: https://doc.babylonjs.com/tutorials/How_to_use_Actions

 

[Virtuell]

@Nockawa Do you have any suggestions to point me in the right direction for this issue?

I am fairly sure it's a bug in the framework, but for me it's a bit intimidating to attempt to solve it.

For now I am thinking of working around the problem using collision meshes tied to the camera at the position of my buttons and then using OnPickTrigger on the mesh instead.

[Nockawa]

Ok I'll take a look right now, but I've never tried to debug on a tablet, so I'm not sure how to do.

[Nockawa]

@Virtuell why you don't use the pointerEventObservable like it's done on this PG: http://babylonjs-playground.com/#UVDG0#67 I just tested it on tablet and it seems more reliable. Let me know.

For your information the action manager is supported for compatibility reason but the pointerEventObservable is more complete/accurate.

 

[Virtuell]

@NockawaThank you!

I tested and researched pointerEventObservable and it seems be feature complete and work as intended I'll redo my code to use the pointerEvent instead.

I have been working with Babylon and canvas2d for about a  month and from the documentation the actionmanager seemed to be the way to go, had no idea that it was legacy stuff.

[Nockawa]

37 minutes ago, Virtuell said:

@NockawaThank you!

I tested and researched pointerEventObservable and it seems be feature complete and work as intended I'll redo my code to use the pointerEvent instead.

I have been working with Babylon and canvas2d for about a  month and from the documentation the actionmanager seemed to be the way to go, had no idea that it was legacy stuff.

Well, "Legacy" may not be the best term I should have used. The ActionManager is a feature made in the scope of a 3D Engine and it's great in this scope. 

Canvas2D was built to serve as a foundation for a GUI Library so the pointerEventObservable was designed accordingly and the requirements are pretty wide.

Then I worked on exposing the ActionManager also for Canvas2D, but as the ActionManager was not design for 2D stuffs, things are more complex to handle (for me).

I'll keep the Trello Card about the bug on mobile but it's no longer a priority to fix. I'll give it another try when I'll be better at debugging on mobile/tablet!

[GameMonetize]

Thank you for the clarification! Action Manager is NOT legacy AT ALL  

[Virtuell]

@Nockawa

I got it working using the pointerEventObservable It was less code for the same behaviour compared to the actionManager so that's nice.

I did however find that the BABYLON.PrimitivePointerInfo.PointerDown event doesn't work as intended on mobile, I had to use PointerUp to get expected behaviour.
For PointerDown the event seems to register when pressing the Prim2dBase object but isn't triggered correctly until a second press somewhere else.

 

[Nockawa]

10 hours ago, Virtuell said:

@Nockawa

I got it working using the pointerEventObservable It was less code for the same behaviour compared to the actionManager so that's nice.

I did however find that the BABYLON.PrimitivePointerInfo.PointerDown event doesn't work as intended on mobile, I had to use PointerUp to get expected behaviour.
For PointerDown the event seems to register when pressing the Prim2dBase object but isn't triggered correctly until a second press somewhere else.

 

I take a look right away on this, I've realized that I have a laptop with touch, it should be easier than a tablet to test/debug!

[Nockawa]

@Virtuell ok I think the bug is fixed, I was indeed firing the event on the wrong primitive sometimes which lead to the behavior you noticed.

if you get the latest sources or wait for a PG update or the next preview build, it should be ok.

Edit: the ActionManager bug "may" have been also fixed at the same time. I wait for a PG update to check for it.