Multiple, seperate Phaser.io instances on one page.

[Chrisgn90]

Hello,

 

I'm relatively new to Javascript/Phaser, and I've reached a bit of a roadblock in my dissertation which I hope that someone can help me with.

 

I'm currently trying to write a web page where on clicking one of a series of buttons the user is given a different phaser game in a modal window. I've tried to keep it all very self contained to one page so I was hoping I'd be able to have several instances to be called when needed.

 

I have one phaser working, but the page loads a blank canvas when a new phaser.js is called.

 

I've done a bit of research and do realise it's a WebGL/pixi.js issue. I've found someone else with the same problem on stackoverflow but their fix of changing the phaser to .CANVAS did not work for me.

 

I've toyed about a bit with trying to put it into a canvas or an iframe rather than a div, but I'm not entirely sure of how to do this with a phaser.js file. As I said, I'm pretty new at this, and I've been working on a learn as you go approach and off examples .

 

I would be extremely grateful if someone could help me out. It'd be great to get this fixed so that if I do have to make any big changes, then I can get it done sooner rather than later at least .

 

Many Thanks! If you need any code I'll be happy to post it.

[lewster32]

Phaser and pixi definitely do not play well with multiple instances - all kinds of problems occur when you try to do this. Instead you should consider using states for your separation - this is exactly what states are designed for, to help you contain several separate 'scenes' in your game which may in fact be entirely different games, but all which can share assets and Phaser/pixi's systems.

 

See this introduction for more info: https://github.com/photonstorm/phaser/wiki/Phaser-General-Documentation-:-States