Publishing (multiple) PlayCanvas apps on a website

Help & Support
1

Hi, I’ve got an issue with publishing my PlayCanvas apps on a website. These website will contain ui elements to control the PlayCanvas apps.

  1. I want to publish the PC app (canvas) in a specific div. How to do that?

  2. My website must contain muliple (two) PlayCanvas application (yes, this is necessary). Like for the first one, there is a div container where it should be loaded.

  3. I need access to both application to fire events to them like in the example below or in any other way:

        btn_doSomething.addEventListener('click', function() {
            app1.fire("DoSomething", "Value");
            app2.fire("DoSomethingElse", "Value");
        });

Can somebody help me? I don’t get along with the PlayCanvas Self-hosting manual.

I can probably solve issue 1 and 2 by using iframes for the PlayCanvas apps. But how to I fire events to them?

2

I’ve found a solution that works for me. I’ve published a website with two PlayCanvas “Apps” on it and interacting via script with both of them.
The solution recommend to keep the PlayCanvas applications in an iframe. So you can host the app yourself or let PlayCanvas this for you. Another advantage is that you don’t have to change anything in our exported project.

So the HTML part is very simple:

<div id="app1-wrapper">
       <iframe id="app1-iframe" src="myApp1/index.html" frameborder="0"></iframe>
</div>

<div id="app2-wrapper">
       <iframe id="app2-iframe" src="myApp2/index.html" frameborder="0"></iframe>
</div>

In a JavaScript I get the apps from both iframes and save them in a variable:

 var app1_iframe = document.getElementById("app1-iframe").contentWindow;
 var app1 = app1_iframe.pc.Application.getApplication("application-canvas");

 var app2_iframe = document.getElementById("app2-iframe").contentWindow;
 var app2 = app2_iframe.pc.Application.getApplication("application-canvas");

Now you’ve got access to the app and you can run all functions. For me, I’m firing events to my scripts. Keep in mind that you have to creat the listeners for them in your PlayCanvas app.

app1.fire('myFunctionName',value);
app2.fire('myFunctionName',value);

And that’s it! Very simple and very flexible in my opinion!

1 Like
3

Awesome, glad that you found a a solution and thank you for post back here with it! :slight_smile:

1 Like