PhaserJS Canvas Override Bootstrap Modal

Question

I have a simple game create with phaserJs with Angular and bootstrap for styling. My problem here is when i show bootstrap modal and click inside modal, it's effect to my phaserJS canvas button.

Example preview code: https://github-u3st63.stackblitz.io

Example code: https://stackblitz.com/edit/github-u3st63

How to fix this? I tried to set z-index to canvas, but it's not working.

Answer 1

Well this seems to be a Angular issue, with the event execution order. Since I'm no expert on Angular. I would suggest simply pausing the game on opening the Modal dialog, with the function pause, something like game.scene.pause('Game') and on closing the dialog you simply resume the game with game.scene.resume('Game'). Link to the documentation

Here is an official phaser demo showcasing these to functions.

You would only have to wire up the communication between the components.

Info: Just keep in mind if you have multiple scene running, that you would have to stop them all, and restart them again. In this case simply hiding the game might be a better option.