Jump to content

PHASER OVERLAY WINDOW


craidencool
 Share

Recommended Posts

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

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

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

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

 

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. 

Link to comment
Share on other sites

  • 4 weeks later...
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...