solved (More) Proper way to implement event handlers

[paleRider]

Hi everybody:

I need to know about what is the preferred approach to handle the mouse/touch events (for example onclick):

 

(1) via the canvas by means of

myCanvas.addEventListener("pointerdown", function (evt) {
    ...
    var pickInfo=myScene.pick(myScene.pointerX,myScene.pointerY,function(mesh){
            return (mesh===myMesh);
  });
        
    if(pickInfo.hit){
            alert("Mesh picked");
    }
});

 

(2) via the mesh using the powerful ActionManager functionality

myMesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickDownTrigger,function(evt){
    alert("Mesh picked");
}));

 

Thank you for your time.

[GameMonetize]

Hello there is a third alternative: using scene.onPointerObservable

This way the scene will handle all events for you and you will just have to add your own observer to get all events.

That's the way used by all cameras for instance:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/babylon.arcRotateCameraPointersInput.ts#L141

[paleRider]

Ok, very interesting.

I'm going to study right now this third option in order to have a comprehensive mental map of all this subject of "event interfacing".

Anyway, let me ask you about what is the best option in terms of "good practices", "performance" and last but not least "cross-browsing support" (considering here even Android and iOS, by means of hybrid apps and embedded browsers)?

For example I think that the "canvas addEventListener " way is going to be a "cross-browsing" problematic solution, as the implementation of web events between different browser vendors is always a little nightmare. Anyway I need to take this approach when "onmousemove" functionality is a must (for example in order to drag a mesh), as ActionManger doesn´t support mouse-move triggering).

On the other hand I assume that ActionManager  and the mentioned onPointerObservable, implement a more "common-interface" solution, as based on WebGL. Isn´t it?

Edited August 14, 2017 by paleRider
Completion

[GameMonetize]

Correct

[paleRider]

In order to use the BJS implementation of the (famous) Observable Pattern, with pointer events, I see two ways are possible:

1. To use an already implemented (dedicated) BJS Observer. I can´t find in the docs a Mesh callback method but a Scene's one (myScene.onPointerObservable). Is this correct? If "yes", do I need to use myScene.meshUnderPointer to get my mesh?
2. To define my own myMesh-Observable.

Keeping the things as simple as possible (a good reason to use an engine) and so taking the first approach, something like the following would be written:

myScene.onPointerObservable.add(callback, mask, insertFirst);

I need some help in order to understand the way to write the callback param in JS, as the arcRotateCamera implementation link (https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/babylon.arcRotateCameraPointersInput.ts#L141) you sent me to study, is of course in TS (bellow code shown simplified):

observer = scene.onPointerObservable.add(pointerInput, PointerEventTypes.POINTERDOWN | PointerEventTypes.POINTERUP | PointerEventTypes.POINTERMOVE); 

where

pointerInput: (p: PointerInfo, s: EventState)

being the docs (http://doc.babylonjs.com/classes/3.0/observable) already focused on TS implementation.

Thanks.

 

Edited August 16, 2017 by paleRider
Completion

[paleRider]

Ok, I see now that this kind of functionalities are already addressed and well solved by Wingnut and iiceman in another thread of this forum: http://www.html5gamedevs.com/topic/27410-need-a-sample-for-dragging-and-collision-detection-implemented-by-actionmanager/

Best regards.

P.S. I agree that to add some kind of onPointerMove trigger to ActionManager would be fine.