¿Ionic 4 with Phaser 3 doesn't work?

Phaser 3
1

Hi,
I have been trying to create a Phaser 3 with blanck project in Ionic 4. In the Typescript code, upload to Phaser (let Phaser) using an Index.html.’s Script reference. The console on the screen shows that Phaser is running, but on the screen it shows absolutely nothing.

there is any Phaser 3 support in Ionic 4? Exist some examples in github but none of them work. I’m starting to think Phaser doesn’t run on Ionic 4

ts1
ts1569×623 23.2 KB

ts2
ts2940×523 26 KB

2

Same here :frowning:

3

Have you tried putting the Phaser game creation in ionViewWillEnter() or ionViewDidEnter() instead?

I’m not much of an Ionic user but I’m guessing the template for HomePage has not been rendered yet in the constructor.

So the Phaser game is probably behind the Ionic app. You may be able to find a canvas element with width and height set to 600 and 800 someone on the page.

1 Like
4

Yes you are right supertommy,
canvas is created.

is there any solution?

5

I think the solution is adding an ionViewDidEnter() method to your HomePage class and then moving your constructor code into that method.

I have an ionic example here: https://github.com/ourcade/phaser3-ionic-example

Might be a different Ionic version than you are using but I think the ionViewDidEnter() hook still exists.

6

Hi thanks for your example but i am using Ionic 4 React
¿Can you give same example for React?

7

I have not used Ionic with React so I am not sure but I would imagine they have the same hooks if you look at their docs.