Clicking through ezgui gui & Phaser elements

[Stéphane Gully]

Hello,

I try to use ezgui to build and display popin in a game build with phaser.
It works well, ezguipopin are really nice but I noticed that mouse clicks are not blocked by the popin.
For example if there is a sprite build with phaser behind the popin which is able to be clicked, the ezgui popin will not block the onInputDown event on the phaser sprite.

Is it possible to tel ezgui elements to block the mouse clicks ?

regards,
Stéphane

[Alaa-eddine K.]

Hi @kerphi thank you for using EZGUI.
This issue is due to the way events are handled by the browser and by phaser.
when you issue an event (a click for example), EZGUI cannot determine if you want to propagate it or not. It also cannot decide how Phaser will handle this event.

for such situation I prefered to let the developer choice how he want to handle the event.
EZGUI event callbacks provide access to Phaser/Pixi original events and let you call a builtin stoppropagation() function, or use your own event propagation control.

I hope this can help.

[Stéphane Gully]

Thanks for your answer and the stoppropagation tip.
If I create a dialog this way:

var myDialog = EZGUI.create(dialogData, 'metalworks');

How could I "catch" all click events on the dialog ? so I could call ev.stopPropagation() on it.

[Alaa-eddine K.]

I don't have a dev environment to test the code but I think you can use something like this

myDialog.on('click', function (event) {
                 // you code goes here
            });

not sure if phaser event is "event" itself or "event.originalEvent" , you can use a console.log or chrome devtools here to check :)

[Stéphane Gully]

Thank you. I'll test it :)

[Stéphane Gully]

I just tested this:

myDialog.on('click', function (arg1, arg2, arg3) {
});

arg1 is a c.Pointer object
arg2 is a Window object
arg3 is undefined

arg1 and arg2 doesn't have any originalEvent or stopPropagation properties :(

Any idea ?

[Alaa-eddine K.]

Well, I inspected an example code and you are right, it seems that Phaser do not provide any stopPropagation equivalent in Pointer class (Pixi has this feature).

one workaround would be to set a variable in EZGUI and detect if it's set in your phaser event handling routine.

for example you can do :

myDialog.on('click', function (event) {
    event._myStopPropagation = true;
});

then in your game code, check if the event contains _myStopPropagation variable, if so, it means that it comes from EZGUI and you can ignore it.

[Stéphane Gully]

Ok so this way it worked !

Just a small thing i noticed, I had to set event._myStopPropagation to false when I close the ezgui dialog or the true value will stay active everytime. This is a strange behavior, like if the event properties have a global scope and the object is reused and reused everytime a new event is generated.

Thank you a lot 👍

[Alaa-eddine K.]

I think that this is due to the way Phaser handles Pointer class.

Good to know :)