Pointer events not working with Ionic Angular

[pdrhlik]

Hi everybody,

I have just started playing around with Excalibur recently and I love it. I am integrating a game inside an Ionic project so I can easily build it for multiple platforms. Everything is working great except for one thing - pointer events don't seem to be working at all. Keyboard is working fine though.

I tried running the sample breakout game and it worked just fine. Then I copied the main game itself (which is simple enough to fit in a function) to my Ionic project to try it there. It started without problems but I couldn't move the paddle. It just didn't respond to mouse move events.

Does anyone have an idea what might be the issue? I'm not sure if it's an Excalibur bug or not. Any help would be appreciated. I'd really love to make these two technologies work together.

Thanks,
Patrik

[pdrhlik]

UPDATE: So the issue seems to be a bit weird. I copied this zooming functionality from one of the sample project:

game.input.pointers.primary.on("wheel", (ev) => {
      game.currentScene.camera.zoom += (ev.deltaY / 1000);
      game.currentScene.camera.zoom = clamp(game.currentScene.camera.zoom, .05, 100);
});

And it didn't work and didn't produce any messages whatsoever. I first tried triggering pointer events manually through the API which worked. Then I rewrote the same piece of code by hand and voila? It worked. I have no idea what might have happened there. There are probably some hidden characters that messed it up.

So I guess there's no issue at all and Ionic seems to working perfectly with Excalibur!

[eonarheim]

Oh interesting, which sample project was it? Maybe we can track down any errant hidden characters

[pdrhlik]

It was the Breakout sample game. I tried looking at it closely but haven't really found any hidden characters there. So I'm not really sure what happened there.

[pdrhlik]

UPDATE 2: The above only seems to be working when I specify pointerScope: Input.PointerScope.Document in the EngineOptions.

Unfortunately, the issue persists when I build the app for both Android and iOS devices. I have found a workaround for this by specifying a global listener that triggers necessary events through the API.

document.addEventListener("click", (e) => {
      let point = game.screenToWorldCoordinates(new Vector(e.x, e.y));
      game.input.pointers.triggerEvent("down", point);
});

It's just an example that could be expanded to any other event that needs to be handled.

[pdrhlik]

Yes, that's exactly it. This is the only the pointer events were working.

[eonarheim]

@pdrhlik I'll dig into this today 👍

[eonarheim]

Bug #2224

[eonarheim]

Seems to be an interesting interaction with Ionic/Angular? I can reproduce the issue running ionic serve with an Android device. Running the sample on Android without ionic seems to work as expected.

[eonarheim]

Oh this seems to fix it! https://stackoverflow.com/questions/48124372/pointermove-event-not-working-with-touch-why-not the mobile browser cancels the event after a period of time and takes it over for native functions without the touch-action: none. I'll make a fix to Excalibur to this effect in short order. @pdrhlik Thanks for bringing this to our attention!

Workaround for the pointer scope is set to document

document.body.style.touchAction = 'none';
var game = new ex.Engine({
  width: 800,
  height: 600,
  pointerScope: ex.Input.PointerScope.Document
});

Workaround for the pointer scope set to canvas. To work withing the Ionic/Angular framework, you must wait to construct the engine using a predefinied canvas in the ngAfterViewInit so Ionic/Angular are aware of the canvas. (This was unneeded in document scope because the event handlers attach to the document, not the canvas)