Embedding PlayCanvas into a webpage without iframe

Help & Support
1

Hi, I’ve seen in a few places that the recommended way to embed a Playcanvas game into a website is via an iframe but I can’t currently do that on the project I’m working on as it adds more dependencies that can’t be there. I can’t show the website because its for a client, but I can describe the issue. The webpage is currently setup like this with an iframe and it works great. the iframe fills the section styling perfectly:

<h2>First Card</h2>
<section>
  
... some stuff ...

</section>


<h2>PlayCanvas Game</h2>

<section class="game-style">
<iframe src="www.game.com"></iframe>
</section>


<h2>Third Card</h2>
<div>

... some stuff ...

</div>

Now, this doesn’t work whenever I try and embed it this way by dropping the scripts into the section that has the css to constrain the game. notice that this also includes the settings and the engine in the head:

<head>
    <script src="playcanvas-stable.min.js"></script>
    <script src="__settings__.js"></script>
</head>

<h2>First Card</h2>
<section>
  
... some stuff ...

</section>


<h2>PlayCanvas Game</h2>

<section class="game-style">
    <script src="__start__.js"></script>
    <script src="__loading__.js"></script>
</section>


<h2>Third Card</h2>
<div>

... some stuff ...

</div>

Whenever I do it this way, the whole website background turns gray (you know that Playcanvas gray color) and then all of the html sits on top of that gray color and the game never launches in any visible way. Let me know if anyone has a solution to this. I know its a lot. Thanks in advance.

2

Just to understand, rather than using an iframe, you would like the canvas div to be directly on the page instead?

3

Yes

4

It’s as bit of tricky one. Haven’t done this before but the way I would approach it is to create a div as a wrapper for the canvas and change __start__.js to create the canvas as a child of that div instead of the document body.

5

Give that a shot, if you still are having trouble, I can try to find some time to pull together an example?

6

Okay I’ll give it a try. So you’re saying that that html setup I have there in the second example should work as long as I fix how the canvas is parented in the javascript?

7

I think so, it isn’t something that I’ve tried or seen before :sweat_smile:

8

odd… now I’m getting 403 errors that the page is having trouble loading my game all together. is it not as simple as dropping the scripts in with the index file? this is how the project is setup (except for the Archive. that is just a zipped version of the project)

Screen Shot 2021-01-28 at 11.54.11 AM
Screen Shot 2021-01-28 at 11.54.11 AM692×650 35.7 KB

and this is the console

Screen Shot 2021-01-28 at 11.55.46 AM
Screen Shot 2021-01-28 at 11.55.46 AM1888×310 85.2 KB

9

In the screenshot, you are missing config.json and actually a few others file :slight_smile:

Here’s an example of a project:

image
image644×758 85.5 KB

10

That was a silly mistake on my end. Not sure where those files went when I was transferring everything over haha. Now it still seems like its having some problems finding the config file? Here is the console and the file structure yet again:

Screen Shot 2021-01-28 at 12.49.09 PM
Screen Shot 2021-01-28 at 12.49.09 PM1340×776 49.9 KB

Screen Shot 2021-01-28 at 12.52.12 PM
Screen Shot 2021-01-28 at 12.52.12 PM1213×798 136 KB

I can now see the frame near where its supposed to be though so that’s encouraging!

11

Okay, I had a proper look at this and it’s going to need a modification to the engine for this scenario to work as the engine assumes it will be in an iframe.

It’s doable with a monkey patch though, it just feels a bit hacky :grimacing:

12

Is this something yall are planning on being possible in the future with updates to the engine or should I try the hacky way? I have no experience with monkey patches but if you have an idea I’d love to hear it. Otherwise I’ll start taking a whack at it. I’ve just been trying different things within the start.js file up until now

13

It’s not in the pipeline as this is the first time I remember it being asked for as feature.

This is what I got so far, I’m about to leave for work so I will put this together properly tomorrow

Kapture 2021-01-28 at 18.59.47

14

Can I ask what is the reason for not using an iframe?

15

The reason I ask is because I can’t see where the extra dependencies would be as I’m using the same set of files from the PlayCanvas downloaded build.

16

Put this together as in, show how to get to what you have there?

The reason is we’re trying to cut down on pulling from other web pages. The pipeline this will end up landing in already relies on so many different things to pull from, I don’t currently have authorization to add more links out of the build instead of just building within the page itself.

17

Yes, I will do a GitHub repo and you can see the commit changes :slight_smile:

When you say other, do you mean external or just in general? I was thinking the iframe would link to a PlayCanvas build host on the same server/site as the page. Is that not permitted?

18

Definitely cannot do external, but I believe in general. I’d have to check with my team on that though. We often work in pretty low bandwidth environments so I do wonder if that would impact performance at all (because it’d be an extra call to a server) rather than having it baked into the page.

Thank you so much for all the help man. I look forward to hearing from you tomorrow :slight_smile:

19

That’s interesting :thinking: Is it the number of network calls or the data size that matters or both in these environments?

The reason I ask is because if the number of networks is more important, we could embed the files/source in base64 URLs. However, that increases the size.

20

I think it’s both, but data size is more important to us than network calls.

1 Like