Communicating between published game and HTML file

Hello

Once I publish a build as ZIP can I still communicate between the game and the created index.html file. Like for example if i got an event like ontriggerenter in the game that marks game as ‘complete’ how can I output/communicate that within the index.html file.

I was following this but it confused me how to implement.

Thanks

Hi @nasjarta,

All JavaScript code is running on the same window global context, meaning you can easily access the PlayCanvas application instance from your index.html file.

For example here is how to find an entity, just make sure to run it after the application has finished loading:

pc.app.findByName('My Entity');

Similarly you can access your scripts, listen to events etc.

1 Like

Yes, you can communicate between the game and the index.html file even after publishing a build as a ZIP file. One way to achieve this is by using the window.parent object to access the parent window from the iframe that the game is running in.

To send data from the game to the index.html file, you can use the postMessage() method to send a message to the parent window. For example, in your ontriggerenter function, you could add the following code:

javascript example code

window.parent.postMessage('complete', '*');

This will send a message with the string 'complete' to the parent window.

To receive the message in the index.html file, you can add an event listener to the window object that listens for the 'message' event. For example:

javascript code example:

window.addEventListener('message', function(event) { if (event.data === 'complete') { // Do something here when the game is marked as complete } });

This code will listen for messages from the game and check if the message is 'complete'. If it is, you can add code inside the if block to perform whatever action you want to take in response to the game being marked as complete.

I hope this helps! Let me know if you have any further questions.

1 Like

Thanks @Jacob_McBride2, just note that works only when using your PlayCanvas application as an iframe and you’re looking to communicate with the parent page.

2 Likes

That’s correct, my previous answer assumes that the PlayCanvas game is embedded as an iframe in the index.html file and you’re looking to communicate between the game and the parent page. If you’re not using an iframe, the approach would be different.

One way to communicate between the game and the index.html file without using an iframe is to create a global variable in the index.html file and then access it from the game code. For example, in the index.html file, you could add the following code:

<script> var gameComplete = false; </script>

Then, in your game code, you could check the value of this variable and update it as needed. For example, in your ontriggerenter function:

gameComplete = true;

After the game has finished running, you can access the value of the gameComplete variable from the index.html file and perform any necessary actions. For example:

if (gameComplete) { // Do something here when the game is marked as complete }

I hope this helps! Let me know if you have any further questions.

1 Like

Hello

Thank you for the replies

I am not running application as iframe but I am going to try Jacob second solution.

I managed to send a message by having a global function in the game window.getComplete(); and put a complete = true and console.logged it. Then on the ontrigger event I ran that function.

Then I retrieved that in the index.html file with window.getComplete(); and it showed as true

2 Likes

Great to hear that you were able to successfully implement a solution for communication between your PlayCanvas game and the index.html file!

Using a global function in the game window is another way to achieve this. The window object is the global object in a browser’s JavaScript environment, so any properties or functions attached to it are accessible from other parts of your code. In this case, you were able to define the getComplete() function in the game window and then call it from your index.html file.

I’m glad that your implementation worked as expected and that you were able to retrieve the value of the complete variable in your index.html file.

If you have any further questions or run into any issues, feel free to ask!