craidencool Posted June 20, 2016 Share Posted June 20, 2016 Hi guys! is phaser capable of opening an html page overlaying the game then after using the page it gets back to the game? thank you this would be very helpful to me. Link to comment Share on other sites More sharing options...
VitaZheltyakov Posted June 20, 2016 Share Posted June 20, 2016 Yes, this can be done ordinary means javascript. You can change the z-index of elements of the page. Link to comment Share on other sites More sharing options...
mattstyles Posted June 20, 2016 Share Posted June 20, 2016 If you're pausing the simulation (i.e. the Phaser bit) whilst you open the other page (maybe in some sort of modal) you'll have to know when interaction has finished and you're returning the user to the Phaser bit. If you have a close button on the modal then this is trivial but if you're going to pop open the modal with an iframe inside with the html content then closing the modal and returning becomes much more tricky. Something to consider. Link to comment Share on other sites More sharing options...
megmut Posted June 20, 2016 Share Posted June 20, 2016 I do this often, by creating the html overlay element above the source script in the body tag. For example: ... </head> <body> <div id=overlay1 style=display:none> ... </div> <div id=overlay2 style=display:none> ... </div> <script src="link to your injected game javascript file"> </body> ... Then inside the game, I have a class to handle the popups with window events, something like... // inside the index.html file, add this script // window.addEventListener('showOverlay1', function(e) { document.getElementById('overlay1').style.display = 'block'; }); window.addEventListener('showOverlay2', function(e) { document.getElementById('overlay2').style.display = 'block'; }); // inside your game somewhere, add this // button1.events.onInputdown.add(function() { window.dispatchEvent(new CustomEvent('showOverlay1', { detail: 'myParams here' })); window.addEventListener('overlay1Closed', function(e) { // do some stuff when overlay 1 is closed }); }, this); button2.events.onInputdown.add(function() { window.dispatchEvent(new CustomEvent('showOverlay2', { detail: 'myParams here' })); window.addEventListener('overlay2Closed', function(e) { // do some stuff when overlay 2 is closed }); }, this); All that's left to do, is the button that closes your popup in the html page, dispatch the event, overlay2Closed with some function. I hope this helps in any way As a side note, this method works great inside iframes, and if you use the document.availWidth for the css on the overlays, you can make sure that the overlay is always centred within the iframe! Link to comment Share on other sites More sharing options...
craidencool Posted June 21, 2016 Author Share Posted June 21, 2016 16 hours ago, megmut said: I do this often, by creating the html overlay element above the source script in the body tag. For example: ... </head> <body> <div id=overlay1 style=display:none> ... </div> <div id=overlay2 style=display:none> ... </div> <script src="link to your injected game javascript file"> </body> ... Then inside the game, I have a class to handle the popups with window events, something like... // inside the index.html file, add this script // window.addEventListener('showOverlay1', function(e) { document.getElementById('overlay1').style.display = 'block'; }); window.addEventListener('showOverlay2', function(e) { document.getElementById('overlay2').style.display = 'block'; }); // inside your game somewhere, add this // button1.events.onInputdown.add(function() { window.dispatchEvent(new CustomEvent('showOverlay1', { detail: 'myParams here' })); window.addEventListener('overlay1Closed', function(e) { // do some stuff when overlay 1 is closed }); }, this); button2.events.onInputdown.add(function() { window.dispatchEvent(new CustomEvent('showOverlay2', { detail: 'myParams here' })); window.addEventListener('overlay2Closed', function(e) { // do some stuff when overlay 2 is closed }); }, this); All that's left to do, is the button that closes your popup in the html page, dispatch the event, overlay2Closed with some function. I hope this helps in any way As a side note, this method works great inside iframes, and if you use the document.availWidth for the css on the overlays, you can make sure that the overlay is always centred within the iframe! Thank you sir Megmut. I have a question will it work because I am currently developing a learning app so at the end of the stage of the game the player will have to take a quiz which is the html page overlaying the game and after answering the quiz the students will automatically go to the next stage. I hope you will have the time to respond to this sir. Thank you again. Link to comment Share on other sites More sharing options...
megmut Posted June 21, 2016 Share Posted June 21, 2016 Yes, you can adapt the code to do what you want. When the game state has ended, dispatch a 'showTest'. When the test has been completed, dispatch an event to the game that will trigger the next state start Link to comment Share on other sites More sharing options...
craidencool Posted June 21, 2016 Author Share Posted June 21, 2016 On 6/20/2016 at 9:41 PM, megmut said: I do this often, by creating the html overlay element above the source script in the body tag. For example: ... </head> <body> <div id=overlay1 style=display:none> ... </div> <div id=overlay2 style=display:none> ... </div> <script src="link to your injected game javascript file"> </body> ... Then inside the game, I have a class to handle the popups with window events, something like... // inside the index.html file, add this script // window.addEventListener('showOverlay1', function(e) { document.getElementById('overlay1').style.display = 'block'; }); window.addEventListener('showOverlay2', function(e) { document.getElementById('overlay2').style.display = 'block'; }); // inside your game somewhere, add this // button1.events.onInputdown.add(function() { window.dispatchEvent(new CustomEvent('showOverlay1', { detail: 'myParams here' })); window.addEventListener('overlay1Closed', function(e) { // do some stuff when overlay 1 is closed }); }, this); button2.events.onInputdown.add(function() { window.dispatchEvent(new CustomEvent('showOverlay2', { detail: 'myParams here' })); window.addEventListener('overlay2Closed', function(e) { // do some stuff when overlay 2 is closed }); }, this); All that's left to do, is the button that closes your popup in the html page, dispatch the event, overlay2Closed with some function. I hope this helps in any way As a side note, this method works great inside iframes, and if you use the document.availWidth for the css on the overlays, you can make sure that the overlay is always centred within the iframe! sir what does this line of code do? window.dispatchEvent(new CustomEvent('showOverlay1', { detail: 'myParams here' })); Link to comment Share on other sites More sharing options...
mattstyles Posted June 22, 2016 Share Posted June 22, 2016 Quote sir what does this line of code do? window.dispatchEvent(new CustomEvent('showOverlay1', { detail: 'myParams here' })); It's standard DOM pub/sub pattern, add event listeners and when the correct event is dispatched those registered listeners will fire and execute their code. I've been having a few cross-browser issues dispatching custom events recently, IE dies one way, Safari (and iOS safari) dies another way, so go careful if you're supporting older platforms. You can use a different JS-based event emitter rather than the DOM version though, node's eventemitter is available through browserify if you use that, or eventemitter3 copies the api but is quicker, or if you just want to throw something in with a script include wolfy's event emitter is an old battle-harded emitter implementation. You can always roll your own as a quick test dont worry, its pretty easy to implement. drhayes 1 Link to comment Share on other sites More sharing options...
craidencool Posted July 17, 2016 Author Share Posted July 17, 2016 On 6/21/2016 at 4:06 PM, megmut said: Yes, you can adapt the code to do what you want. When the game state has ended, dispatch a 'showTest'. When the test has been completed, dispatch an event to the game that will trigger the next state start Im sorry sir but I am really having a hard time implementing this. I successfully opened the html page in an iframe but how do i close the overlayed div with a button on the page I opened in the iframe. The html page is a quiz page and when you finish taking the quiz and you clicked on submit the record is stored in mysql(already taken care) and the iframe/overlayed div is then hidden or it will go back to tha game(my problem) I hope you can show me some codes on implementing this. thank you so much! Link to comment Share on other sites More sharing options...
Recommended Posts