Prevent clicks on canvas when DOM-based elements on top?

[Phil]

Hi again!

So I've stopped using individual scenes as Menus and started using HTML dialogs instead. Works like a charm especially when changing layouts, much easier to use the DevTools than changing some values and restarting the whole game...

Anyway, I've noticed that the canvas still handles clicks when a DOM element is placed over it. I think in the Sweeps game you just disabled enableCapturePointer for each button but that doesn't seem to be a very elegant solution (https://github.com/excaliburjs/sweep/blob/master/Src/game/mainmenu.ts#L150)

I've tried hiding the canvas with display: none; and not letting it accept click events with pointer-events: none; but that didn't work. Is there any other way?

Cheers

Phil

[Erik Onarheim]

Hi Phil,

Yes totally agree, HTML is much easier to iterate and style with CSS than with native canvas. As an aside, I've done UIs in both HTML and Canvas for games. Sometimes it depends on the effect you want, canvas can do some things easier than HTML but you sacrifice all the innovation and power of HTML.

For the question at hand, have you tried setting the engine pointer scope to canvas? I think that should work

var engine = new ex.Engine({
  canvasElementId: 'game',
  width: 600,
  height: 400,
  pointerScope: ex.Input.PointerScope.Canvas
});

I have a pen that I think reproduces the scenario you're describing, let me know if I'm off.
https://codepen.io/anon/pen/qxWYgg?editors=1010#0

Cheers,
Erik

P.S. We would be really interested in seeing what you have built and maybe chatting online sometime. Let us know if you'd be up for either.

[Phil]

I apologize - I replied directly by email instead of here. I'll copy and paste my reply below.

HI Erik, thanks for the quick response!

As a Frontend Dev I'm much more drawn towards the HTML way of course :)

I've tried adding your suggested options but I'm still observing the same problem. Maybe because I'm using the Electron sample and it's using the fullscreen displaymode? (though I couldn't reproduce that on the codepen)

But I've worked around this by adding a little helper function that I call instead of simply adding a button to the scene:

private _addBtn(btn: Button): void {

this.add(btn);

this._buttons.push(btn);

}

private _toggleButtons(on: boolean): void {

this._buttons.forEach(button => {

button.enableCapturePointer = on;

});

}

Works well enough 

>P.S. We would be really interested in seeing what you have built and maybe chatting online sometime. Let us know if you'd be up for either.

Of course! Both is fine with me. What are you interested in, specifically?

Cheers

Phil

[Erik Onarheim]

Hi Phil,

I shot you a private email around the details for chatting.

I'll add this thread as an issue to track this, it's very odd that this workaround is necessary.

https://github.com/excaliburjs/Excalibur/issues/932

Cheers,

Erik