[solved] PointUp event and BABYLON.GUI

[TomaszFurca]

Yesterday i add simple GUI buttons to my game. I have problem with pointer event, when i click to button pointer event send data with selected mesh (I think about ground instead button) and now i logic of my game, if i select ground player move to this point. Is possible to block pointer event when i click to my button?

Tom

[Wingnut]

Hi TF.

  I think if you set button.isPointerBlocker = true, or stackPanel.isPointerBlocker = true;   ...then you will NOT be able to click ground THROUGH button or stackPanel.

I did tests... https://www.babylonjs-playground.com/#XCPP9Y#149

Stackpanel red, button green.

For ground click tests, watch console.  When ground is clicked, ground.actionManager reports the hit... to console.  I see no ground clicks when red panel or green button are clicked.  Is that what you wanted?  I hope so.  Perhaps I misunderstand.

 

SimpleButtons are set .isPointerBlocker = true by default, it seems.  So, I don't know why you have click-thru problem. 

StackPanels are set .isPointerBlocker = false by default. If you use stackPanel, try setting it true.  But beware of stackPanel being too wide... blocking ground clicks in bad places.  You might need to set stackpanel.width == button.width.  Dunno... I'm still learning.

I report button and panel to console, where you can click on the word Object and launch browser object inspector.  Then, it is easy to see all properties on button and panel.

In this PG, onPointerEnter and onPointerOut observables are attached to PANEL, and not to button (see lines 53-58).  Wingnut playing/experimenting. 

(I had trouble raising Y position [.top] of button, but then I raised Y position of stackPanel, and that worked.)  For fun, notice that stackPanel width == fullscreen width, by default.

Anyway, experiment with .isPointerBlocker on buttons/stacks, and see if that solves your issue.  Also, ground.isPickable = true/false might be useful. OnEnter button/panel... ground.isPickable = false;  OnOut button/panel... ground.isPickable = true;  *shrug*  I hope I am on-topic.  Be well.

[TomaszFurca]

I tested this flag in my project -> babylon.furcatomasz.pl, but without positive results. In PG it works fine... Later i will check setting my pointer events in other positions of my project, maybe this is problem, maybe imported scene - i don't know I must check it. Thanks for show good way to resolve this problem.

[TomaszFurca]

After many tests i do not know why isPointerBlocker not work.

So your tip about register function onEnter and onOut is perfect.

Now my code, makes my game GUI more user friendly  

            let self = this;
            control.onPointerEnterObservable.add(function() {
                self.game.sceneManager.environment.ground.isPickable = false;
            });

            control.onPointerOutObservable.add(function() {
                self.game.sceneManager.environment.ground.isPickable = true;
            });

Additionally I used your code from PG and it don't work too.

Thanks @Wingnut